Scaffold in Flutter

Scaffold is core part to create an application screen of each page or a building block used to create the basic structure and layout of a mobile application screen. The Scaffold widget contain an app bar, a body, and other optional components such as bottom navigator. Here’s a component within a Scaffold.

App Bar

The AppBar is a material design widget that represents the top content of mobile application. It often contains the app’s title, leading and trailing actions( button on right).

appBar: AppBar(
     title: Text('My Flutter App'),
     actions: [
//You can add multiple button or options in app bar, here in this there is single icon i.e setting
       IconButton(
         icon: Icon(Icons.settings),
         onPressed: () {
           // Handle settings button press
         },
       ),
     ],
   )

body

The body contain main content of the screen. It can be any widget or a combination of widgets, such as Container, Column, ListView, or other custom widgets.

 body: Center(
     child: Text('Hello, RT!'),
   ),

floatingActionButton

The floatingActionButton property allows you to add a floating action button (FAB) to the screen, which you can move anywhere through Alignment

 floatingActionButton: FloatingActionButton(
     onPressed: () {
       //Inside this you can add own logic
     },
     child: Icon(Icons.add),
   ),

bottomNavigationBar

The bottomNavigationBar property is used to add a bottom navigation bar , which is used for navigation , buttons, label of the application name

 bottomNavigationBar: BottomNavigationBar(
//Here there are two item , you can add multiple items 
     items: [
       BottomNavigationBarItem(
         icon: Icon(Icons.home),
         label: 'Home',
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.search),
         label: 'Search',
       ),
       // Additional items...
     ],
     // 
   ),

drawer

The drawer typically contains navigation options or settings accessible , opening from the left side of the screen.

 drawer: Drawer(
     child: ListView(
       children: [
         ListTile(
           leading: Icon(Icons.home),
           title: Text('Home'),
           onTap: () {
             // here you can add navigation and open specific page
           },
         ),
         // Additional drawer items...
       ],
     ),
   ),

Full Code of Scaffold

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Flutter App'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Handle FAB press
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}