底部タブバー配置

昨日私たちはTabBar in Flutterを作成しました.しかし、TwitterやInstagramの例で見たように、ボトムを置いたタブバーを使います.
いくつかの理由で、これはわずかに異なるバーバーにそれらを置くよりもフラッタで動作します.
今日はどのようにあなたのフラッターアプリの下部にTabbar(BottomNavigationBar)を配置する方法を示しているよ!

フラッタアプリケーションでのBottomNavigationBarの追加

我々の出発点として再び我々のbasic Flutter appを使い始めることにしましょう.
我々のAppbar構成でTabBarを加える代わりに、我々のボディータグの下に新しいCittomNavigationBarを加えます.
これは次のようになります.

void main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tabs Demo'),
        ),
        body: Center(
          child: Text('Welcome to Flutter'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_car), label: 'Car'),
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_transit), label: 'Train'),
            BottomNavigationBarItem(
                icon: Icon(Icons.directions_bike), label: 'Bike'),
          ],
        ),
      ),
    ),
  );
}

次のような結果を与えます.

それは何もしない、タブをクリックすることができますが、何も起こりません.
まず最初に、我々は現在選択されたタブのためにいくつかの州を活用する必要があるので、これをstateful widgetに変えましょう.

void main() async {
  runApp(
    MaterialApp(home: BottomTabBarWidget()),
  );
}

class BottomTabBarWidget extends StatefulWidget {
  @override
  State<BottomTabBarWidget> createState() => _BottomTabBarWidget();
}

class _BottomTabBarWidget extends State<BottomTabBarWidget> {
    @override
  Widget build(BuildContext context) {
      // Return our scaffold we used before
  }
}

それで、我々が支配しているこの状態は、何ですか?
一つには、現在選択されているタブを持っている必要があります.したがって、私たちの_BottomTabBarWidgetのための整数を定義しましょう.

class _BottomTabBarWidget extends State<BottomTabBarWidget> {
  int _selectedIndex = 0;

    // Rest of the code
}

次に、コンテンツページがどのように見えるかを定義します.今のところ、基本的なテキストフィールドを使いましょう.

static const List _tabPages = [
    Text('I travel by Car'),
    Text('I like trains more'),
    Text('I like to ride my bycycle'),
];

タブをクリックしたときにコールできる関数を作成しましょう.

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

これにより、タブがクリックされた場合は_selectedIndex変数が変わります.
さあ、私たちの体の部分を最初に修正しましょう.

body: Center(
    child: _tabPages[_selectedIndex],
),

コードのこの部分は1つのタブページ(テキストフィールド)だけを表示します.
どのようなSelectedIndexに基づいています.

Remember Flutter stateful widgets re-render everything something changes.

今、我々は_tabPages関数を呼び出すために実際の下部のナビゲーションバーを変更することができます.

bottomNavigationBar: BottomNavigationBar(
    currentIndex: _selectedIndex,
    onTap: _onItemTapped,
    items: [
        // The items
    ]
)

そして、この場所で、我々はフラッタの下のナビゲーションバーをナビゲートすることができます.

あなたが今日のために全部のファイルを見たいならば、GitHubでプロジェクトをチェックしてください.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook