AppBar properties
  • Title: Text(“appBar”), // title
  • Leading: Icon(Icons. Add_a_photo), //
  • Multiple ICONS to the right of actions
  • FlexibleSpace Navigation bar + Title bar overall area
  • Bottom: // Navigation bar bottom area
  • Elevation: 20, // Bottom shadow
  • Shape Background shape, including navigation bar + Bottom bar + title bar
  • BackgroundColor: Colors. Red [200], // backgroundColor
  • Brightness: Brightness. Light, // Brightness theme: When dark, the icon of the title is white; On light, the title bar ICONS are black
  • IconTheme // Unified Settings for all ICONS, including color, transparency, and size. Includes ICONS for the Actions section, but will be overridden by the actionsIconTheme
  • ActionsIconTheme: Set the theme for the icon in the Actions section.
  • CenterTitle: true, // Whether the title is centered
  • titleSpacing: 20,
  • Opacity: 0.9, // All icon actions in the navigation bar, etc
  • BottomOpacity: 0.5, // The opacity of the Icon child in the bottom area under the navigation bar

The navigation widget for Flutter contains many elements, as shown below:

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( AppBar: appBar (title: Text("appBar"), // leading: Icon(Icons. Add_a_photo), // leading: Icon(Icons. <Widget>[ Icon(Icons.add_alarm), Center( child: Text('action'),), Icon(Icons. Add_alarm),], flexibleSpace: Center(child: Text("flexibleSpace"),), // flexibleSpace: Text("flexibleSpace"), // flexibleSpace: Container( // color: Color.green, //), // Top: PreferredSize(child: ConstrainedBox(constraints: BoxConstraints.tightFor(height: 50), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Icon(Icons.cached), Icon(Icons.dashboard), Icon(Icons.flag) ], ), ), preferredSize: Size(200, 30)), elevation: 20, // Bottom shadow // Background shape, including navigation bar + Bottom + title bar Shape: Round RectangleBorder(borderRadius: BorderRadius. Circular (20)), backgroundColor: Colors. Red [200], // backgroundColor brightness: Brightness. Light, // Brightness theme: When dark, the icon of the title is white; On light, the title bar ICONS are black // Uniform Settings for all ICONS, including color, transparency and size. Including the actions section icon, but will be covered by actionsIconTheme iconTheme: IconThemeData (color: Colors. Blue, opacity: 0.5, size: 30), // Set the theme for the icon in the Actions section. ActionsIconTheme: IconThemeData(color: Colors. Green, opacity: 0.5, size: 30), textTheme: textTheme (title: TextStyle(backgroundColor: Colors. Red, fontSize: 15), centerTitle: true, // titleSpacing: BottomOpacity: 0.5, // The opacity of the icon child in the bottom area of the navigation bar),); }}Copy the code