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"),
            ),
          ]),
        ),
      ],
    ),
  );
}

I added `height: MediaQuery.of(context).size.height,` to the `Container` that's the parent of `TabBarView` in your code, it worked, somehow. — Arash Mohammadi, Oct 30 '19 at 07:40

score 34 · Accepted Answer · answered Oct 30 '19 at 07:50

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"),
            ),
          ]),
        ),
      ],
    ),
  );
}

score 6 · Answer 2 · answered Jul 16 '21 at 15:06

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"),
                ),
            ],
        ),
    ),
)

How to add a tab inside a column widget on flutter

2 Answers2

Linked