AppBar Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
AppBar Widget - Flutter Widget Guide By Flutter Agency
AppBar Widget - Flutter Widget Guide By Flutter Agency

AppBar Widget is the main widget in any Flutter app. It sits at the top of the application and mostly controls major action items. In today’s article, we will learn about how to design an AppBar in a flutter app.

What is AppBar Widget?

AppBar widget or top App Bars is a collection of widget located at the top of the app, for wrapping our app’s title, icon, and action link. 

When it comes to mobile we tend to keep the Application bar very minimal, so let proceed in creating an AppBar Widget in flutter application. So just to create AppBar Widget in flutter we have AppBar Widget and Snippet is as below.

AppBar(
  title: Text("Categories"),
),

So if we have to include this in our Application we have combined with Scaffold widget and Snippet is pasted below.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Categories"),
      ), 
    );
  }

AppBar  widget

App Bar in Flutter

Basic of AppBar can be easily understood from an image as attached below :

AppDemo

Properties of AppBar :

backgroundColor : User can set backgroundColor of AppBar using this property.

elevation: Elevation creates an elevated effect on the AppBar by giving it a shadow. To make use of this property, you will have to provide a double value, The elevation happens on the Z-axis of the AppBar.

brightness: As the name suggests, it is going to take in the value of the brightness that the AppBar is going to be in. It is preferably set along with the backgroundColor attribute we saw above. If not, then the AppBar might look odd in terms of creating good looking UI.

Now, we will add Leading and Action in setting icon in an AppBar Widget so our updated App bar widget will look like below.

appBar: AppBar(
          leading: IconButton(
            tooltip: 'Leading Icon',
            icon: const Icon(
              Icons.arrow_back,
            ),
            onPressed: () {
              // To do
            },
          ),
          title: const Text(
            'Categories',
          ),
          actions: <Widget>[
            IconButton(
              tooltip: 'Action Icon',
              icon: const Icon(
                Icons.settings,
              ),
              onPressed: () {
                // To do
              },
            ),
          ],
        ),

AppBar-With-Leading

AppBar with leading Icon and action

AppBar with Text and Icon Themes

 AppBar(
        backgroundColor: Colors.blueAccent,
        title: Text("Title"),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
        textTheme: TextTheme(
          title: TextStyle(
            color: Colors.white,
            fontSize: 20.0
          ),
        ),
      ),

In the above code, we have used an IconButton Widget as well as IconTheme.We will get below outout.

App Bar With Text

AppBar with centered Title and Subtitle

    AppBar(
        automaticallyImplyLeading: false,
        title: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Title",
                style: TextStyle(fontSize: 18.0),
              ),
              Text(
                "subtitle",
                style: TextStyle(fontSize: 14.0),
              ),
            ],
          ),
        ),
      ),

AppBar-with-title

AppBar with Title

Keep Reading !!!

 

Leave a Reply