How to add a tab inside a column widget on flutter

Question

My goal is to add a tab inside a colum, and add more widgets on this column.

But when i'm adding a tab, i'm getting an error of

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. Any suggestions what i'm doing wrong? Thanks!

Here is my sample code

import 'package:flutter/material.dart';
import 'package:trip_finder/screens/home_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Trip Finder',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xFF131415),
        primaryColorLight: Color(0xFF8296ab),
        highlightColor: Color(0xFF47bee1),
        scaffoldBackgroundColor: Color(0xFFf0f1f1)
      ),
//      home: HomeScreen(),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child:  Column(
          children: <Widget>[
            _tabSection(),
          ],
        ),
      )
    );
  }
}

Widget _tabSection() {
  return DefaultTabController(
    length: 3,
    child: Column(
      mainAxisSize: MainAxisSize.min,

      children: <Widget>[
        Container(
          child: TabBar(tabs: [
            Tab(text: "Home"),
            Tab(text: "Articles"),
            Tab(text: "User"),
          ]),
        ),
        Container(
          child: TabBarView(children: [
            Container(
              child: Text("Home Body"),
            ),
            Container(
              child: Text("Articles Body"),
            ),
            Container(
              child: Text("User Body"),
            ),
          ]),
        ),
      ],
    ),
  );
}

Moria

I added height: MediaQuery.of(context).size.height, to the Container that's the parent of TabBarView in your code, it worked, somehow. – Koch

thanks man, adding that property will fix the error – Moria

Answer 1

You can add height to your TabBarView. Code:

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _tabSection(context),
        ],
      ),
    ));
  }
}

Widget _tabSection(BuildContext context) {
  return DefaultTabController(
    length: 3,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          child: TabBar(tabs: [
            Tab(text: "Home"),
            Tab(text: "Articles"),
            Tab(text: "User"),
          ]),
        ),
        Container( 
          //Add this to give height
          height: MediaQuery.of(context).size.height,
          child: TabBarView(children: [
            Container(
              child: Text("Home Body"),
            ),
            Container(
              child: Text("Articles Body"),
            ),
            Container(
              child: Text("User Body"),
            ),
          ]),
        ),
      ],
    ),
  );
}

Koch

that height is fixed, can be too large if content is small or too small if content is large. How to make it dynamic according to content? – Manon

@Manon try using the IntrinsicHeight widget, put the TabBarView inside IntrinsicHeight , let me know if that works pls – Koch

Answer 2

You can also wrap inside Flexible.

Flexible(
    child: Container(
        child: TabBarView(
            children: [
                Container(
                    child: Text("Home Body"),
                ),
                Container(
                    child: Text("Articles Body"),
                ),
                Container(
                    child: Text("User Body"),
                ),
            ],
        ),
    ),
)

Fanya

RenderFlex children have non-zero flex but incoming height constraints are unbounded. – Manon

Answer 3

above TabBarView example proper but flutter 3.13.9 version

and height setting according to your requirement

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _tabSection(context),
        ],
      ),
    ));
  }
}

Widget _tabSection(BuildContext context) {
  return DefaultTabController(
    length: 3,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const TabBar(tabs: [
          Tab(text: "Home"),
          Tab(text: "Articles"),
          Tab(text: "User"),
        ]),
        SizedBox(
          //Add this to give height
          height: MediaQuery.of(context).size.height * 0.50,
          child: const TabBarView(children: [
            Text("Home Body"),
            Text("Articles Body"),
            Text("User Body"),
          ]),
        ),
      ],
    ),
  );
}

Asclepiadaceous

It's in a situation where we are getting dynamic data contents, we can't specify the height like that. – Become