On one page I have DropDownSearch, SizedBox, TextButton and Tabs. Everything works fine but I have problem to set TabBarView height to be flexible to the bottom of the screen. I tried Flexible, Expanded (error: RenderFlex children have non-zero flex but incoming height constraints are unbounded) and Container/SizedBox with height: MediaQuery.of(context).size.height (error: A RenderFlex overflowed by 225 pixels on the bottom).
Any idea how to set the height of Container to fill rest of the screen? Or use different widget?
Thanks!
body: Column(
children: [
DropdownSearch<String>( ... )
const SizedBox(
width: 10,
),
TextButton(
onPressed: () {
setState(() {
});
},
child: Text('Click me',),
),
DefaultTabController(
length: 3,
child: Column(
children: [
Container(
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height,
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
),
),
Instead of giving TabBarView screen height, wrap it with Expanded to get height as much as possible. ,try this:
Column(
children: [
SizedBox(
width: 10,
),
TextButton(
onPressed: () {
setState(() {});
},
child: Text(
'Click me',
),
),
Expanded( // <--- add this
child: DefaultTabController(
length: 3,
child: Column(
children: [
Container(
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(
icon: Icon(
Icons.directions_bike,
)),
],
),
),
Expanded(// <--- add this
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
),
),
)
],
)
Wrap with Expanded widget to get available space. If you set full height on TabBarView there will be no space left for parent widget.
body: Column(children: [
// DropdownSearch<String>( ... )
const SizedBox(
width: 10,
),
TextButton(
onPressed: () {
setState(() {});
},
child: Text(
'Click me',
),
),
Expanded( //this one
child: DefaultTabController(
length: 3,
child: Column(
children: [
Container(
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
Expanded( //this one
// height: MediaQuery.of(context).size.height,
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
),
),
),
]));
Related
My problem here is that all the tabs working unreliable, sometimes a view is changing sometimes nothing happens.
This is my code:
DefaultTabController(
length: 3,
child: Scaffold(
body: Column(
children: <Widget>[
TabBar(
indicatorColor: Colors.lightGreen,
labelColor: Colors.lightGreen,
tabs:[
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: ()async{
},
child:SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
const Positioned(
child: Tab(text: 'Page1',),
),
],
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: ()async{
},
child: SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
const Positioned(
child: Tab(text: 'Page2'),
),
],
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
child:SizedBox(
width: double.infinity,
child: Stack(
children: <Widget>[
const Positioned(
child: Tab(text:'Page3'),
),
],
),
),
)
]
),
Expanded(
child: TabBarView(
children: [
MainView1(),
MainView2(),
MainView3()
],
),
)
],
)
),
),
Iam using almost the some codestructure in a different view where the tabbar is on the bottom, it works perfectly.
Let me know, if you need more information!
Thanks
I need to implement a tab bar in following formation:
AppBar
DropDown
TabBar
Slider
TabBarView
Problem is: I'm putting everything from dropdown to tab bar view inside a column which goes inside a SingleChildScrollView. Which does not work.
My code:
late TabController _tabController;
#override
void initState() {
super.initState();
_merchantProducts = _getMerchantData();
_tabController = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
...app bar
),
body: SingleChildScrollView(
child: _buildItems(context),
),
);
}
Widget _buildItems(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Container(
padding: EdgeInsets.only(left: 10, right: 20),
child: AddressDropDown(),
),
SizedBox(
height: 20,
),
TabBar(
controller: _tabController,
indicatorColor: CustomColors.primary,
labelColor: CustomColors.primary,
unselectedLabelColor: CustomColors.grey,
isScrollable: true,
tabs: [
Tab(
text: 'All',
),
Tab(
text: 'Popular',
),
],
),
Center(
child: AdSliderCard(),
),
SizedBox(
height: 20,
),
TabBarView(
controller: _tabController,
children: [
_buildMerchantProductList(context),
_buildMerchantProductList(context),
],
),
],
);
}
Widget _buildMerchantProductList(BuildContext context) {
return ListContainer(
data: _merchantProducts,
isHorizontal: false,
isScrollable: true,
);
}
}
How to solve the issue?
UPDATE: I can make the TabBarView scrollable without an issue. I need to make the entire page scrollable.
In your builditems, better way to achieve what you need is to use CustomScrollView:
CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: SizedBox(height: 15),
),
SliverToBoxAdapter(
child: Container(
padding: EdgeInsets.only(left: 10, right: 20),
child: AddressDropDown(),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20),
),
SliverToBoxAdapter(
child: Container(
height: 50,
child: TabBar(
controller: _tabController,
indicatorColor: CustomColors.primary,
labelColor: CustomColors.primary,
unselectedLabelColor: CustomColors.grey,
isScrollable: true,
tabs: [
Tab(
text: 'All',
),
Tab(
text: 'Popular',
),
],
),
),
),
SliverToBoxAdapter(
child: Container(
height: 200,
child: Center(
child: AdSliderCard(),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20),
),
SliverFillRemaining(
child: TabBarView(
controller: _tabController,
children: [
_buildMerchantProductList(context),
_buildMerchantProductList(context),
],
),
),
],
)
Use CustomScrollView and SliverFillRemaining for TabBarView.
return Scaffold(
body: CustomScrollView(
slivers: [
const SliverAppBar(
title: Text("A"),
),
SliverList(
delegate: SliverChildListDelegate.fixed(
[
DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
TabBar(
controller: _tabController,
isScrollable: true,
tabs: const [
Tab(
text: 'All',
),
Tab(
text: 'Popular',
),
],
),
Slider(value: .3, onChanged: (v) {}),
],
),
),
SliverFillViewport(
delegate: SliverChildListDelegate.fixed([
TabBarView(
physics: const NeverScrollableScrollPhysics(),
//*
controller: _tabController,
children: [
SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: Column(
children: [
...List.generate(
33,
(index) => Text(
"tab A: $index",
),
)
],
),
),
SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: Column(
children: [
...List.generate(
33,
(index) => Text(
"tab B: $index",
),
)
],
),
)
],
),
]),
)
],
),
);
How to nest tab view as a child of column in flutter?
I don't want to add tabs as a child of app bar bottom cause my tabs are not on top. It is somewhere in the body.
So I tried the above method & also I tried wrapping it inside a nested scaffold. Both of them seems not working.
Following is what I've tried.
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
child: Column(children: [
Container(
padding: EdgeInsets.all(10),
child: TextInput(
placeholder: 'Search',
leadingIcon: searchIcon,
),
),
DefaultTabController(
length: 3,
child: Column(
children: [
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
],
),
),
give a height to tabcontroller and then wrap tabbarview with expanded.
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
child: Column(children: [
Container(
height:10,
padding: EdgeInsets.all(10),
),
Container(
height:100,//add height as per your need
child:DefaultTabController(
length: 3,
child: Column(
children: [
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
Expanded(
child:TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
),
),
),
])))
How can I force TabBarView to take min height possible to fit its content?
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: Column(children: [
Text('Header Widget'),
Expanded(
child: TabBarView(
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_car),
],
),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
Text('Footer Widget')
]),
),
),
);
}
}
Use BoxConstraint to restrict the height of TabBarView
Column(children: [
Text('Header Widget'),
Container(
constraints: BoxConstraints(
maxHeight: 100.0,
),
child: TabBarView(
children: [
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_car),
],
),
),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
Text('Footer Widget')
]),
Output:
Refer Blog:
https://medium.com/flutterworld/flutter-how-to-set-the-minimum-height-to-widget-36967b310ffe
I have implemented tab layout which consists of two tabs, each tab view has a listview, container with tabview & listview should occupy space upto bottom as of now i place static value of 400, so only up to 400 the listview appears, i need the list view to be appeared up to bottom. can you please me to fix this
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'ABC',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'XYZ',
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
height: 400.0,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
],
),
),
),
],
),
);
}
I have Used Expanded & Flex Widgets which solved the problem
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'Current Openings',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'Applied Jobs',
),
],
),
),
),
flex: 1,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0,bottom: 10.0),
child: Container(
color: Colors.white,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
],
),
),
),
flex: 9,
),
],
),
);
}