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 網頁

圖片擷取至https://material.io/components/app-bars-top/#anatomy

程式碼如下:

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

發表迴響