How to add a tab inside a column widget on flutter - 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"),
),
]),
),
],
),
);
}

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

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