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()
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")
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
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
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: (){},
),
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:[ ]
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,
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