How to Create an AppBar in Flutter?

AppBar is one of the most commonly used Flutter widgets. AppBar is used to provide information and actions related to the current screen of the app. An AppBar consists of leading, title, and actions widget. The leading property is displayed before the title and is optional. The actions property is a list of widgets displayed after the title and is also an optional property.

Contents

1. How to create a simple AppBar in Flutter?

2. How to add actions to an AppBar in Flutter?

3. How to create a gradient AppBar in Flutter?

4. Interactive Example

Simple AppBar

To create a simple AppBar, you just need to add an AppBar() widget to the appBar property of a Scaffold. The code for the AppBar is shown below. The title of the AppBar can be added using the title property. It has a number of optional properties that can be used to customize the AppBar such as background color, shadow color, elevation etc.

AppBar with Actions

To create a set of actions in the AppBar, we use a property called actions in the AppBar. The actions property is a list and can contain the icon widgets. The code is shown below.

Gradient AppBar

By default, AppBar does not have the feature to add a gradient background feature. So, we use another widget called PreferredSize to achieve this effect. Here, we use a property called decoration to add a BoxDecoration widget to the PreferredSize widget. The code for the gradient background is shown below.