Display TabBar in body of scaffold - flutter

I'm want to display a tabbar as it is used with the appbar, but in the middle of the scaffold body. Is it possible?
I have this code, but the TabBarView breaks the ui. If I comment the TabBarView, the TabBars are displayed correctly. What is wrong with the code? In case it's possible to use it this way..
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Text('Some other random content'),
TabBar(
controller: _tabController,
isScrollable: true,
tabs: <Widget>[
Tab(
child: Text(
'Posts',
style: TextStyle(
fontSize: 18.0,
color: Colors.black87,
),
),
),
Tab(
child: Text(
'Fotos',
style: TextStyle(
fontSize: 18.0,
color: Colors.black87,
),
),
),
],
),
TabBarView(
controller: _tabController,
children: <Widget>[
Center(
child: Text("User"),
),
Center(
child: Text("Email"),
),
],
),
],
),
);
}

Just Change ListView to Column and add SingleChildScrollView
SingleChildScrollView(
child: Column(
children: <Widget>[]
),
)

Hey i guess it's already too late but maybe it helps others.
If you just want to have your tabbar e.g. in the middle of the screen to divide your screen in 2 sections (top: content, bottom: tabbar) you can place your scaffold inside a column, e.g. following:
#override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
flex: 1,
child: Center(
child: Text("Header"),
),
),
Expanded(
flex: 1,
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
flexibleSpace: TabBar(
tabs: [
Tab(text: "First"),
Tab(text: "Second"),
Tab(text: "Third"),
],
),
),
body: TabBarView(
children: [
Center(child: Text("First screen")),
Center(child: Text("Second screen")),
Center(child: Text("Third screen")),
],
),
),
),
),
],
);
}
Let me know if this fits your needs / if you need further help :-)

Related

TabBarView with dynamic container height and futurebuilder Flutter

I'm using a SizedBox and passing the screen height to it, but I have a RenderFlex overflowed error.
This is the structure of my code:
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Scaffold(
drawer: const NavigationDrawerWidget(),
appBar: CustomAppBar(),
body: SingleChildScrollView(
child: Column(
children: [
TabBar(
isScrollable: true,
tabs: myTabs,
),
SizedBox(
height: (MediaQuery.of(context).size.height),
child: TabBarView(
children: [
futureBuilder,
const Icon(Icons.directions_bike),
],
),
)
],
),
)),
);
FutureBuilder returns a container where the height is varied and has other expansive children. How can I get rid of using SizedBox and pass a height to it? I tried using Expanded in place of SizedBox but got errors.
Try using NestedScrollView
return Scaffold(
body: DefaultTabController(
length: 2,
initialIndex: 0,
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
bottom: TabBar(isScrollable: true, tabs: [
Tab(
icon: Icon(Icons.ac_unit),
),
Tab(
icon: Icon(Icons.ac_unit),
),
]))
];
},
body: TabBarView(
children: [
SingleChildScrollView(
child: Container(
color: Colors.red,
child: Column(
children: [
for (int i = 0; i < 34; i++)
Container(
height: kToolbarHeight,
color: i.isEven ? Colors.amber : Colors.pink,
)
],
),
),
),
const Icon(Icons.directions_bike),
],
),
),
),
);

height issue for 'tabs' widget as a child of other widget, flutter

I am trying to have tabs layout similar to Twitter profile page, where tabs layout shows in the middle of the page. To start with, I have created a basic layout with column as parent and other widgets including tabs as child. Code looks similar to below
Column(
children: [
Text("some text");
//some image widget
ElevatedButton(
style: style,
onPressed: () {},
child: Text("click me"),
);
DefaultTabController(
length: 2,
child: Flexible( //without flexible wrapper, it throws unbounded height issue.
child: Column(
children: [
TabBar(
labelColor: Colors.pink,
indicatorColor: Colors.pink,
tabs: [
Tab(child: Text("Tweets")),
Tab(child: Text("Tweets and replies")),
],
),
Expanded(
child: new TabBarView(children: [
//some widgets here
],),
)
],
),
),
);
]
)
but with above code issue is that, tabs layout doesn't fill remaining space, but just fill some fixed space.
i want to cover the remaining space with tabs, till bottom. if i remove remaining children of parent column and just keep tab, it fill all available space as expected.
If you face any issue, do flutter clean and restart
Result
Test widget
class SWidget extends StatelessWidget {
const SWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Text("some text"),
//some image widget
ElevatedButton(
// style: style,
onPressed: () {},
child: Text("click me"),
),
DefaultTabController(
length: 2,
child: Flexible(
//without flexible wrapper, it throws unbounded height issue.
child: Column(
children: [
TabBar(
labelColor: Colors.pink,
indicatorColor: Colors.pink,
tabs: [
Tab(child: Text("Tweets")),
Tab(child: Text("Tweets and replies")),
],
),
Expanded(
child: new TabBarView(
children: [
//some widgets here
Container(
child: Text("item 1"),
color: Colors.deepPurple,
),
Container(
child: Column(
children: [
Text("item 2"),
Text("item 2"),
],
),
color: Colors.deepOrange,
),
],
),
)
],
),
),
),
],
),
);
}
}
Let me know if it does solve the issue.

