flutterのBottomNavigationBarとprovider
flutterが面白くてちょこちょこ触り始めた。
BottomNavigationBarとproviderの組み合わせはどうやるのが良いのかなといろいろ検索してみたのだけれど、StatefulWidgetや付属するStateクラスが出てきていて、StatelessWidgetのみで表現する方法じゃ駄目なのかなぁと思ったのでメモ。
まだお作法的なところが分からずにいる。
import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; void main() { runApp(MultiProvider( providers: [ ChangeNotifierProvider( create: (context) => BottomNavigationBarProvider(), ) ], child: MyApp(), )); } class MyApp 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')), ]; @override Widget build(BuildContext context) { final provider = context.watch<BottomNavigationBarProvider>(); return MaterialApp( theme: ThemeData.dark(), home: Scaffold( body: _currentTab[provider._currentIndex], bottomNavigationBar: BottomNavigationBar( items: _bottonNavigationItems, currentIndex: provider._currentIndex, onTap: (index) { provider.currentIndex = index; }, ), ), ); } } class BottomNavigationBarProvider extends ChangeNotifier { int _currentIndex = 0; int get currentIndex => _currentIndex; set currentIndex(int index) { _currentIndex = index; notifyListeners(); } }