隨著手機螢幕越做越大，對一些手比較小的使用者而言，想要單手操控手機是越來越難以實現，於是有設計師注意到這個問題，提出拇指友善的網頁設計趨勢。而且越來越多的App也漸漸朝這個方向去做設計。
很棒的是Flutter的BottomNavigationBar可以快速幫我們實現這項需求～

BottomNavigationBar

BottomNavigationBar也是Scaffold提供的一個Widget參數。它是App底部的導覽列，由多個項目組成，通常是3~5個項目。
我們可以為BottomNavigationBar加上一些屬性(這邊只列出幾個常用的)：

• backgroundColor：BottomNavigationBar本身的顏色
• currentIndex：目前作用的item索引值
• items：用List定義按鈕外觀，賦予這些項目的名稱和圖示
• iconSize：所有按鈕的尺寸
• selectedItemColor：設定當前選定的item顏色(含icon及text)
• selectedFontSize：設定當前選定的item字體大小
• onTap：監聽項目點擊事件

那接著我們就把BottomNavigationBar加入Widget裡：

bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      ...
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),

我寫到這邊的時候對onTap感到很疑惑，於是去API看官方的說明：

The stateful widget that creates the bottom navigation bar needs to keep track of the index of the selected BottomNavigationBarItem and call setState to rebuild the bottom navigation bar with the new currentIndex.

在stateful widget中BottomNavigationBar需要隨時追蹤當前被選定的索引值，這時候就用到onTap來做這件事情，onTap會呼叫setState去追蹤新的索引值，並讓app重新渲染新索引值的畫面。

Stateful widget：使用者可以透過點擊或其他互動方式去改變widget內容，例如：Checkbox、Radio、Slider、InkWell、Form、TextField。
Stateless widget：內容不會變的靜態widget，例如：Icon、IconButton、Text。

接著把onTap要執行的setState補齊：

int _selectedIndex = 0;
void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index; 
    });
  }

來看一下成果~

Code on GitHub