App Bar Flutter With Customization

This article explains you how to customize app bar in flutter applications. App Bar is a widget which contains toolbar in flutter applications.

App Bar displays different widgets such as title, leading, actions etc. We can also set bottom property to display tabs in app bar in flutter applications.

title is main widget in app bar. We need to give text widget to this title parameter. leading is a widget which is displayed before the title. actions widgets are displayed after title widget. We can perform operations using these actions widgets.

App Bar is displayed at the top of the screen. It is auto fixed height widget. We can display app bar widget using appBar property of scaffold widget.

 

App Bar Flutter Customization

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘AppBar Sample’)),
body: SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.red,
    child: Text(“Simple”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => MySimpleAppBar()));
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.deepPurple,
    child: Text(“Center Title”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarCenterTitle()));
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.amberAccent,
    child: Text(“BG Color”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarBGColor()));
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.blue,
    child: Text(“Actions”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => MyAppBarActions()));
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.green,
    child: Text(“Leading”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarLeading()));
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.pink,
    child: Text(“Brightness”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => MyAppBarBrightness()));
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.deepOrange,
    child: Text(“Elevation”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => MyAppBarElevation()));
    },
),

SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.teal,
    child: Text(“Shape”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => MyAppBarShape()));
    },
),
SizedBox(
    height: 15,
),
],
),
),
),
);
}
}

 
 
 

Simple App Bar Flutter

AppBar widget is part of Scaffold widget. To create app bar, we have to integrate it in Scaffold widget. We can implement app bar as below.

Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
    ),
);
 
app bar flutter
 
 

Center Title

Normally title is displayed on left side in app bar. To align title to center, we need to use centerTitle property of appBar widget.

 Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        centerTitle: true,
    ),
);
 
 
 

Change Background Color

We can also change background color of app bar widget. We need to just give value of Colors class.

Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        backgroundColor: Colors.pinkAccent,
    ),
);
 
app bar flutter
 
 

App Bar Flutter With Actions

We can perform some actions in flutter using actions widget in app bar. If we want to display more items then we can display more icon in actions widget to open menu.

Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        actions: <Widget>[
            Icon(Icons.search),
            SizedBox(width: 15),
            Icon(Icons.more_vert),
        ],
    ),
);
 
 
 

Leading in App Bar Flutter

We can create menu in app bar using leading widget. It is displayed before the title of the app bar. We can display in flutter applications as below.

Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        leading: Icon(Icons.menu),
    ),
);
 
app bar flutter
 
 

Change Brightness

Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        brightness: Brightness.dark,
    ),
);
 
 
 

Change Elevation

Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        elevation: 50,
    ),
);
 
 
 

Change Shape of App Bar Flutter

SafeArea(
child: Scaffold(
    appBar: AppBar(
        title: Text(‘CodingWithDhrumil’),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
    ),
));
 
 
 

Leave a Reply