What is an App Bar?
An app bar is the top portion of an application. The App bar has one main function and two other supplementary functions. The main function is to display the application’s name or the current screen the user is viewing. The two supplementary functions are:
How to Implement an App bar and Action buttons using Flutter
The Scaffold widget in Flutter has a parameter called appBar, which takes the AppBar Widget as the parameter. After doing this step and preforming a hot reload or hot restart you will see an app bar show up. Now the app bar has various configuration options. One can change the background color, change the elevation change the title to name a few. To create the action buttons, there is a parameter for that as well. The actions’s parameter takes a list of widgets, majority of the time is something called as IconButton as the name suggest’s it’s an Icon that acts like a button. Now if you have played around with the Instagram’s app bar and you click the add post button, then a drop down occurs. To implement this in Flutter we will make use of the PopupMenuButton widget. The complete code for this can be found below with the link to the dart pad.
Code
Link to dart pad: https://dartpad.dev/?id=5200f33ab891f82f2bcd7236b6864dd2
1/*
2 * This DartPad show's how to create an Instagram app bar.
3 * This DartPad was created as part of a series that I started
4 * called as Decoding UI. You can catch the series on my
5 * youtube channel: https://bit.ly/srivats-yt
6 */
7
8import 'package:flutter/material.dart';
9
10void main() {
11 runApp(MyApp());
12}
13
14class MyApp extends StatelessWidget {
15
16 Widget build(BuildContext context) {
17 return MaterialApp(
18 debugShowCheckedModeBanner: false,
19 theme: ThemeData.dark(),
20 home: MyWidget(),
21 );
22 }
23}
24
25class MyWidget extends StatelessWidget {
26
27 Widget build(BuildContext context) {
28 return SafeArea(
29 child: Scaffold(
30 appBar: AppBar(
31 centerTitle: false,
32 backgroundColor: Colors.black,
33 title: const Text("Instagram"),
34 actions: [
35 PopupMenuButton<Widget>(
36 itemBuilder: (BuildContext context) => <PopupMenuEntry<Widget>>[
37 const PopupMenuItem<Widget>(
38 value: Text("Hello"),
39 child: ListTile(
40 title: Text("Post"),
41 trailing: Icon(Icons.grid_on_outlined),
42 ),
43 ),
44 const PopupMenuItem<Widget>(
45 value: Text("Hello"),
46 child: ListTile(
47 title: Text("Story"),
48 trailing: Icon(Icons.add_circle_outline_outlined),
49 ),
50 ),
51 const PopupMenuItem<Widget>(
52 value: Text("Hello"),
53 child: ListTile(
54 title: Text("Reel"),
55 trailing: Icon(Icons.smart_display_outlined),
56 ),
57 ),
58 const PopupMenuItem<Widget>(
59 value: Text("Hello"),
60 child: ListTile(
61 title: Text("Live"),
62 trailing: Icon(Icons.sensors_outlined),
63 ),
64 ),
65 ],
66 child: const Icon(Icons.add_box_outlined),
67 tooltip: "",
68 ),
69 IconButton(
70 onPressed: () {},
71 icon: const Icon(Icons.favorite_border_outlined),
72 ),
73 IconButton(
74 onPressed: () {},
75 icon: const Icon(Icons.send_outlined),
76 ),
77 ],
78 ),
79 ),
80 );
81 }
82}Here is the video for this tutorial:
I hope you enjoyed this tutorial, stay tuned for more like this.
Feel free to share this tutorial with others and do subscribe to my channel for more content.