switch文の画面遷移でエラーが出てしまう。

Question

こんにちは、flutter初心者です。

BottomNavigationBarを遷移後の画面でも保持するため、
CupertinoTabBarを用いてswitch文で表示画面の切り替えをしたいと考えています。

しかし、以下のエラーが出てしまいビルドができない状態です。

Failed assertion: line 4531 pos 14: 'owner!._debugCurrentBuildTarget == this': is not true.

どのようにすれば、エラーなく画面遷移を行えますでしょうか？
皆さんのお知恵をお借りできましたら嬉しいです！

import 'package:flutter/material.dart';
import 'package:test001/screens/home_screen.dart';
import 'package:test001/screens/menu_screen.dart';
import 'package:test001/screens/profile_screen.dart';
import 'models/routes.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, 
      title: 'Myapp',
      theme: ThemeData(
        primarySwatch: Colors.yellow, 
        textTheme:  const TextTheme( 
          titleLarge: TextStyle( 
            fontSize: 20,
            color: Colors. white,
            fontWeight: FontWeight.w500,
          )
        )
      ),
      home: const HomeScreen(), 
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test001/screens/home_screen.dart';
import 'package:test001/screens/menu_screen.dart';
import 'package:test001/screens/profile_screen.dart';

class BottomNavigation extends StatelessWidget {
  const BottomNavigation({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'Menu'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (context) {
                  return const CupertinoPageScaffold(
                    child: HomeScreen(),
                  );
                },
              );
            case 1:
              return CupertinoTabView(
                builder: (context) {
                  return const CupertinoPageScaffold(
                    child: MenuScreen(),
                  );
                },
              );
            case 2:
              return CupertinoTabView(builder: (context) {
                return const CupertinoPageScaffold(
                  child: ProfileScreen(),
                );
              });
            default:
              return CupertinoTabView(
                builder: (context) {
                  return const CupertinoPageScaffold(
                    child: HomeScreen(),
                  );
                },
              );
          }
        });
  }
}

import '../widgets/cupertino_bottom_navigation.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(
          leading: const Icon(Icons.person),
          title: Text('Your Name'),
        ),
        bottomNavigationBar: const BottomNavigation());
  }
}

import 'package:flutter/material.dart';

class MenuScreen extends StatefulWidget{
  const MenuScreen ({ Key? key }) : super(key: key);

  @override
  _MenuState createState() => _MenuState();
}

class _MenuState extends State<MenuScreen>{
  @override
  Widget build(BuildContext context) => Scaffold(
      appBar:AppBar(title: Text('メニューページ'),),
    );
  }

import 'package:flutter/material.dart';

class ProfileScreen extends StatefulWidget{
  const ProfileScreen({ Key? key }) : super(key: key);

  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<ProfileScreen>{
  @override
  Widget build(BuildContext context) => Scaffold(
      appBar:AppBar(title: Text('プロフィールページ'),),
    );
  }

Comments

[JohnWall]

ta.fuさんにご指摘いただいた箇所の修正をさせていただきました。
しかし、以前として同じエラーメッセージが表示されている状態です。

全体のコードを記載していますので、もし怪しい箇所などありましたら教えてもらえますと助かります！

Answer 1

https://api.flutter.dev/flutter/cupertino/CupertinoTabScaffold-class.html
CupertinoTabScaffoldの定義先のドキュメントコメントにサンプルコードがありましたので、それを使ったらこのようなものが出来ました。

一応、BottomNavigationBarを遷移後の画面でも保持するため、
CupertinoTabBarを用いてswitch文で表示画面の切り替えができていると思います。

Use CupertinoTabView as the root widget of each tab to support tabs with parallel navigation state and history.
各タブのルートウィジェットとしてCupertinoTabViewを使用して、並列ナビゲーションの状態と履歴を持つタブをサポートします。

エラーの原因ははっきりとはわからないですが、上記のような説明もあるので、CupertinoTabViewは(使うのであれば)ルートに設置する必要があるようです。

あと他の回答者様のご指摘の通り、無限ループのようになっているように見えますのでそれかと思います。

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

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_one,),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_two),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
          ),
          // ...
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        return CupertinoTabView(
          builder: (BuildContext context) {
            return CupertinoPageScaffold(
              navigationBar: CupertinoNavigationBar(
                middle: Text('Page 1 of tab $index'),
              ),
              child: Builder(
                builder:(context,){
                  switch(index){
                    case 0:
                      return HomeScreen();
                    case 1:
                      return MenuScreen();
                    case 2:
                      return ProfileScreen();
                    default:
                      return HomeScreen();
                  }
                },
              ),
            );
          },
        );
      },
    );
  }
}


class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color:Colors.green,
      child:Center(child:Text('home')),
    );
  }
}


class MenuScreen extends StatefulWidget{
  const MenuScreen ({ Key? key }) : super(key: key);

  @override
  _MenuState createState() => _MenuState();
}

class _MenuState extends State<MenuScreen>{
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar:AppBar(title: Text('メニューページ'),),
  );
}


class ProfileScreen extends StatefulWidget{
  const ProfileScreen({ Key? key }) : super(key: key);

  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<ProfileScreen>{
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar:AppBar(title: Text('プロフィールページ'),),
  );
}

Comments

[JohnWall]

morimanさん

ご回答ありがとうございます！
添付いただいたソースコードをもとに再度見直してみます！

Answer 2

関数及びウィジェットの流れを追っていくと、以下の様になっていることが分かります。

main->MyApp->HomeScreen->BottomNavigation->HomeScreen()->...

生成ウィジェットが循環しているんです。なのでその循環を切らないといけません。
とりあえずBottomNavigation内のHomeScreen()呼び出しをText("hoge")などに変えることで動きます。

後呈示するエラーメッセージが不足しています。
まずStack Overflowと表示され、提示されたエラーのメッセージが表示されていました。
今回の件だとStack Overflowの方が重要です。
このエラーで、大きなデータを取得しようとしていたのか、もしくは関数呼び出しが循環しているのか判断できます。それを元にコードを見ればわかる内容のものです。(ただFlutter/Dartだとスタックに大量なデータを積むような実装は難しいのでほぼ呼び出しの循環が発生していると絞れます）

---

switch文のcase 3はcase 2じゃないでしょうか。

後、switchにdefaultの指定がないんでビルドが通らないのだと思います。
indexがintで0,1,3のケースしかreturnでWidgetを返しておらず、それ以外のケースでreturnがnullになるから。

以下の様なエラーメッセージが出てませんか。

The body might complete normally, causing 'null' to be returned, but the return type, 'Widget', is a potentially non-nullable type.
Try adding either a return or a throw statement at the end. dartbody_might_complete_normally

実行可能な全ソースがないんで、コードを見た限りの判断ですが。

Comments

[JohnWall]

ta.fuさん

コメントありがとうございます！
ただ、indexの数値修正、defaultの追加を行なっても変わらずに同じエラーが表示され
ビルドできない状態です。。。
ソース全文を追記させていただいたので、よろしければ再度ご確認いただければと思います。。。！

[JohnWall]

断片的な情報しか共有できておらず申し訳ありません。
HomeScreen箇所を修正することでビルドができるようになりました！
ありがとうございます！