虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterで下タブを使う

f:id:superman199323:20181108094849j:plain

Flutterで下タブを使う

下タブもFlutterは簡単に実装できます。

val _tabLayout = [
      ChatRoom(),
      GroupDetail()
    ];

  int currentIndex = 0;

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar(),
      body: _tabLayout[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: _onTapTab,
          fixedColor: Colors.red,
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.chat_bubble),
              title: new Text('Message'),
              backgroundColor: Colors.red,
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.photo_album),
              title: new Text('Photo Album'),
              backgroundColor: Colors.red,
            ),
          ]),
    );
  }

 _onTapTab(int index) {
    setState(() {
      currentIndex = index;
    });
  }

_tabLayoutの中で表示したいレイアウトを配列を格納しておきタブをタップしたことでレイアウトを切り替えれば完成です。

簡単ですね。

ちなみにこの辺でも下タブを使っているのでよろしければどうぞ

note.mu

note.mu