“This is the fourth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

📝 [Flutter] learning to form a record, [programmer essential knowledge]

📔 Basic component of Flutter [07] Appbar!

1. Write at the front

We introduced the Image component in Icon in the previous article. Today we continue learning about the Appbar component in the base of Flutter.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

[03] Scaffold

[04] Row/Column

The base component of Flutter [05] Image

Base Component [06] Icon of Flutter

2. Appbar

Similar to the navigation bar in iOS, you can set title, left and right Action,

A Material Design application bar consisting of toolbars and other possible widgets, such as TabBar and FlexibleSpaceBar.

2.1 Appbar properties

  • Leading: Action function on the left
  • Title: Title text.
  • Actions: The action function on the right can also be displayed as three dots using PopupMenuButton. After clicking, a secondary menu will pop up to realize function aggregation.
  • Bottom: Usually TabBar.
  • Elevation: The z coordinate of a control
  • FlexibleSpace: Special effects are commonly used in SliverAppBar, which CollapsingToolbarLayout in Android easily CollapsingToolbarLayout, as discussed in this component later.
  • BackgroundColor: The color of the Appbar. The change value is usually used with the following three properties.
  • Brightness: Appbar brightness, white and black two kinds of themes, the default value is ThemeData. PrimaryColorBrightness.
  • IconTheme: Appbar icon color, transparency, and size information. The default value is ThemeData primaryIconTheme.
  • TextTheme: Text style on Appbar.
  • CenterTitle: Indicates whether the title is displayed in the center. The default value varies with the OPERATING system.
  • TitleSpacing: Space between title and other controls
  • ToolbarOpacity: Opacity of the AppBar tool area
  • BottomOpacity: Opacity of the bottom area

2.2 Appbar code examples

  • Sample Appbar code
void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return constMaterialApp( home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("I am AppBar"),),); }}Copy the code
  • Running effect

2.3 Leading code example

  • Leading is equivalent to the back button
leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      Navigator.pop(context);
    }),
Copy the code

2.4 Examples of Actions code

  • Actions is the 👉 button on the right side of the navigation bar
actions: [
  IconButton(
      icon: Icon(Icons.add),
      onPressed: () {
      }),
  PopupMenuButton<String>(
    padding: EdgeInsets.all(0),
    itemBuilder: (context) => [
      PopupMenuItem<String>(
        child: Row(
          children: [
            Icon(
              Icons.person_add,
              color: Colors.black,
            ),
            Text(
              'Add a friend',
              style:
              TextStyle(fontSize: 18,),
            )
          ],
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
        ),
        value: 'person_add',
      ),
      PopupMenuItem<String>(
        child: Row(
          children: [
            Icon(Icons.camera_alt, color: Colors.black),
            Text(
              'photos',
              style:
              TextStyle(fontSize: 18,),
            )
          ],
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
        ),
        value: 'camera',
      ),
    ],
    onSelected: (value) {
      switch (value) {
        case 'person_add':
          print("Click add Friend");
          break;
        case 'camera':
          print("Click to take picture");
          break; }}),]Copy the code
  • Effect of the actions

2.5 Bottom code examples

  • Bottom is the TAB under the navigation bar, like a slider
bottom: TabBar(
    controller: _tabController,// Must be configured
    tabs: [
      Tab(text: A "page",),
      Tab(text: "Page B",),
      Tab(text: "C" page,)
    ],
  ),
),
body: TabBarView(
  // Must be configured
  controller: _tabController,
  children: [
    Center(child:Text(A "page")),
    Center(child:Text("Page B")),
    Center(child:Text("C" page)))),Copy the code
  • The complete code is as follows:

void main() {
  runApp(TabControllerStu());
}


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

  _TabControllerStuState createState() => _TabControllerStuState();
}

class _TabControllerStuState extends State<TabControllerStu> with SingleTickerProviderStateMixin{
  late TabController _tabController;


  // Called when destroyed
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  // Initialize the call
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this);
    _tabController.addListener(() {
      // Click TAB to callback once, slide to switch TAB does not callback
      if(_tabController.indexIsChanging){
        print("ysl--${_tabController.index}");
      }

      // Click TAB or swipe TAB to callback once
      if(_tabController.index.toDouble() == _tabController.animation! .value){print("ysl${_tabController.index}"); }}); }@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: () {
                  Navigator.pop(context);
                }),
            title: Text("WeChat"),
            actions: [
              IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                  }),
              PopupMenuButton<String>(
                padding: EdgeInsets.all(0),
                itemBuilder: (context) => [
                  PopupMenuItem<String>(
                    child: Row(
                      children: [
                        Icon(
                          Icons.person_add,
                          color: Colors.black,
                        ),
                        Text(
                          'Add a friend',
                          style:
                          TextStyle(fontSize: 18,),
                        )
                      ],
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                    ),
                    value: 'person_add',
                  ),
                  PopupMenuItem<String>(
                    child: Row(
                      children: [
                        Icon(Icons.camera_alt, color: Colors.black),
                        Text(
                          'photos',
                          style:
                          TextStyle(fontSize: 18,),
                        )
                      ],
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                    ),
                    value: 'camera',
                  ),
                ],
                onSelected: (value) {
                  switch (value) {
                    case 'person_add':
                      print("Click add Friend");
                      break;
                    case 'camera':
                      print("Click to take picture");
                      break;
                  }
                },
              ),
            ],

            bottom: TabBar(
              controller: _tabController,// Must be configured
              tabs: [
                Tab(text: A "page",),
                Tab(text: "Page B",),
                Tab(text: "C" page,)
              ],
            ),
          ),
          body: TabBarView(
            // Must be configured
            controller: _tabController,
            children: [
              Center(child:Text(A "page")),
              Center(child:Text("Page B")),
              Center(child:Text("C" page))))); }}Copy the code
  • Running effect

3. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