Scaffold class in Flutter with Examples

In Flutter, the Scaffold class is a widget that provides a basic structure for building an app's UI. It is a top-level container that includes commonly used UI elements like an app bar, a floating action button, a drawer, and a bottom navigation bar. Here are some of the commonly used properties and widgets within the Scaffold class:

1. appBar: A widget that displays a top app bar in the scaffold. It typically includes a title and actions.

2. body: A widget that displays the main content of the scaffold. This can be any widget or combination of widgets.

3. floatingActionButton: A widget that displays a floating action button in the scaffold. This is typically used for a primary action in the app.

4. drawer: A widget that displays a navigation drawer in the scaffold. This is typically used to provide access to additional app features or settings.

5. bottomNavigationBar: A widget that displays a bottom navigation bar in the scaffold. This is typically used to provide navigation between different app screens or views.

Here are some examples of how to use the Scaffold class

Basic Scaffold

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello, world!'),
  ),
);​

In this example, we create a basic scaffold with an app bar and a centered text body.

Scaffold with a Floating Action Button

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello, world!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // Do something when the button is pressed
    },
    child: Icon(Icons.add),
  ),
);​

In this example, we add a floating action button to the scaffold. When the button is pressed, a callback function is executed.

Scaffold with a Drawer

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello, world!'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('Drawer Header'),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            // Do something when item 1 is tapped
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // Do something when item 2 is tapped
          },
        ),
      ],
    ),
  ),
);​

In this example, we add a navigation drawer to the scaffold. The drawer includes a header and two list tiles that execute callbacks when tapped.

These are just a few examples of how to use the Scaffold class in Flutter. By combining the properties and widgets within the Scaffold class, developers can create complex and feature-rich UIs for their apps.