[Flutter]CupertinoTabBarでタブ(tab item)をタップした時に処理(ontap)をするには？

どうも、ちょげ(@chogetarou)です。

CupertinoTabBarでタブをタップした時に何かしらの処理をする方法を紹介します。

方法
使用例

方法

CupertinoTabBarでタブをタップした時に処理をするには、引数「onTap」を使います。

具体的には、CupertinoTabBarの引数「onTap」にタブを押した時に呼び出す関数を指定します。

呼び出す関数は「(index){}」のようなもので、引数ではタップされたタブのインデックスを受け取ります。

CupertinoTabBar(
  onTap: (index) { //引数ではタップされたタブのインデックスを受け取る
  //タップされた時の処理
},
  ・・・
),

引数「onTap」を使うことで、CupertinoTabBarでタブをタップされた時に処理をすることが出来ます。

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.circle),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.add),
            label: 'Tab 2',
          ),
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        return CupertinoTabView(
          builder: (BuildContext context) {
            return Center(
              child: Text('Content of tab $index'),
            );
          },
        );
      },
    );
  }
}