Flutter tabBar how to change from top to buttom - user-interface

Question

I am pretty new in Dart Flutter.
I have this problem I follow the guide to creating a tab bar,
But is at the top, what I am trying to achieve is to have the tab
at the bottom instead of at the top.
I have already tried BottomNavigationBar and change all,
but didn't work and crash all the app.
Please help me thanks
child: Scaffold(
body: DefaultTabController(
length: 5,
initialIndex: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: primaryColor,
automaticallyImplyLeading: false,
title: TabBar(
labelColor: Colors.white,
indicatorColor: Colors.white,
unselectedLabelColor: Colors.black,
isScrollable: false,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
icon: Icon(
Icons.person,
size: 30,
),
),
Tab(
icon: Icon(
Icons.group,
),
),
Tab(
icon: Icon(
Icons.whatshot,
),
),
Tab(
icon: Icon(
Icons.notifications,
),
),
Tab(
icon: Icon(
Icons.message,
),
)
]),
),
body: TabBarView(
children: [
Center(child: Profile(currentUser)),
Center(child: Chanels()),
Center(child: CardPictures(currentUser, users)),
Center(child: Notifications(currentUser, notification)),
Center(child: HomeScreen(currentUser, matches)),
],
physics: NeverScrollableScrollPhysics(),
)),
),
),

Answer 1

You can use BottomNavigationBar() in this way.
You need to manage everything ( like listening to tab events and rendering page accordingly).
Prototype:
class _TabsScreenState extends State<TabsScreen> {
final var _pages = [Screen1(),Screen2()];
int page_index = 0;
void _pageSelect(int index) {
setState(() {
page_index = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(),
),
body: _pages[page_index],
bottomNavigationBar: BottomNavigationBar(
onTap: _pageSelect,
backgroundColor: '',
unselectedItemColor: '',
selectedItemColor: '',
currentIndex: page_index,
items: [
BottomNavigationBarItem(
backgroundColor: '',
icon: Icon(''),
title: Text(''),
),
BottomNavigationBarItem(
backgroundColor: '',
icon: Icon('),
title: Text(''),
),
],
),
);
}
}

Answer 2

To change the tab bar from the top to bottom we have to customize the default tab bar in flutter using TabController. Here is an example :
import "package:flutter/material.dart";
import 'package:hexcolor/hexcolor.dart';
import 'LineChart.dart';
import 'LineChart1.dart';
class PortfolioGraph extends StatefulWidget {
#override
_PortfolioGraphState createState() => _PortfolioGraphState();
}
class _PortfolioGraphState extends State<PortfolioGraph> with TickerProviderStateMixin {
int _currentindex = 0;
List<Widget> _tabList = [
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
Container(
alignment: Alignment.bottomCenter,
child:LineChartSample2()),
];
TabController _tabController;
#override
void initState(){
super.initState();
_tabController = TabController(vsync:this,length: 7);
}
#override
void dispose(){
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
child:Column(
children: [
Container(
height: 270,
width:size.width,
child:TabBarView(
controller: _tabController,
children:_tabList
),
),
Container(
alignment: Alignment.topLeft,
child: Container(
height: 50,
width:size.width,
child: Container(
child: Scaffold(
appBar: AppBar(
toolbarHeight: 50,
// leadingWidth: 10,
backgroundColor: Colors.white,
elevation: 0,
titleSpacing: 0,
centerTitle: false,
bottom: PreferredSize(
preferredSize: Size.fromHeight(40),
child: Align(
alignment: Alignment.center,
child: TabBar(
controller: _tabController,
indicatorColor: HexColor("#199C78"),
indicatorWeight: 4,
unselectedLabelColor: HexColor("#8C8C8C"),
labelColor:HexColor("#3A3A3A"),
labelPadding: EdgeInsets.only(left: 0, right: 0),
labelStyle: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),
unselectedLabelStyle: TextStyle(fontSize: 14),
isScrollable: false,
tabs: [
Tab(child:Container(
child: Text("1D"),
)),
Tab(child:Container(
child: Text("1W"),
)),
Tab(child:Container(
child: Text("1M"),
)),
Tab(child:Container(
child: Text("3M"),
)),
// SizedBox(width:10),
Tab(child:Container(
child: Text("6M"),
)),
Tab(child:Container(
child: Text("1YR"),)),
Tab(child:Container(
child: Text("All"),))
],
),
),
),
),
),
),
),
)
],
)
);
}
}

Answer 3

If you know how to use a tab bar then its simple for you. For your need you can use tab bar in any row column in any way it's up to you.You just need to provide controller to both tab bar and tabBarView and both these controller must be same irrespective of how you use tab bar.You can put tab-bar in almost any widget I have done it myself and put it in a row.