TabBarViewで高さが定まっていないListView.builderを使用できない

画面の一部にTabBarを使用したいのですがTabbarViewに
Horizontal viewport was given unbounded height.
とエラーが出てしまいます。
TabBarViewに表示させたいListViewは高さを可変にしたいのでContainerで囲ってheightを指定することは避けたいです。

ListView.builderには
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
を入れています。

該当のソースコード

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
            height: 100,
          ),
      　DefaultTabController(
                    length: 2,
                    child:
                    Column(
                      children: [
                        SizedBox(
                          child: TabBar(tabs: <Widget>[
                            Tab(text: "1"),
                            Tab(text: "2"),
                          ],),
                        ),
                        TabBarView(children: [
                          ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: 100,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                child: Text(index.toString()),
                              );
                            },
                          ),
                          ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: 100,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                child: Text(index.toString()),
                              );
                            },
                          ),
                        ]),

                      ],
                    ),


                  ),
                ] ),
          ));}

試したこと

ググって出てくるようなことはほぼ試しましたが正常に表示できずに終わっています(どこどこをExpandedで囲うなど)

よろしくお願いします。

回答1件

ベストアンサー

Columnの子供として配置する場合TabBarViewは基本的に大きさを指定しないと使えないようです。
そのため、例えば大きさが決定されているScaffoldのbody等に直接配置するというのが常道のようです。

もしColumnの中にTabBarで選択した結果をもって配置するウィジェットを変更したい場合は、TabBarViewを使うのではなく、自前で作りこむのが正しいようです。

以下は、TabBarの選択結果により_tabBarViewでウィジェットを作ってそれを表示するというWidgetクラスです。

dart
1class CustomTab extends StatefulWidget {
2  const CustomTab({super.key});
3
4  @override
5  State<CustomTab> createState() => _CustomTabState();
6}
7
8class _CustomTabState extends State<CustomTab> with TickerProviderStateMixin {
9  int _selectedTabbar = 0;
10  late TabController _tabController;
11
12  @override
13  void initState() {
14    super.initState();
15    _tabController = TabController(length: 2, vsync: this);
16  }
17
18  Widget _tabBarView() {
19    switch (_selectedTabbar) {
20      case 0:
21        return ListView.builder(
22          shrinkWrap: true,
23          itemCount: 100,
24          itemBuilder: (BuildContext context, int index) {
25            return Text("$_selectedTabbar $index 0 ");
26          },
27        );
28      default:
29        return ListView.builder(
30          shrinkWrap: true,
31          itemCount: 100,
32          itemBuilder: (BuildContext context, int index) {
33            return Text("$_selectedTabbar $index d");
34          },
35        );
36    }
37  }
38
39  @override
40  Widget build(BuildContext context) {
41    return Scaffold(
42        body: Column(children: <Widget>[
43      Container(
44        height: 100,
45      ),
46      TabBar(
47        controller: _tabController,
48        onTap: (value) {
49          setState(() {
50            _selectedTabbar = value;
51          });
52        },
53        tabs: const <Widget>[
54          Tab(text: "1"),
55          Tab(text: "2"),
56        ],
57      ),
58      Expanded(
59        child: SingleChildScrollView(
60          child: _tabBarView(),
61        ),
62      ),
63    ]));
64  }
65}