One of the most important structural parts of our app, be it an iOS or Android app is the AppBar. In some frameworks this may be known as the toolbar. This is header part of our application and typically renders the following:
- Title of the app
- Subtitle of the app
- Menus
In these examples we will look at how to work with AppBar in Flutter.
Example 1: Simple AppBar
A simple AppBar Example in Flutter.
Step 1: Create Flutter Project
Start by creating your flutter project.
Step 2: Dependencies
This project does not rely on any third party dependency.
Step 3: Write Code
AppBar is contained in the material package, thus we start by importing that package:
import 'package:flutter/material.dart';Now create a class known as SimpleAppBar that extends the StatelessWidget:
class SimpleAppBar extends StatelessWidget {
In this class prepare two instance fields: the title as well as the appbar height:
final String title;
final double barHeight = 56.0;The title will be received via the constructor:
SimpleAppBar(this.title);Now proceed to build the whole widget. Here is the full code:
import 'package:flutter/material.dart';
class SimpleAppBar extends StatelessWidget {
final String title;
final double barHeight = 56.0;
SimpleAppBar(this.title);
@override
Widget build(BuildContext context) {
final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Container(
padding: EdgeInsets.only(top: statusBarHeight),
height: barHeight + statusBarHeight,
decoration: BoxDecoration(
color: Colors.white,
border:
Border(bottom: BorderSide(width: 1.0, color: Colors.black12))),
child: Center(
child: Text(
title,
style: TextStyle(
color: Colors.black54,
fontFamily: 'Manrope',
fontWeight: FontWeight.w500,
fontSize: 26.0),
),
),
);
}
}Example 2: AppBar Example
Here is the demo screenshot of this example:
This example will comprise the following files:
AppBarExample.dart
Step 1: Create Project.
- Open your favorite Flutter IDE.
- Go to
File-->New-->Projectto create a new project.
Step 2: Dependencies.
No external dependency is needed for this project.
Step 4: Write Dart Code
Write your code as follows:
*(a). AppBarExample.dart
Create a file Dart named AppBarExample.dart
Here is the full code
import 'package:flutter/material.dart';
class AppBarExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Default Appbar"),
elevation: 0.0,
),
body: ListView(
children: <Widget>[
///App bar with background color
Container(
margin: const EdgeInsets.only(top: 16.0, bottom: 16.0),
child: AppBar(
title: const Text("Title"),
backgroundColor: Colors.orange,
elevation: 4.0,
),
),
///App bar with Action items
Container(
margin: const EdgeInsets.only(bottom: 16.0),
child: AppBar(
title: const Text("Appbar actions"),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {},
),
],
),
),
///Center text
Container(
margin: const EdgeInsets.only(bottom: 16.0),
child: AppBar(
title: const Text("Center"),
centerTitle: true,
),
),
///IconTheme for the app bar
Container(
margin: const EdgeInsets.only(bottom: 16.0),
child: AppBar(
title: const Text("Appbar Icon and Text Theme"),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {},
),
],
iconTheme: const IconThemeData(
color: Colors.black,
),
textTheme: const TextTheme(
headline6: TextStyle(
color: Colors.black,
),
),
),
),
///App bar with the title and subtitle
Container(
margin: const EdgeInsets.only(bottom: 16.0),
child: AppBar(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
"Title",
style: TextStyle(fontSize: 18.0),
),
Text(
"subtitle",
style: TextStyle(fontSize: 14.0),
),
],
),
),
),
///App bar with the title and and icon/image at start
Container(
margin: const EdgeInsets.only(bottom: 16.0),
child: AppBar(
backgroundColor: Colors.orangeAccent,
title: Row(
children: const <Widget>[
FlutterLogo(),
Padding(
padding: EdgeInsets.only(left: 16.0),
child: Text(
"Title with image",
),
),
],
),
),
),
///App Bar with transparent background
Container(
margin: const EdgeInsets.only(bottom: 16.0),
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
iconTheme: const IconThemeData(color: Colors.black),
title: const Text(
"Transparent AppBar",
style: TextStyle(color: Colors.black),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
)
],
),
)
],
),
);
}
}Run
Simply copy the source code into your Flutter Project, Build and Run.