How to add Tabs Top side and Bottom side both in flutter - flutter

Question

Top Tabs Shows Only HomePage and they show 3 different page via Scrolling or tapping, and bottom tabs for whole Apps like menu.
when i code written then i get views like below images, but i cant tap or redirect page.
navigation code i only given top or bottom tabs not both tabs.
homePage.dart
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
TabController tabController;
//TabController bottomController;
Icon searchBtn = new Icon(Icons.search);
Widget appBarTitle = new Text('Invoices');
#override
void initState(){
super.initState();
tabController = new TabController(vsync: this, length: 3);
//bottomController = new TabController(vsync: this, length: 4);
}
#override
void dispose(){
tabController.dispose();
//bottomController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return new MaterialApp(
color: Colors.purpleAccent,
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 3,
child:Scaffold(
appBar: new AppBar(
centerTitle: false,
title: appBarTitle,
backgroundColor: Color(0xFF832685),
actions: <Widget>[
new IconButton(
icon: searchBtn,
onPressed: (){
setState(() {
if(this.searchBtn.icon == Icons.search){
this.searchBtn = new Icon(Icons.close);
this.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
//fillColor: Colors.white,
border: InputBorder.none,
// focusedBorder: OutlineInputBorder(
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
// borderSide: BorderSide(color: Colors.white)),
filled: true,
prefixIcon: new Icon(Icons.search,
color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white),
),
);
}
else{
this.searchBtn = new Icon(Icons.search);
this.appBarTitle = new Text('Invoices');
}
});
},
)
],
bottom: new TabBar(
indicatorColor: Color(0xFF832685),
controller: tabController,
tabs: <Tab>[
new Tab(text: 'Unpaid'.toUpperCase(),),
new Tab(text: 'Draft'.toUpperCase(),),
new Tab(text: 'All'.toUpperCase(),),
],
),
),
//bottomNavigationBar: BottomNavBar(),
//bottomNavigationBar: _BottomBar(),
// bottomNavigationBar: new TabBar(
// indicatorColor: Color(0xFF832685),
// labelColor: Color(0xFF832685),
// //controller: bottomController,
// tabs: <Tab>[
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// new Tab(icon: new Icon(Icons.home),text: 'Home',),
// ],
// ),
body: new TabBarView(
controller: tabController,
children: <Widget>[
new first.UnpaidInvoicePage(),
new second.PaidInvoicePage(),
new third.AllInvoicePage(),
],
),
//body: Container(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
tooltip: 'New Invoice',
backgroundColor: Color(0xFF832685),
onPressed: (){
//Navigator.of(context).pushNamed('NewInvoicePage');
Navigator.push(context, MaterialPageRoute(builder: (context) => NewInvoicePage()));
},
),
),
),
);
}
}
Thank you !

Answer 1

Try this
import 'package:flutter/material.dart';
void main() => runApp(HomeScreen());
class HomeScreen extends StatefulWidget {
#override
_HomeScreenPage createState() => _HomeScreenPage();
}
class _HomeScreenPage extends State<HomeScreen>
with SingleTickerProviderStateMixin {
TabController tabController;
String title = "Home";
#override
void initState() {
super.initState();
tabController = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
brightness: Brightness.light,
accentColor: Colors.red),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
home: new Scaffold(
appBar: AppBar(
title: Text(title),
centerTitle: true,
),
body: TabBarView(
children: <Widget>[
FirstTab(),
MyBody("Page Two"),
MyBody("Page Three")
],
// if you want yo disable swiping in tab the use below code
// physics: NeverScrollableScrollPhysics(),
controller: tabController,
),
bottomNavigationBar: Material(
color: Colors.purple,
child: TabBar(
onTap: (indedx) {
if (indedx == 0) {
setState(() {
title = "Home";
});
} else if (indedx == 1) {
setState(() {
title = "Tab Two";
});
} else if (indedx == 2) {
setState(() {
title = "Tab Three";
});
}
},
indicatorColor: Colors.blue,
unselectedLabelColor: Colors.grey,
tabs: <Widget>[
Tab(
icon: Icon(Icons.favorite_border),
text: "ONE",
),
Tab(
icon: Icon(Icons.favorite),
text: "TWO",
),
Tab(
icon: Icon(Icons.add_box),
text: "THREE",
),
],
controller: tabController,
),
),
));
}
}
class FirstTab extends StatefulWidget {
#override
FirstTabState createState() => FirstTabState();
}
class FirstTabState extends State<FirstTab>
with SingleTickerProviderStateMixin {
TabController tabController;
#override
void initState() {
super.initState();
tabController = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
height: 50.0,
child: new TabBar(
indicatorColor: Colors.blue,
unselectedLabelColor: Colors.grey,
labelColor: Colors.blue,
tabs: [
Tab(
text: "ONE",
),
Tab(
text: "TWO",
),
Tab(
text: "THREE",
),
],
),
),
),
body: TabBarView(
children: [
Text("TAB ONE CONTENT"),
Text("TAB TWO CONTENT"),
Text("TAB THREE CONTENT"),
],
),
),
);
}
}
class MyBody extends StatelessWidget {
final String title;
MyBody(this.title);
final mySnackBar = SnackBar(
content: Text(
"Hello There!",
style: TextStyle(color: Colors.white),
),
duration: Duration(seconds: 3),
backgroundColor: Colors.blue,
);
#override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text(title + " Click me"),
onPressed: () => {Scaffold.of(context).showSnackBar(mySnackBar)}),
],
),
);
}
}
OUTPUT

Answer 2

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
int tabIndex = 0;
TabController tabController;
String title = "Home";
#override
void initState() {
super.initState();
tabController = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
height: 50.0,
child: new TabBar(
indicatorColor: Colors.blue,
unselectedLabelColor: Colors.grey,
labelColor: Colors.blue,
tabs: [
Tab(
text: "Home",
),
Tab(
text: "Mail",
),
Tab(
text: "Profile",
),
],
),
),
),
body: TabBarView(
children: [
MyHomeScreen(),
MailScreen(),
ProfileScreen(),
],
),
),
);
}
}
class MyHomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: NestedTabBar()
),
);
}
}
class NestedTabBar extends StatefulWidget {
#override
_NestedTabBarState createState() => _NestedTabBarState();
}
class _NestedTabBarState extends State<NestedTabBar> with TickerProviderStateMixin {
int tabIndex=0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: tabIndex ==0 ?BottomTabBarHome()
:tabIndex == 1? BottomTabBarMail(): BottomTabBarProfile()
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.grey,),
activeIcon: Icon(Icons.home, color: Colors.blue,),
title: Text('')
),
BottomNavigationBarItem(
icon: Icon(Icons.mail, color: Colors.grey,),
activeIcon: Icon(Icons.mail, color: Colors.blue,),
title: Text('')
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle, color: Colors.grey,),
activeIcon: Icon(Icons.account_circle, color: Colors.blue,),
title: Text('')
)
],
currentIndex: tabIndex,
selectedItemColor: Colors.blueAccent,
onTap: (int index){
setState(() {
tabIndex = index;
});
},
),
);
}
}
class BottomTabBarHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text("Bottom Tab Bar Home Screen"),
),
);
}
}
class BottomTabBarMail extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text("Bottom Tab Bar Mail Screen"),
),
);
}
}
class BottomTabBarProfile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text("Bottom Tab BarM Profile Screen"),
),
);
}
}
Oh! you got your answer, but i also tried :)
Look: