Flutter Scaffold Tutorial

Flutter Scaffold

Flutter Scaffold is used to display a basic material design layout that contains application bar, body, bottom navigation bar, bottom sheet, drawer, floating action button, persistent footer buttons, etc.

In this tutorial, we will get introduced to Scaffold class, and how to use it to display a Scaffold layout in our Application.

Syntax

The syntax to display a Scaffold layout with app bar, body, and floating action button, is shown in the following.

Scaffold(
  appBar:  /*some application bar*/,
  body:  /*some body*/,
  floatingActionButton:  /*some floating action button*/,
);

Example

In the following Flutter Application, we shall display a Scaffold with an appBar, body, and a floating action button.

In build() method of _MyStatefulWidgetState class, we are returning a Scaffold.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Tutorial';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scaffold Tutorial'),
      ),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Screenshot – Android Emulator

Screenshot – iPhone Simulator

Conclusion

In this Flutter Tutorial, we learned how to display a Scaffold layout in our Flutter Application, with examples.