Flutter AppBar (Cheat Sheet)
Flutter AppBar is a material design widget in Flutter that gives the application a visual structure. It is a type of toolbar that is used to provide a consistent user interface across different screens. It typically includes a title, navigation buttons, and other interactive elements. AppBar can be customized with different colors, elevations, and shapes. It can also include a bottom area for adding tabs, drawers, and other interactive elements.
AppBar Widget
appBar: AppBar()
![Flutter AppBar](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-10.06.36-AM-1024x138.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(),
body: Container(),
),
);
}
}
AppBar Title
title:Text("My APP")
![Flutter AppBar Title](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-10.14.13-AM-1024x93.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title:Text("My APP")
),
body: Container(),
),
);
}
}
AppBar Elevation
elevation:20
![](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-10.20.53-AM-1024x151.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
elevation:20,
title:Text("My APP")
),
body: Container(),
),
);
}
}
AppBar BackgroundColor
backgroundColor: Colors.blueGrey
![Flutter Appbar Background](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-10.32.34-AM-1024x118.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
elevation:20,
backgroundColor: Colors.blueGrey,
title:Text("My APP")
),
body: Container(),
),
);
}
}
AppBar Leading
leading: IconButton(
icon: Icon(Icons.menu_rounded),
onPressed: (){},
),
![](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-10.40.44-AM-1024x107.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
elevation:20,
backgroundColor: Colors.blueGrey,
title:Text("My APP"),
leading: IconButton(
icon: Icon(Icons.menu_rounded),
onPressed: (){},
),
),
body: Container(),
),
);
}
}
AppBar Actions
actions:[ ]
![](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-10.56.39-AM-1024x101.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: const Icon(Icons.comment),
tooltip: 'Comment Icon',
onPressed: () {},
), //IconButton
IconButton(
icon: const Icon(Icons.settings),
tooltip: 'Setting Icon',
onPressed: () {},
), //IconButton
],
elevation: 20,
backgroundColor: Colors.blueGrey,
title: Text("My APP"),
leading: IconButton(
icon: Icon(Icons.menu_rounded),
onPressed: () {},
),
),
body: Container(),
),
);
}
}
AppBar centerTitle
centerTitle: true,
![](https://codesearchonline.com/wp-content/uploads/2022/12/Screenshot-2022-12-04-at-11.08.34-AM-1024x100.png)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
actions: [
IconButton(
icon: const Icon(Icons.comment),
tooltip: 'Comment Icon',
onPressed: () {},
), //IconButton
IconButton(
icon: const Icon(Icons.settings),
tooltip: 'Setting Icon',
onPressed: () {},
), //IconButton
],
elevation: 20,
backgroundColor: Colors.blueGrey,
title: Text("My APP"),
leading: IconButton(
icon: Icon(Icons.menu_rounded),
onPressed: () {},
),
),
body: Container(),
),
);
}
}
0 Comments