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

Question

画面の一部に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で囲うなど)

よろしくお願いします。

Answer 1

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

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

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

class CustomTab extends StatefulWidget {
  const CustomTab({super.key});

  @override
  State<CustomTab> createState() => _CustomTabState();
}

class _CustomTabState extends State<CustomTab> with TickerProviderStateMixin {
  int _selectedTabbar = 0;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  Widget _tabBarView() {
    switch (_selectedTabbar) {
      case 0:
        return ListView.builder(
          shrinkWrap: true,
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Text("$_selectedTabbar $index 0 ");
          },
        );
      default:
        return ListView.builder(
          shrinkWrap: true,
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Text("$_selectedTabbar $index d");
          },
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: <Widget>[
      Container(
        height: 100,
      ),
      TabBar(
        controller: _tabController,
        onTap: (value) {
          setState(() {
            _selectedTabbar = value;
          });
        },
        tabs: const <Widget>[
          Tab(text: "1"),
          Tab(text: "2"),
        ],
      ),
      Expanded(
        child: SingleChildScrollView(
          child: _tabBarView(),
        ),
      ),
    ]));
  }
}

Comments

[hikagami]

本当にありがとうございます!
提示していただいたコードで無事、想定していた通りの挙動で動かすことができました。