Navigator to the page from drawer get noSuchMethodError: the method '*' was called on null

The Drawer work perfectly, but after I add tab bar in the main page. The navigator from drawer to other page get error 'noSuchMethodError: the method '*' was called on null'. I mean, when click the listTile from drawer. It lead to that error.
This is my code
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: getTitleFontColor(),
centerTitle: true,
title: appBarTitle,
),
drawer: new Drawer(
child:
_drawerLeft(context),
),
body:
new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
actions: <Widget>[],
title:
TabBar(
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('A'),
),
Tab(
child: Text('B'),
),
Tab(
child: Text('C'),
),
]
),
),
body: TabBarView(
children: <Widget>[
Container(
//A,
),
Container(
child: ListView(
children:<Widget>[
Column(children: <Widget>[
// B,
],)
])
),
Container(
child: ListView(
children:<Widget>[
Column(children: <Widget>[
// C
],)
])
),
],
),
)
),
// ),
);
}
My _drawerLeft()
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
leading: Icon(Icons.credit_card,color: getTitleFontColor()),
title: Text(
"A",
style: TextStyle(
color: getTitleFontColor(), fontSize: 16
)
),
onTap: () => {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => APage()),
),
},
),
])
Is it I use the navigator wrong? Can someone help please.

Flutter keyboard overlapping with resizeToAvoidBottomPadding

I have a page with a DefaultTabController that is:
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
resizeToAvoidBottomPadding: true,
appBar: AppBar(
bottom: TabBar(
indicatorColor: Colors.red,
indicator: BoxDecoration(
color: buttonColor,
),
tabs: [Tab(text: "Login"), Tab(text: "Register", key: Key("tabRegistro"))],
),
centerTitle: true,
title: Text(appBarTitle)),
body: TabBarView(
children: [
new LoginPage(),
new RegisterPage(),
],
),
),
);
}
And for example, the LoginPage build is:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: true,
key: _scaffoldKey,
body: SingleChildScrollView(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Center(
child: Container(
color: backgroundColor,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 155.0,
child: Image.asset(
"assets/images/pet.PNG",
fit: BoxFit.contain,
),
),
SizedBox(height: 20.0),
emailField,
SizedBox(height: 10.0),
passwordField,
SizedBox(height: 20.0),
loginButon,
SizedBox(height: 20.0),
GoogleSignInButton(
darkMode: true,
text: "Login with Google",
onPressed: () {
_sigIn();
}),
],
),
)),
),
),
)));
}
But when I'm writing, the keyboard cover the Textfields and they aren't visible.
With SingleChildScrollView before it works, but now it doesn't work propertly. I have tried to put resizeToAvoidBottomPadding: true but it doesn't work. What could I do to fix this problem?
The code is Ok, the problem is at Android.manifest.xml. I'm using Android Simulator and to hide the status bar I put these line:
android:theme="#android:style/Theme.Holo.NoActionBar.Fullscreen"
If i put the original line it works. The original line is:
android:theme="#style/LaunchTheme"

Getting 'Horizontal viewport was given unbounded height.' with TabBarView in flutter

