前言

接下來這幾天我會把在通訊錄的實作中有用到的Widget和一些功能再整理、學習一下，也會對通訊錄進行一些改造！今天先來看一下一直有用到的Scaffold類別！

Scaffold

• Scaffold是Flutter中很常使用到的類別，可以用來創建一個有基本框架的畫面，裡面包含：

• 下面是實作一個Scaffold的簡單練習
  • 完整程式碼：

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatefulWidget {
      @override
      _MyApp createState() => _MyApp();
    }

    class _MyApp extends State<MyApp> {
      var _selectedIndex = 0;
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
        home:Scaffold(
          //1 appBar
          appBar: AppBar(
              title: Text('My App'),
              backgroundColor: Colors.lightBlue[300]
          ),
          //2 主要內容
          body: Center(
            child: Text('Hello, Flutter!'),
          ),
          //3 抽屜式選單
          drawer: Drawer(),
          //4 浮動操作按鈕
          floatingActionButton:FloatingActionButton.extended(
            onPressed: () {},
            label: Text('Buy'), //設置有關按鈕的標籤
            icon: Icon(Icons.shopping_bag),
            backgroundColor: Colors.pink[200],

          ),
          floatingActionButtonLocation:FloatingActionButtonLocation.startFloat, //按鈕位置
          //5 底部導航欄
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(icon: Icon(Icons.lunch_dining),label: "food"),
              BottomNavigationBarItem(icon: Icon(Icons.coffee),label: "drink"),
              BottomNavigationBarItem(icon: Icon(Icons.face),label: "me"),
            ],
            //使用index來回傳使用者按下的BottomNavigationBarItem
            //然後用setState()將index存到_selectedIndex，currentIndex就會顯示當前選中的按鈕    
            currentIndex: _selectedIndex,
            onTap: (index) {
            //這裡使用setState()去更新_selectedIndex的值，從而更新介面，故這裡建的MyApp類別是StatefulWidget
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
        ),
    );
  }
}

• Scaffold實作畫面
  
  • drawer頁面：這個頁面沒有實作，所以會是空白的
    

參考資料：
https://medium.com/flutter-taipei/%E4%BE%86%E5%90%A7-flutter-6-%EF%BD%97idget%E7%9A%84%E9%AA%A8%E6%9E%B6-scaffold%E9%A1%9E%E5%88%A5-c8bc382c5b53