How to fix unbounded height issue?

Question

I need a component to be inserted in a SingleChildScrollView children's list that has one or two tabs.

Here's my build()method:


Widget build(BuildContext context) {
    /// TODO: Make firmware update support for iOS asap
    final isBleFirmwareUpdateSupported = Platform.isAndroid;

    return DefaultTabController(
        length: isBleFirmwareUpdateSupported ? 2 : 1,
        child: Column(children: [
          // === "Firmware BLE update"
          Text(i18n_Firmware_update.i18n,
              style: Theme.of(context).textTheme.headline6),

          spacer,
          // == Pick Wifi or BLE
          TabBar(
            tabs: [
              Tab(icon: Icon(Icons.wifi)),
              if (isBleFirmwareUpdateSupported)
                Tab(icon: Icon(Icons.bluetooth)),
            ],
          ),

          Center(
              child: TabBarView(children: [
            Center(child: Text("WiFi")),
            Center(child: Text("BLE"))
      ]))
        ]));
  }
}

But I get the error

FlutterError (Horizontal viewport was given unbounded height. Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.)

Of course, if I do:

          Container(
              height: 600,
              width: double.infinity,
              child: TabBarView(children: [

The error disappears.

So my question is how to transform the code so that the container compute an engloging children box by itself?

Where is the `SingleChildScrollView`? What is and where is the `spacer` declaration? What've you tried? Try to provide a minimal reproducible exemple of this exception in your context. — Alex Rintt, Dec 01 '22 at 16:22
Maybe this post helps? https://stackoverflow.com/questions/62484998/flutter-tabbarview-inside-singlechildscrollview — GrahamD, Dec 01 '22 at 16:23
Wrap every child of the column with Expanded widget and if spacer is a Spacer() Widget, then remove it — A.Ktns, Dec 01 '22 at 18:03

score 0 · Answer 1 · answered Dec 01 '22 at 16:25

0

Try wrapping the widget with Expanded or you can wrap using SizedBox:

SizedBox.expand(
    child: TabBarView(),
  )

Another way:

SizedBox(
    height: MediaQuery.of(context).size.height 
    child: TabBarView(),
  )

answered Dec 01 '22 at 16:25

Priyaank

141
6

How to fix unbounded height issue?

1 Answers1