We’ve been discussing layout and designs in Flutter, and we’ve learned a couple of design principles so far. AppBar is an integral part of Material Design, and Flutter layout. Although we had a gentle introduction to this topic, still we feel something more we should learn regarding AppBar.
On Android, as an integral part of material design principles, toolbars represent AppBar.
To use AppBar we firstly need another widget – Scaffold.
Now once included, the AppBar widget consists of many toolbars. As a result, 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 those features in a minute.
Consisting of a toolbar and other widgets as well, an AppBar always rests on the top of the Flutter application. Since, it rests on the top, we must make it look great. Moreover, we need to add as many functionalities as possible.
That may include TabBar and a FlexibleSpaceBar, which we’re going to discuss in a moment.
The most important role of AppBar is it exposes one or more common actions with IconButtons.
How does it look like? Let’s take a look at the screenshot below.
The AppBar, displayed above, shows us many things.
Firstly, we’ve used a color gradient as its background, that matches with our Application’s background color combination.
Secondly, with the help of toolbars, and actions, and IconButtons we’ve been able to add more functionalities.
What is the use of AppBar?
Let’s take a look at the code first. And after that, we can discuss the code and try to understand how an AppBar may affect our whole Flutter application’s design and layout.
In our model folder we have defined a CustomPaint object that decides how our flutter application will exactly look like.
import 'package:flutter/material.dart';
class ShapingPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
/// setting the paint color greyish
/// so it could cover the lower half of the screen
///
paint.color = Colors.black12;
/// Creating a rectangle with size and width same as the canvas
/// It'll be going to cover the whole screen
///
var rect = Rect.fromLTWH(0, 0, size.width, size.height);
/// Drawing the rectangle using the paint
///
canvas.drawRect(rect, paint);
/// Covering the upper half of the rectangle
///
paint.color = Colors.purpleAccent;
// Firstly, creating a path to form the shape
var path = Path();
path.lineTo(0, size.height);
path.lineTo(size.width, 0);
// Secondly, closing the path to form a bounded shape
path.close();
canvas.drawPath(path, paint);
// Setting the color property of the paint
paint.color = Colors.white;
// Center of the canvas is (x,y) => (width/2, height/2)
var center = Offset(size.width / 2, size.height / 2);
// Finally, drawing the circle with center having radius 95.0
canvas.drawCircle(center, 95.0, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}Next, comes the root app.
import 'package:flutter/material.dart';
import 'view/my_app.dart';
void main() => runApp(const MyApp());The My App widget calls a Dash Board Home page.
import 'package:flutter/material.dart';
import 'dash_board_home.dart';
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'A Custom Home Page',
/// ignore: todo
///TODO: we'll make a custom global theme later
///
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DashBoardHome(),
);
}
}In the Dash Board Home screen we’ve defined our AppBar with all functionalities.
import 'dart:html';
import 'package:flutter/material.dart';
import '/model/shaping_painter.dart';
import 'all_containers.dart';
class DashBoardHome extends StatelessWidget {
const DashBoardHome({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
//backgroundColor: Colors.grey[400],
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.pink,
Colors.grey,
],
begin: Alignment.topRight,
end: Alignment.bottomRight,
),
),
),
elevation: 20,
leading: const Icon(Icons.menu),
title: const Text(
'Let\'s Go!',
textAlign: TextAlign.center,
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.ac_unit),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.notification_add,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.search,
),
),
],
bottom: TabBar(
tabs: [
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.home,
),
),
text: 'Home',
),
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.account_box,
),
),
text: 'Log in',
),
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.security,
),
),
text: 'Account',
),
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.settings,
),
),
text: 'Settings',
),
],
),
),
body: Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.all(5),
child: CustomPaint(
painter: ShapingPainter(),
child: Container(
height: size.height / 1,
),
),
),
ListView(
children: const [
FirstContainer(),
SecondContainer(),
ThirdContainer()
],
),
],
),
),
);
}
}Before we’ve implied these functionalities in our AppBar, let us see the old AppBar first. So that we can understand how did these changes affect our AppBar as a whole.
Before the change, it looked like the above screenshot.
Now, how did we apply the change?
How do I add icons to AppBar?
It all started with Default Tab Controller widget that we’ve used to wrap our Scaffold whose child is AppBar.
return DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
...Next we’ve defined the length of the list of the tabs that we’re going to use.
It is 4, so we can use four tabs at the bottom.
bottom: TabBar(
tabs: [
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.home,
),
),
text: 'Home',
),
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.account_box,
),
),
text: 'Log in',
),
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.security,
),
),
text: 'Account',
),
Tab(
icon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.settings,
),
),
text: 'Settings',
),
],
),
),
...However, any AppBar displays the toolbar widgets, such as leading, title, and actions. Therefore, we’ve used them as well.
elevation: 20,
leading: const Icon(Icons.menu),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.ac_unit),
),
...Elevation parameter refers to the shadow at the bottom of our AppBar. We could have made it thinner or thicker.
The leading property decides which Widget will be placed at the very beginning of the AppBar. We’ve used a menu Icon Widget. We usually keep this place to use for a Drawer widget. For full code please visit the related GitHub repository.
We can even add scrollable AppBar. However, that’s a different topic.
In the coming section we’ll discuss that. We’ll also discuss a special AppBar for scrolling widgets.
For a scrollable app bar, we use SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.
We’ll also discuss SliverAppBar in the coming sections.
So stay tuned and happy fluttering till we meet again.
Leave a Reply