94052


FlutterのScaffoldとDefaultTabControllerに関する質問となります。

現在Flutterを学習しており、DefaultTabControllerを触っています。  
「Scaffoldはウィジェットツリーの最下層に来るもの」と習い、以下のコードのようにScaffoldのbodyにDefaultTabControllerを配置する形で使おうとしましたが、実行するとTabBarとTabBarViewが表示されません。TabBarとTabBarViewはColumn内に配置したいと考えております。

様々なサイトのDefaultTabControllerのサンプルコードを見ると、DefaultTabControllerが最下層に来てそのchildにscaffold、scaffoldのappBarにTabBar、bodyにTabBarViewを配置しているものばかりなのですが、必ずそのような形でないとDefaultTabControllerは使えないのでしょうか？  
将来的に作るアプリは、ScaffoldのappBarは表示しないようにしたと思っています。

Scaffoldを最下層に置き、その上にDefaultTabControllerを配置するにはどうすればよいのでしょうか。

[code]

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            backgroundColor: Colors.limeAccent,
            appBar: AppBar(title: Text('Welcome to Flutter!!!')), // 将来的にappBarはなくしたい
            body: DefaultTabController( // DefaultTabControllerはScafoldのbodyに配置したい
              length: 2,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TabBar( // TabBarが表示されない
                    tabs: [
                      Tab(text: 'タブ1'),
                      Tab(text: 'タブ2')
                    ]
                  ),
                  TabBarView( // TabBarViewも表示されない
                    children: [
                      Text('ページ1'),
                      Text('ページ2')
                    ]
                  )
                ]
              )
            )
          )
        );
      }
    }
    
[/code]


CC BY-SA 4.0
2023-03-01T14:36:53.340
94051
2023-03-01T15:31:43.737
2023-03-01T15:31:43.737
3060
57343
question
flutter
FlutterでScaffoldが最下層のままDefaultTabControllerを利用したい


自己解決しました。

原因は「DefaultTabControllerがScaffoldより上層に来ていること」ではなく、「TabBarViewがExpandedウィジェット内に配置されていなかったこと」のようでした（おそらくそれが根本原因ではないと思いますが）。

以下のコードでやりたいことができました。お騒がせいたしました。

[code]

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Welcome to Flutter',
          home: Scaffold(
            backgroundColor: Colors.limeAccent,
            body: DefaultTabController(
              length: 2,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const TabBar(
                    tabs: [
                      Tab(text: 'タブ1'),
                      Tab(text: 'タブ2')
                    ]
                  ),
                  Expanded( // Expandedが必要だった
                    child: TabBarView(
                      children: [
                        Text('ページ1'),
                        Text('ページ2')
                      ]
                    )
                  )
                ]
              )
            )
          )
        );
      }
    }
    
[/code]


CC BY-SA 4.0
2023-03-01T15:31:14.737
94052
2023-03-01T15:31:14.737
57343
94051
answer