How to display TabBar in bottom of a widget - flutter

Question

Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
color:Colors.blueGrey.shade900,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.15,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("Available Balance ₹ 10050", style: TextStyle(
color: Colors.white,
fontSize: 18,
),),
],),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(onPressed: () {}, color: Colors.teal, child: Text("Recharge", style: TextStyle(
color: Colors.white
),),),
RaisedButton(onPressed: () {}, color: Colors.teal, child: Text("Read Rule", style: TextStyle(
color: Colors.white
),),),
Icon(Icons.refresh_rounded, color: Colors.white,)
],),
),
SizedBox(
height: 5,
),
// I need to insert the tabBarHere
],
),
),
],
),
),
);
I have created the widget from flutter but i am not able to display the TabBar after this Widget. I have seen the basic method to create the tabs using DefaultTabController() but it is working when we are using in the bottom of the appbar

Answer 1

You can use a NestedScrollView:
Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Container(
color: Colors.blueGrey.shade900,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.15,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Available Balance ₹ 10050",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Recharge",
style: TextStyle(color: Colors.white),
),
),
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Read Rule",
style: TextStyle(color: Colors.white),
),
),
Icon(
Icons.refresh,
color: Colors.white,
)
],
),
),
SizedBox(
height: 5,
),
],
),
),
),
SliverToBoxAdapter(
child: Container(
color: Colors.blueGrey.shade900,
child: TabBar(
tabs: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Icon(Icons.card_giftcard),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Icon(Icons.store),
),
],
),
),
),
];
},
body: Column(
children: <Widget>[
Flexible(
child: TabBarView(
children: [
Center(child: Text('tab 1')),
Center(child: Text('tab 2')),
],
),
),
],
),
),
),
)
)
Result:

Answer 2

you can use bottomNavigationBar
class _MyHomePageState extends State<MyHomePage> {
var selectedIndex = 0;
void onItemTapped(int index) {
setState(() {
selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("data"),
backgroundColor: Colors.blueGrey.shade900,
actions: <Widget>[Icon(Icons.notifications)],
),
drawer: Drawer(),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.amber,
elevation: 12.0,
type: BottomNavigationBarType.shifting,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.store), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.warning), title: Text('Warning')),
],
showUnselectedLabels: true,
currentIndex: selectedIndex,
unselectedItemColor: Colors.white,
fixedColor: Colors.teal,
onTap: onItemTapped,
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.blueGrey.shade900,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.15,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Available Balance ₹ 10050",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Recharge",
style: TextStyle(color: Colors.white),
),
),
RaisedButton(
onPressed: () {},
color: Colors.teal,
child: Text(
"Read Rule",
style: TextStyle(color: Colors.white),
),
),
Icon(
Icons.refresh,
color: Colors.white,
)
],
),
),
SizedBox(
height: 5,
),
// I need to insert the tabBarHere
],
),
),
],
),
),
);
}