Flutter AppBar (Cheat Sheet)

Published by Abhay Rastogi on


Flutter AppBar is a material design widget in Flutter that gives the application a visual structure. It is a type of toolbar that is used to provide a consistent user interface across different screens. It typically includes a title, navigation buttons, and other interactive elements. AppBar can be customized with different colors, elevations, and shapes. It can also include a bottom area for adding tabs, drawers, and other interactive elements.

AppBar Widget

appBar: AppBar()
Flutter AppBar
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
      ),
    );
  }
}

AppBar Title

title:Text("My APP")
Flutter AppBar Title
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title:Text("My APP")
        ),
        body: Container(),
      ),
    );
  }
}

AppBar Elevation

elevation:20
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          elevation:20,
          title:Text("My APP")
        ),
        body: Container(),
      ),
    );
  }
}

AppBar BackgroundColor

backgroundColor: Colors.blueGrey
Flutter Appbar Background
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          elevation:20,
          backgroundColor: Colors.blueGrey,
          title:Text("My APP")
        ),
        body: Container(),
      ),
    );
  }
}

AppBar Leading

leading: IconButton(
          icon: Icon(Icons.menu_rounded),
          onPressed: (){},
         ),
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          elevation:20,
          backgroundColor: Colors.blueGrey,
          title:Text("My APP"),
           leading: IconButton(
             icon: Icon(Icons.menu_rounded),
             onPressed: (){},
           ),
        ),
        body: Container(),
      ),
    );
  }
}

AppBar Actions

actions:[ ]
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
              icon: const Icon(Icons.comment),
              tooltip: 'Comment Icon',
              onPressed: () {},
            ), //IconButton
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Setting Icon',
              onPressed: () {},
            ), //IconButton
          ],
          elevation: 20,
          backgroundColor: Colors.blueGrey,
          title: Text("My APP"),
          leading: IconButton(
            icon: Icon(Icons.menu_rounded),
            onPressed: () {},
          ),
        ),
        body: Container(),
      ),
    );
  }
}

AppBar centerTitle

centerTitle: true,
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          actions: [
            IconButton(
              icon: const Icon(Icons.comment),
              tooltip: 'Comment Icon',
              onPressed: () {},
            ), //IconButton
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Setting Icon',
              onPressed: () {},
            ), //IconButton
          ],
          elevation: 20,
          backgroundColor: Colors.blueGrey,
          title: Text("My APP"),
          leading: IconButton(
            icon: Icon(Icons.menu_rounded),
            onPressed: () {},
          ),
          
        ),
        body: Container(),
      ),
    );
  }
}


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.