TapBarView adjust height according to content in it - flutter

Question

i am trying to display items in Listview at first tab that I created. However when the tab is invisible unless I wrap TabBarView with a fixed sized container. What should I do to make this items visible without giving a fixed height to parent container?
I want red container to be dynamic according to content in it.
https://zapp.run/edit/zg5w062ig5x0?theme=dark&lazy=false
Unless the link goes down.
import 'package:flutter/material.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: 'Tab inside body widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tabs Example'),
),
body: Container(
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
SizedBox(height: 20.0),
Text('Tabs Inside Body', textAlign: TextAlign.center, style: TextStyle(fontSize: 22)),
DefaultTabController(
length: 4, // length of tabs
initialIndex: 0,
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
Container(
child: TabBar(
labelColor: Colors.green,
unselectedLabelColor: Colors.black,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
],
),
),
Container(
height: 400, //height of TabBarView
decoration: BoxDecoration(
color: Colors.red,
border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
),
child: TabBarView(children: <Widget>[
Container(
child: Center(
child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
])
)
])
),
]),
),
);
}
}

Answer 1

Whenever using a Widget like Column, Row or any other Widgets that has parent Widget with infinite height or width, use Flex or Expanded Widget as per your requirement
Sample Code : -
Expanded(child: TabBarView(children: [],))
Complete Code : -
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tab inside body widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Tabs Example'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const SizedBox(height: 20.0),
const Text('Tabs Inside Body',
textAlign: TextAlign.center, style: TextStyle(fontSize: 22)),
DefaultTabController(
length: 4, // length of tabs
initialIndex: 0,
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const TabBar(
labelColor: Colors.green,
unselectedLabelColor: Colors.black,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
],
),
Expanded(
child: Container(
decoration: const BoxDecoration(
color: Colors.red,
border: Border(
top: BorderSide(
color: Colors.grey, width: 0.5))),
child: const TabBarView(children: <Widget>[
Center(
child: Text('Display Tab 1',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold)),
),
Center(
child: Text('Display Tab 2',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold)),
),
Center(
child: Text('Display Tab 3',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold)),
),
Center(
child: Text('Display Tab 4',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold)),
),
])),
)
]),
)),
]),
);
}
}
Output : -