Flutter, AppBar control

Flutter control exercise demo address: Github

one AppBar,

1.1 Introduction to the

AppBar

• An application bar consists of toolbars or a combination of toolbars and other widgets, such as TabBar and FlexibleSpaceBar.
• The application bar is typically used in the Scaffold. AppBar property, which places the application bar in a fixed height widget at the top of the screen;
• For scrollable application bars, see SliverAppBar, which emplaces the AppBar in a Sliver for use in a CustomScrollView; “” “

1.2 Basic usage

AppBar main properties:

• Leading: If leading is omitted but the AppBar is in a Scaffold with a Drawer, a button is inserted to open the Drawer. If there is no the Drawer, the default is a return arrow, you can set to close automaticallyImplyLeading to false,
• AutomaticallyImplyLeading = true: if there are leading this won’t work; If there is no leading, false: does not display the default image when there is a sidebar. True displays the default image and responds to an event that opens the sidebar
• Title: the title
• Actions, the icon on the right, usually an icon or text
• FlexibleSpace, an item on the title, is generally useless
• Bottom, it’s usually tabbar, it can be something else
• Elevation, the z-axis height, the shadow is 1 by default and the default is the height of the shadow
• The backgroundColor of the navigation bar is the default ThemeData color
• The depth of the status bar is white and black
• iconTheme,
• CenterTitle, whether the title is centered
• TitleSpacing flexibleSpace and Title distance overlap by default
• NavigationToolbar.kMiddleSpacing,
• ToolbarOpacity = 1.0 Opacity of the navigation bar
• BottomOpacity = 1.0 Bottom opacity

1.3 The picture

1.4 demo

import 'package:flutter/material.dart';

class AppBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return AppBarForTabBarDemo();
  }
}

class AppBarForTabBarDemo extends State with SingleTickerProviderStateMixin {
  final List<Tab> _tabs = <Tab>[
    new Tab(text: 'attention'),
    new Tab(text: 'push press'),
    new Tab(text: 'video'),
    new Tab(text: 'games'),
    new Tab(text: 'music'),
    new Tab(text: 'sports'),
    new Tab(text: 'life'),
    new Tab(text: 'images')]; var _tabController; @override voidinitState() {
    _tabController = TabController(vsync: this, length: _tabs.length);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      drawer: _drawer(context),
      body: new TabBarView(
        controller: _tabController,
        children: _tabs.map((Tab tab) {
          returnnew Center(child: new Text(tab.text)); }).toList(), ), appBar: AppBar( leading: Icon (the Icons. The home), / / if not set, the second page is the default is to return arrow, have the sidebar page default Icon (used to open the sidebar) automaticallyImplyLeading:true// This would not work if there was leading; If we don't have Leading, when we have the sidebar,false: Will not display the default image,trueWill display the default image and respond to the opening sidebar event title: Text("Title"),
        centerTitle: trueActions: <Widget>[IconButton(icon: icon (icon.save)), tooltip:'Add Alarm', onPressed: () {// not onPressed, by default, the image is unclickable and has a non-clickable style (which is different from writing this) // If onPressed but null is pressed, it is also unclickable}), IconButton(icon: Icon(Icons.add_alarm), tooltip:'Add Alarm',
              onPressed: () {
                // do nothing
              })
        ],
        bottom: TabBar(
          isScrollable: true, labelColor: Colors. RedAccent, / / the selected Widget color indicatorColor: Colors. RedAccent, / / the selected indicator color labelStyle: New TextStyle(fontSize: 15.0),// must be set, setting color is not useful, because labelColor is already set to unselectedLabelColor: Colors.white, unselectedLabelStyle: new TextStyle( fontSize: 15.0), // Setting the color is useless because unselectedLabelColor is already set to controller: _tabController, / / tabbar must set up the controller or an error indicatorSize: TabBarIndicatorSize. Label, / / a TAB and label two tabs: _tabs,), // elevation: 0.1, // the Z axis of the navigation bar defaults to 1 // flexibleSpace: FlexibleSpaceBar(title: Text())"You"Appbar is not used on the SliverAppBar. // The depth of the status bar is white and black // titleSpacing: // The opacity of the navigation bar is set to 1 by default, without adding flexibleSpace // bottomOpacity: 0.5,),); } } Drawer _drawer(BuildContext context) {returnDrawer( child: ListView( padding: EdgeInsets.zero, children: <Widget>[ DrawerHeader( decoration: BoxDecoration( color: LightBlueAccent,), Child: Center(Child: SizedBox(Width: 60.0, height: 60.0, Child: CircleAvatar(Child: Text(width: 60.0, height: 60.0, Child: CircleAvatar)'avatar'),
              ),
            ),
          ),
        ),
        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); },),],); }Copy the code