Site icon George的生活點滴

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{
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,    // Turns off a little "DEBUG" banner 
      title:'Starter Template',
      home: Scaffold(
        appBar: AppBar(                                //1
        leading: IconButton(                          // 2
          icon: Icon(,
          onPressed: (){},
        title: Text('Home'),                            //3
        actions: [
            icon:Icon(,              // 4
            onPressed: (){},
            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

Exit mobile version