flutterのBottomNavigationBarとPageViewとprovider

前回から少しだけ手を加えてみる。
harist.hatenablog.jp

左右にスワイプすることによりタブを切り替えたい。そんなときはPageViewを使う。
api.flutter.dev

自分なりの言葉で言えば、PageControllerを用意するのと、表示内容はPageViewに与える。
BottomNavigationBarにはタップ時のみ切替の処理を加えれば良い。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(
        create: (context) => PageIndexProvider(),
      )
    ],
    child: MaterialApp(
      theme: ThemeData.dark(),
      home: HomePage(),
    ),
  ));
}

class HomePage extends StatelessWidget {
  final _currentTab = [
    const Center(child: Text('tab1')),
    const Center(child: Text('tab2')),
    const Center(child: Text('tab3')),
    const Center(child: Text('tab4')),
  ];

  final _bottonNavigationItems = [
    const BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
    const BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
    const BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab3')),
    const BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab4')),
  ];

  final PageController _pageController =
      PageController(initialPage: 0, keepPage: true);

  @override
  Widget build(BuildContext context) {
    final _provider = context.watch<PageIndexProvider>();
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => _provider.currentIndex = index,
        children: _currentTab,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _bottonNavigationItems,
        currentIndex: _provider._currentIndex,
        onTap: (index) {
          _provider.currentIndex = index;
          _pageController.jumpToPage(index);
        },
      ),
    );
  }
}

class PageIndexProvider extends ChangeNotifier {
  int _currentIndex = 0;

  int get currentIndex => _currentIndex;

  set currentIndex(int index) {
    _currentIndex = index;
    notifyListeners();
  }
}