Flutter -AppBar

The AppBar consists  of a toobar and other widget.
Toolbar consists leading, title and action……Please refer to the Material webpage and Flutter Webpage

AppBar 有標題，導航與動作等幾個部份構成，可參考 Material 網頁 或 Flutter 網頁

程式碼如下：

import 'package:flutter/material.dart';
import './home.dart'; 
void main() => runApp(MyApp());




class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,    // Turns off a little "DEBUG" banner 
      title:'Starter Template',
      theme:ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(                                //1
        leading: IconButton(                          // 2
          icon: Icon(Icons.menu),
          onPressed: (){},
        ),
        title: Text('Home'),                            //3
        actions: [
          IconButton(
            icon:Icon(Icons.search),              // 4
            onPressed: (){},
          ),
          IconButton(
            icon:Icon(Icons.more_vert),        //5
            onPressed: (){},
          )
        ],
      ),




      )
    );
  }
}

1. Create an AppBar
2. Add a menu icon to the leading space
3. Add a text “Home” to the title
4. Add a search icon to the action
5. Add a more_vert icon to the action

1. 產生一個 AppBar 的 Widget
2. 在 AppBar 中 leading 的部份放置一個 menu 的 icon
3. 在 title 的地方放入 “Home” 的文字
4. 在 action 的部份放上 search 的 icon
5. 在 action 的部份放上 more_vert 的 icon
   

程式執行後就可以看到下圖

參考書籍 Beginning Flutter