Flutter how to display different tabBars for different screens? - dart

Question

So In my app, there are three screens which can be navigated using a bottom bar, now for each of the three screens I want to display different navigation Tab bar but the same appBar,
what I tried is to use index of the list which contains elements of bottom bar and then returns a tabBar widget for each index but I end up with an error MyAppState is a SingleTickerProviderStateMixin but multiple tickers were created. and I have no idea what it is!
I really need to fix this please guide me with the sol or suggest if there is any other way to achieve this.
main.dart
import 'package:flutter/material.dart';
import 'journal/view/journal_lists.dart';
import 'todo/view/master_list.dart';
import 'mood_checker/view/mood.dart';
import 'journal/view/journal.dart';
Color primary = Color(0xFF3366FF);
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Mentor101',
home: MyApp(),
theme: ThemeData(
primaryColor: primary,
fontFamily: 'Poppins',
textTheme: TextTheme(
headline: TextStyle(
fontSize: 36, fontWeight: FontWeight.w600, color: Colors.white),
)),
));
}
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
//for bottom tab
int currentIndex = 0;
final _screens = [Journal(), MasterList(), MoodChecker()];
// for Tab Bar
TabController todoTabCon;
TabController moodTabCon;
TabController journalTabCon;
#override
void initState() {
super.initState();
todoTabCon = TabController(vsync: this, length: 3);
moodTabCon = TabController(vsync: this, length: 2);
journalTabCon = TabController(vsync: this, length: 2);
}
#override
void dispose() {
todoTabCon.dispose();
moodTabCon.dispose();
journalTabCon.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: myAppBar(context, 'ProApp'),
drawer: mainDrawer(context),
body: mainBody(),
bottomNavigationBar: myBottomBar(),
);
}
// ---------------------------------APP BAR STARTS-------------------------------//
Widget myAppBar(BuildContext context, String title) {
return AppBar(
centerTitle: true,
title: Text(
title,
style: Theme.of(context).textTheme.headline,
),
backgroundColor: Theme.of(context).primaryColor,
bottom: getTabBar(),
);
}
// ---------------------------------APP BAR ENDS-------------------------------//
// The problematic code
// to get a tabBar for different screens
Widget getTabBar() {
switch (currentIndex) {
case 0:
return journalTabBar();
break;
case 1:
return todoTabBar();
break;
case 2:
return moodTabBar();
break;
default:
}
}
//------------------------Tab Bars--------------------------//
Widget todoTabBar() {
return TabBar(
controller: todoTabCon,
tabs: <Widget>[
Tab(child: Text('MasterList')),
Tab(child: Text('DailyList')),
Tab(child: Text('MonthlyList')),
],
);
}
Widget moodTabBar() {
return TabBar(
controller: moodTabCon,
tabs: <Widget>[
Tab(child: Text('Checker')),
Tab(child: Text('Review')),
],
);
}
Widget journalTabBar() {
return TabBar(
controller: journalTabCon,
tabs: <Widget>[
Tab(child: Text('Journal')),
Tab(child: Text('Entries List')),
],
);
}
// ------------------------------Bottom BAR STARTS-------------------------------//
Widget myBottomBar() {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
fixedColor: primary,
currentIndex: currentIndex,
onTap: _onitemTapped,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('Journal')),
BottomNavigationBarItem(
icon: Icon(Icons.view_list), title: Text('Todos')),
BottomNavigationBarItem(icon: Icon(Icons.mood), title: Text('Chart')),
],
);
}
void _onitemTapped(int index) {
setState(() {
currentIndex = index;
});
}
//Body starts----------
Widget mainBody() {
return _screens.elementAt(currentIndex);
}
// Body Ends---------
Error
(have to cut some part from the bottom due to StackOverflow body length limit(3000 words)
I/flutter (20666): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (20666): The following assertion was thrown building Builder:
I/flutter (20666): _MyAppState is a SingleTickerProviderStateMixin but multiple tickers were created.
I/flutter (20666): A SingleTickerProviderStateMixin can only be used as a TickerProvider once. If a State is used for
I/flutter (20666): multiple AnimationController objects, or if it is passed to other objects and those objects might
I/flutter (20666): use it more than one time in total, then instead of mixing in a SingleTickerProviderStateMixin, use
I/flutter (20666): a regular TickerProviderStateMixin.
I/flutter (20666):
I/flutter (20666): When the exception was thrown, this was the stack:
I/flutter (20666): #0 __MyAppState&State&SingleTickerProviderStateMixin.createTicker.<anonymous closure> (package:flutter/src/widgets/ticker_provider.dart:85:7)
I/flutter (20666): #1 __MyAppState&State&SingleTickerProviderStateMixin.createTicker (package:flutter/src/widgets/ticker_provider.dart:92:6)
I/flutter (20666): #2 new AnimationController (package:flutter/src/animation/animation_controller.dart:244:21)
I/flutter (20666): #3 new TabController (package:flutter/src/material/tab_controller.dart:86:50)
I/flutter (20666): #4 _MyAppState.initState (package:pro_app/main.dart:46:18)
I/flutter (20666): #5 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3846:58)
I/flutter (20666): #6 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #7 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #8 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #9 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #10 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #11 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #12 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #13 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #14 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #15 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #16 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #17 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #18 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #19 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #20 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #21 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #22 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #23 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #24 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #25 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #26 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #27 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #28 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #29 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #30 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #31 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #32 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #33 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #34 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #35 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #36 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #37 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #38 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #39 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #40 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #41 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #42 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #43 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #44 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #45 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #46 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #47 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #48 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #49 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #50 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #51 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #52 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #53 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #54 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #55 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #56 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #57 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #58 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #59 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #60 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #61 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #62 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #63 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #64 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #65 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #66 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #67 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #68 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #69 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #70 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #71 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #72 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #73 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #74 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #75 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14)
I/flutter (20666): #76 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #77 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #78 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #79 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #80 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #81 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #82 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #83 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #84 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter (20666): #85 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter (20666): #86 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter (20666): #87 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter (20666): #88 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter (20666): #89 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter (20666): #90 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter (20666): #91 ComponentElement.performRebuild...

Answer 1

One of the correct ways to create tabs would be specifying your routes in your main.dart, like this:
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Home(),
routes: <String, WidgetBuilder>{
"/tabs": (BuildContext context) => new Tabs(),//add your route
Now you need to create your tabs.dart file, with the corresponding Class Tabs(), as the following:
import 'package:YOURPROYECT/FOLDER/file.dart' as first; //here is your 1st tab
import 'package:YOURPROYECT/FOLDER/file.dart' as second;//and your second
//you can add more tabs, as third or fouth, see UI/UX what they recommend.
class Tabs extends StatefulWidget {
#override
MyTabsState createState() => new MyTabsState();
}
class MyTabsState extends State<Tabs> with SingleTickerProviderStateMixin {
TabController controller;
#override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: new Material(
color: color_appbar,
child: new TabBar(
controller: controller,
tabs: <Tab>[
new Tab(icon: new Icon(Icons.home,)),
new Tab(icon: new Icon(Icons.search)),
new Tab(icon: new Icon(Icons.notifications)),
]
)
),
body: new TabBarView(
controller: controller,
children: <Widget>[
new first.Home(),
new second.Search(),
new fourth.Notifications(),
new FutureBuilder(
//you can continous with you code
You must create a file for each tab, with the corresponding class,
for example for the Search() Class you can start like this.
import 'package:YOURPROYECT/Estilo.dart';
import 'package:flutter/material.dart';
class Search extends StatelessWidget {
#override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text("Search"),
//you can continous
I hope I helped you.