🐡

Flutter GoRouterでのtype 'Null' is not a subtype of type ~ エラー

2024/12/11に公開

GoRouterでの値受け渡しエラー

Flutterのルーティングに下記を利用しています。

https://pub.dev/packages/go_router

画面が黒画面になったり、色々経験させてもらっています。

さて、GoRouterを利用していて親画面から子画面に遷移しようとした際に、

type 'Null' is not a subtype of type '%%%%' in type cast

上記とエラーと遭遇。

初めてのエラーだったので、なんだなんだと考えていたら、親から子に値を渡してないのが原因でした。。。。

子にはパラメータ要らないのに、GoRouterで親子関係のためにネストで記載すると必要になるらしいです。。。
しらなかった。。。

下記の記事を参考にしました。
https://zenn.dev/goza/articles/8782d103e90439

extraとは?

GoRouterでオブジェクトを渡すときに利用するパラメータになります。
intやstringなら他の方法で渡せるのですが、オブジェクトの場合だと下記の様な渡し方になります。

class PersonRouteWithExtra extends GoRouteData {
  PersonRouteWithExtra(this.$extra);
  final Person $extra;

  
  Widget build(BuildContext context) => PersonScreen(person: $extra);
}

実際に書くと下記の様になるかと思います。(デモ記載)

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

// 親ルートと子ルートの定義
final GoRouter router = GoRouter(
  routes: [
    TypedGoRoute<ParentRoute>(
      path: 'Parent',
      routes: [
        TypedGoRoute<ChildRoute>(
          path: 'Child',
        ),
      ],
    ),
  ],
);

/// 省略
class ParentRoute extends GoRouteData {
  /// Constructor
  const ParentRoute(this.$extra);

  /// 業態
  final Person $extra;

  
  Widget build(BuildContext context, GoRouterState state) => ParentPage(
        person: $extra,
      );
}

class ChildRoute extends GoRouteData {
  /// Constructor
  const ChildRoute([this.$extra]);

  /// null許容にする
  final Person? $extra;

  
  Widget build(BuildContext context, GoRouterState state) =>
      const  ChildPage();
}

実際の使い方

下記の様になります。
親は必要なのでpersonを渡しますが、子は必要ありません。
しかしGoRouterだと親→子は同じということで一応わたします。

ただ、子の方はnull許容をいれて子画面では利用しないようにすればエラーは回避できます。

/// 親
const ParentRoute(person).push(context);
/// 子 必要ないけど値を渡す
const ChildRoute(person).push(context);

他のやり方をさがしたのですが、GoRouterでオブジェクトを渡すのはこれしかないようで、
あとは状態管理系のrevepodなどで値を保持して画面間で利用するしかないのかなと思います。

調べ切れてないですが、上記でエラーは無くなりました。

Discussion