Flutter下部ナビゲーションバーBottomNavigationBar

BottomNavigationBarは下部のナビゲーションバーで、一般的には複数のビューで選択するために適用されます.Androidの下部ナビゲーションバーに類比し、TextテキストとIconアイコンからなる.
ここでは、表示内容にコンテナを提供するリストを作成します.

static const List<Widget> _widget=<Widget>[
    Text('Index 0:  '),Text("Index 1:   "),Text("Index 2:  ")];

下部のナビゲーションバーのコンポーネント:

bottomNavigationBar: BottomNavigationBar(items: const<BottomNavigationBarItem>[
                      BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('  ')),
                      BottomNavigationBarItem(icon: Icon(Icons.contacts),title: Text('   ')),
                      BottomNavigationBarItem(icon: Icon(Icons.build),title: Text('  '))
                    ]

下部のナビゲーションバータブが選択されているときの色の変化を指定します.

selectedItemColor: Colors.amber

タブが選択されているときに呼び出されます.

onTap: _onItemTapped

を通じてonItemTappedメソッドでは、現在選択されているタブの下付きindexを_に割り当てます.selectedIndex、タブを切り替える効果:

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

完全なコードは次のとおりです.

class MyStatefulWidget extends StatefulWidget{
  MyStatefulWidget({Key key}) : super(key: key);
  // widget      
  _MyStatefulWidgetState createState()=>_MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>{
  int _selectedIndex=0;//    0  
  //    
  static const List<Widget> _widget=<Widget>[
    Text('Index 0:  '),Text("Index 1:   "),Text("Index 2:  ")];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(appBar: AppBar(title: Text('     '),),
                    // List        index      
                    body: Center(child: _widget.elementAt(_selectedIndex),),
                    bottomNavigationBar: BottomNavigationBar(items: const<BottomNavigationBarItem>[
                      BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('  ')),
                      BottomNavigationBarItem(icon: Icon(Icons.contacts),title: Text('   ')),
                      BottomNavigationBarItem(icon: Icon(Icons.build),title: Text('  '))
                    ],
                    currentIndex: _selectedIndex,
                    selectedItemColor: Colors.amber,
                    //     
                    onTap: _onItemTapped,),);
  }

  /**
   *         index   _selectedIndex，    
   */
  void _onItemTapped(int index){
    setState(() {
    //               _selectedIndex
      _selectedIndex=index;
    });
  }

}