省エネ

Flutter、vue3修行中。

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];
          },
        );
      },
    );
  }
}

api.flutter.dev

ここみて実装したのですが、動かずonTapの存在に気づいてなんとか動かすことができました。
CupertinoTabScaffold+GoRouter使いた方はぜひ参考にしてみてくださいー!