CupertinoTabScaffoldとgo router
こんにちは。
CupertinoTabScaffoldとGoRouterの組み合わせでちょっとはまったので、書いておこうと思います。
ちなみに、GoRouter Builderも使っています。
最初に動かなかったコード。
import 'package:flutter/cupertino.dart';
import 'package:go_router/go_router.dart';
class CustomTabView extends StatelessWidget {
const CustomTabView({
super.key,
required this.children,
required this.navigationShell,
});
final StatefulNavigationShell navigationShell;
final List<Widget> children;
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: 'ホーム',
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.calendar),
label: '履歴',
),
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return children[index];
},
);
},
);
}
}
次に動いたコード。
import 'package:flutter/cupertino.dart';
import 'package:go_router/go_router.dart';
class CustomTabView extends StatelessWidget {
const CustomTabView({
super.key,
required this.children,
required this.navigationShell,
});
final StatefulNavigationShell navigationShell;
final List<Widget> children;
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
key: ValueKey(navigationShell.currentIndex),
tabBar: CupertinoTabBar(
onTap: (index) {
navigationShell.goBranch(index);
},
currentIndex: navigationShell.currentIndex,
items: const [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: 'ホーム',
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.calendar),
label: '履歴',
),
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return children[index];
},
);
},
);
}
}
ここみて実装したのですが、動かずonTapの存在に気づいてなんとか動かすことができました。
CupertinoTabScaffold+GoRouter使いた方はぜひ参考にしてみてくださいー!