【Flutter】下タブでの画面切り替えを実装

概要

下タブの実装にはBottomNavigationBarを使います

コード

import 'package:flutter/material.dart';

class Navigation extends StatefulWidget {
  @override
  _NavigationState createState() => _NavigationState();
}

class _NavigationState extends State<Navigation> {
  // 選択中のIndex
  int _selectedIndex = 0;
  // タブ分けするウィジェット
  List<Widget> _widgetList = <Widget> [
    Text('1'),
    Text('2'),
    Text('3'),
  ];
  // ナビゲーションアイテムをタップしたら選択中Indexを変更
  void _navigationItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Center(
        child: _widgetList.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.timer), label: 'Timer'),
          BottomNavigationBarItem(icon: Icon(Icons.watch_later_outlined), label: 'Stop Watch'),
          BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: 'Alarm'),
        ],
        currentIndex: _selectedIndex,
        onTap: _navigationItemTap,
        selectedFontSize: 13.0,
        selectedItemColor: Colors.white,
        unselectedFontSize: 10.0,
        unselectedItemColor: Colors.grey,
        backgroundColor: Colors.black,
      ),
    );
  }
}

_widgetListに別画面のWidgetを入力すれば画面遷移もOK！