On Android toolbars represent AppBar. Certainly, it’s another Material design widget that we’ve discussed earlier.
To use AppBar we firstly need another widget – Scaffold.
As we’ve just learned, AppBar consists of many toolbars.
Therefore, we can use our AppBar in many ways. We can navigate to another page, we can use search icon to search our app, and many more.
We’ll see that in a minute.
Before that, to see more Material design widgets in one place, let’s organize our code. Let’s create a folder “controllers” and “views”.
In “controllers” we create our AppBar widget. In addition, we can visit the full code snippet in this GitHub repository.
import 'package:flutter/material.dart';
import 'package:flutter_artisan/views/app_bar_home.dart';
class AppBarWidget extends StatelessWidget {
const AppBarWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const AppBarHome();
}
}And inside we have an AppBar home page, which will display all the AppBar tools.
import 'package:flutter/material.dart';
import 'package:flutter_artisan/views/app_bar_next.dart';
class AppBarHome extends StatelessWidget {
const AppBarHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar Example'),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('A SnackBar'),
),
);
},
),
IconButton(
icon: const Icon(Icons.search_outlined),
tooltip: 'Search',
onPressed: () {
// our code
},
),
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Next page',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return const AppBarNext();
},
),
);
},
),
],
),
body: const Center(
child: Text(
'This is the AppBar Example home page',
style: TextStyle(fontSize: 30),
textAlign: TextAlign.center,
),
),
);
}
}
Before explaining the code, let’s take a look at how our AppBar home page looks like.
As we’ve learned earlier, an app bar, resting on the top of our flutter app, consists of a toolbar and potentially other widgets.
That may include TabBar and a FlexibleSpaceBar, which we’ll discuss later.
The most important role of AppBar is it expose one or more common actions with IconButtons.
In our case, we can see one bell icon, search icon and navigate icon.
They all have one common named parameter – onTap method. With the help of that method, we can even change the state of the flutter app.
That’s why, the nearest ancestor of AppBar widget is StatefulWidget.
Flutter places AppBar as a fixed height widget at the top of the screen. It happens because App bars are typically used in the Scaffold.appBar property.
We can even add scrollable AppBar. However, that’s a different topic. For a scrollable app bar, we use SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.
Usually, any AppBar displays the toolbar widgets, such as leading, title, and actions.
In the above code, we’ve used actions to display our icons.
appBar: AppBar(
title: const Text('AppBar Example'),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('A SnackBar'),
),
);
},
),
...Where do I put AppBar in flutter?
The advantage we enjoy in Flutter is that it allows us to create menu, search, or leading button in app bar.
With a single AppBar property, we can create several functionalities in our Flutter app.
If we click the bell icon button, it opens up the snack bar.
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('A SnackBar'),
),
);
},
),
...In a separate article we’ll discuss the role of SnackBar widget.
As a result we can see that snack bar pops up at the bottom of our app.
Inside our SnackBar, we can place many more widgets.
Subsequently, we can navigate to another page from AppBar.
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Next page',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) {
return const AppBarNext();
},
),
);
},
),
...We have placed the custom stateless AppBarNext widget inside our views folder. Let’s take a look at the code first.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class AppBarNext extends StatelessWidget {
const AppBarNext({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('App Bar Next Page'),
),
body: const AppBarNextPage(),
);
}
}
class AppBarNextPage extends StatelessWidget {
const AppBarNextPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(
10,
),
padding: const EdgeInsets.all(
10,
),
child: const Text(
'AppBar Next Page',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
),
),
),
);
}
}Most importantly, we can use another AppBar, because it’s another page. And, of course, we can add other functionalities in this AppBar.
As a result, for this page we’ve used another AppBar.
How do I style AppBar flutter?
Remember, every page may have different AppBar in Flutter. Therefore, to style AppBar we can use different approaches.
In the above code snippets we’ve restricted ourselves to certain features only.
But any AppBar comes with many functionalities that include background color, text font, leading, and many more.
We can change the alignment or position of the title in our AppBar.
In the above code snippet, we’ve kept it on the left side. However, if we feel, we change its position and move it either to the center or right.
In actions widget, we can add more icons with different functionalities.
That includes a pop up menu.
It depends on what type of Flutter app we’re going to build.
In this Material design series we’ll discuss more useful widgets, so please stay tuned.
Leave a Reply