How to Use Scaffold and AppBar in Dart

If you’re building Flutter apps using Dart, two of the most essential widgets you need to understand are Scaffold and AppBar. These widgets form the foundation for structuring your app’s UI, providing a consistent layout with navigation capabilities.

The Scaffold widget is a top-level container that provides basic visual layout structure like app bars, drawers, floating action buttons, snack bars, and more. On the other hand, the AppBar widget sits inside the Scaffold and typically contains titles, navigation icons, and actions.

Here’s a complete example of how to implement Scaffold and AppBar in a simple Flutter app:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold & AppBar Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My First AppBar'),
        backgroundColor: Colors.blueAccent,
        actions: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              // Action when settings icon is pressed
            },
          )
        ],
      ),
      body: Center(
        child: Text(
          'Welcome to Scaffold and AppBar!',
          style: TextStyle(fontSize: 20),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Action when FAB is pressed
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blueAccent,
      ),
    );
  }
}

In the code above:

• Scaffold creates the basic page structure.
• AppBar displays a title and an action button.
• body contains the main content.
• FloatingActionButton adds an interactive button at the bottom right.

Using these widgets, you can create beautiful, responsive Flutter interfaces easily. For more in-depth documentation on Scaffold and AppBar, check out the official Flutter documentation here.