I'm trying to make a profile page, where the users info is at the top. And then have a tab view below that for different views.
This is the code I'm using at the moment, when I take the TabBarView out it doesn't through an error, and if I wrap the TabBarView in an Expanded the error RenderFlex children have non-zero flex but incoming height constraints are unbounded. comes up.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(''),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Row(
children: <Widget>[
CircleAvatar(
minRadius: 45.0,
backgroundImage: NetworkImage(
'https://www.ienglishstatus.com/wp-content/uploads/2018/04/Anonymous-Whatsapp-profile-picture.jpg'),
),
Padding(
padding: EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Testing Name',
style: TextStyle(
fontSize: 22.0,
color: Colors.grey.shade800,
),
),
Text(
'#testing_username',
style: TextStyle(
fontSize: 13.0,
color: Colors.grey.shade800,
),
),
],
),
),
],
),
),
DefaultTabController(
length: 3,
child: Column(
children: <Widget>[
TabBar(
tabs: <Widget>[
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
],
),
TabBarView(
children: <Widget>[
Container(
color: Colors.grey,
),
Container(
color: Colors.green,
),
Container(
color: Colors.purple,
),
],
),
],
),
)
],
),
);
}
I did try a variation of this but couldn't get it to work.
The error description is clear, the TabBarView doesn't have a bounded height. the parent widget also doesn't have a bounded height. So, the Expanded widget will not solve this issue.
EDIT: below solutions are for above question(with columns).In general cases, use a ListView with shrinkWrap: true.(Or any other widgets with shrinkWrap) As #Konstantin Kozirev mentioned correctly, the shrinkWrap causes some performance issues. look for a better updated solution.
There are some options:
1st Solution:
Wrap the parent widget(Column) with a limited height widget like SizedBox or AspectRatio. Then use the Expanded widget like this:
Expanded(
child: TabBarView(...),
)
2nd Solution:
Use a bounded widget like SizedBox or AspectRatio on the TabBarView itself:
SizedBox(
height: 300.0,
child: TabBarView(...),
)
Note Your can also calcuate the height dynamicly if the height is not static.
I solved it by adding TabBar inside Container and TabBarView inside Expanded:
DefaultTabController(
length: 3,
child: Column(
children: <Widget>[
Container(child: TabBar(..)),
Expanded(child: TabBarView(..)),
],
),
);
try to use IndexedStack instead of TabBarView
i tried Expanded, shrinkWrap = true , ...
but no one work's fine
just try example.
Example:
class Product extends StatefulWidget {
#override
_ProductState createState() => _ProductState();
}
class _ProductState extends State<Product> with SingleTickerProviderStateMixin {
TabController tabController;
int selectedIndex = 0;
#override
void initState() {
super.initState();
tabController = TabController(length: 5, vsync: this, initialIndex: 0);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
initialIndex: 0,
child: Scaffold(
body: ListView(
shrinkWrap: true,
children: [
TabBar(
tabs: <Widget>[
Tab(
text: 'one',
),
Tab(
text: 'two',
),
Tab(
text: 'three',
),
],
controller: tabController,
onTap: (index) {
setState(() {
selectedIndex = index;
tabController.animateTo(index);
});
},
),
IndexedStack(
children: <Widget>[
Visibility(
child: Text('test1'),
maintainState: true,
visible: selectedIndex == 0,
),
Visibility(
child: Text('test2'),
maintainState: true,
visible: selectedIndex == 1,
),
Visibility(
child: Text('test3'),
maintainState: true,
visible: selectedIndex == 2,
),
],
index: selectedIndex,
),
],
),
),
);
}
}
special thank's to #arbalest
based on #Yamin answer I used SizeBox Like below to get full page
SizedBox.expand(
child: TabBarView(),
)
or any other size :
SizedBox(
height: height:MediaQuery.of(context).size.height // or every other size ,
child: TabBarView(),
)
The error message in console mentions this: "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".
Clearly, the horizontal viewport here is referring to the TabBarView widget which is not given a height constraint.
So wrap both the TabBar and TabBarView widgets in Expanded widgets and give appropriate flex values to them to let them share their parent's height.
Concretely,
DefaultTabController(
length: 3,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: TabBar(
tabs: <Widget>[
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
],
),
),
Expanded(
flex: 9,
child: TabBarView(
children: <Widget>[
Container(
color: Colors.grey,
),
Container(
color: Colors.green,
),
Container(
color: Colors.purple,
),
],
),
)
],
),
)