[shutter -- basic component] use of AppBar

One 、 brief introduction

AppBar Displayed in the app At the top of the , Or say Top bar , Corresponding Android Of Toolbar.

• Basic composition
  

Two 、 attribute

• leading： If you omit leading , but AppBar With Drawer Of Scaffold in , Then a button To open Drawer. without Drawer , The default is a return arrow , You can turn it off by setting automaticallyImplyLeading by false ,
• automaticallyImplyLeading = true： If there is leading This won't work ; without leading , When there is a sidebar , false： The default picture will not be displayed ,true Will be displayed The default image , And respond to the event of opening the sidebar
• title: title
• actions, Dexter icon, In general icon Or words
• flexibleSpace, stay title Something on it , Generally useless
• bottom, It is commonly tabbar , It could be something else
• elevation, Z Shaft height , That is, the shadow The default is 1 The default is height Shadowy
• backgroundColor, The color of the navigation bar The default is ThemeData The color of the
• brightness, The depth of the status bar There are two themes: white and black
• iconTheme,
• centerTitle, title Is it in the middle?
• titleSpacing flexibleSpace and title Distance of Coincident by default
• NavigationToolbar.kMiddleSpacing,
• toolbarOpacity = 1.0 Transparency of the navigation bar
• bottomOpacity = 1.0 bottom Transparency

3、 ... and 、 example

1. design sketch

2. Complete code

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
          body: Center(
            child: AppBarStatefulWidget(),
          )
      )

    );
  }
}

class AppBarStatefulWidget extends StatefulWidget {
    
  const AppBarStatefulWidget({
    Key? key}) : super(key: key);

  @override
  _AppBarStatefulWidget createState() => _AppBarStatefulWidget();
}

class _AppBarStatefulWidget extends State with SingleTickerProviderStateMixin {
    
  final List<Tab> _tabs = <Tab>[
    new Tab(text: ' Focus on '),
    new Tab(text: ' Push and press '),
    new Tab(text: ' video '),
    new Tab(text: ' game '),
    new Tab(text: ' music '),
    new Tab(text: ' sports '),
    new Tab(text: ' life '),
    new Tab(text: ' picture '),
  ];

  var _tabController;

  @override
  void initState() {
    
    _tabController = TabController(vsync: this, length: _tabs.length);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      drawer: _drawer(context),
      body: TabBarView(
        controller: _tabController,
        children: _tabs.map((Tab tab) {
    
          return new Center(child: Text(tab.text.toString()));
        }).toList(),
      ),
      appBar: AppBar(
        leading: Icon(Icons.home),
        //  If this item is not set ,  Secondary page   The default is the return arrow  ,  Pages with sidebars have icons by default （ Used to open the sidebar ）
        automaticallyImplyLeading: true,
        //  If there is  leading  This won't work  ;  without leading , When there is a sidebar , false： The default picture will not be displayed ,true  Will be displayed   The default image , And respond to the event of opening the sidebar 
        title: Text(" title "),
        centerTitle: true,
        //  Whether the title is centered 
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.save),
              tooltip: 'Add Alarm',
              onPressed: () {
    
                //  Don't write onPressed  Default , This picture cannot be clicked   And there will be non clickable styles （ and   I wrote this in different styles ）
                //  If there is  onPressed  But the value is null  It will also be a non clickable style 
              }),
          IconButton(
              icon: Icon(Icons.add_alarm),
              tooltip: 'Add Alarm',
              onPressed: () {
    
                // do nothing
              })
        ],
        bottom: TabBar(
          isScrollable: true,
          labelColor: Colors.redAccent,   //  Selected Widget Color 
          indicatorColor:Colors.redAccent, //  Selected indicator color 
          labelStyle: new TextStyle(fontSize: 15.0),//  You have to set , Set up  color  useless , because  labelColor  It's set up 
          unselectedLabelColor: Colors.white,
          unselectedLabelStyle: new TextStyle(
              fontSize: 15.0), //  Set up  color  useless , because unselectedLabelColor It's set up 
          controller: _tabController,
          // tabbar  You have to set  controller  Otherwise, the report will be wrong 
          indicatorSize: TabBarIndicatorSize.label,
          //  Yes  tab  and  label  Two kinds of 
          tabs: _tabs,
        ),
      ),
    );
  }
}

Drawer _drawer(BuildContext context) {
    
  return Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
          child: Center(
            child: SizedBox(
              width: 60.0,
              height: 60.0,
              child: CircleAvatar(
                child: Text(' Head portrait '),
              ),
            ),
          ),
        ),
        ListTile(
          title: Text('Item 1'),
          leading: new CircleAvatar(
            child: new Icon(Icons.school),
          ),
          onTap: () {
    
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 2'),
          leading: new CircleAvatar(
            child: new Text('B2'),
          ),
          onTap: () {
    
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 3'),
          leading: new CircleAvatar(
            child: new Icon(Icons.list),
          ),
          onTap: () {
    
            Navigator.pop(context);
          },
        ),
      ],
    ),
  );
}