Flutter, setting screens with multiple stacks - flutter

Question

I am using the method of creating multiple stacks with the bottom navigation bar outline at the article here.
It all works well but as there are a few techniques I'm not aware of in the method I'm struggling to find a way to navigate in my app.
I'm just trying to create a screen for profile which has a button that takes you back to feed. As there are some fancy things done in the tab_navigator I'm not sure how to do this. Can anyone help?
The tab navigator code is below.
import 'package:flutter/material.dart';
import 'package:highline_app/bottom_navigation.dart';
import 'package:highline_app/color_detail_page.dart';
import 'package:highline_app/colors_list_page.dart';
import 'package:highline_app/pages/feed.dart';
class TabNavigatorRoutes {
static const String root = '/';
static const String detail = '/detail';
static const String feed = '/feed';
static const String profile = '/profile';
}
class TabNavigator extends StatelessWidget {
TabNavigator({this.navigatorKey, this.tabItem});
final GlobalKey<NavigatorState> navigatorKey;
final TabItem tabItem;
void _push(BuildContext context, {int materialIndex: 500}) {
var routeBuilders = _routeBuilders(context, materialIndex: materialIndex);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => routeBuilders[TabNavigatorRoutes.detail](context),
),
);
}
Map<String, WidgetBuilder> _routeBuilders(BuildContext context,
{int materialIndex: 500}) {
return {
TabNavigatorRoutes.feed: (context) => NewsFeed(),
TabNavigatorRoutes.root: (context) => ColorsListPage(
color: activeTabColor[tabItem],
title: tabName[tabItem],
onPush: (materialIndex) =>
_push(context, materialIndex: materialIndex),
),
TabNavigatorRoutes.detail: (context) => ColorDetailPage(
color: activeTabColor[tabItem],
title: tabName[tabItem],
materialIndex: materialIndex,
),
};
}
#override
Widget build(BuildContext context) {
final routeBuilders = _routeBuilders(context);
return Navigator(
key: navigatorKey,
initialRoute: TabNavigatorRoutes.root,
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(
builder: (context) => routeBuilders[routeSettings.name](context),
);
},
);
}
}

Answer 1

Actually, you don't need to use Navigator. I advise you keep it simple. You can do this with TabController. You can check following code to navigate between Pages or Tabs whatever you need.
import 'package:flutter/material.dart';
void main() => runApp(TabLayoutDemo());
class TabLayoutDemo extends StatefulWidget {
#override
_TabLayoutDemoState createState() => _TabLayoutDemoState();
}
class _TabLayoutDemoState extends State<TabLayoutDemo>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 4);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
color: Colors.yellow,
home: DefaultTabController(
length: 4,
child: Scaffold(
body: TabBarView(
controller: _tabController,
children: [
Container(
color: Colors.yellow,
),
Container(
color: Colors.orange,
),
// Feed Page.
Container(
color: Colors.lightGreen,
),
// Profile Page.
Container(
color: Colors.red,
child: Padding(
padding: EdgeInsets.only(top: 15.0),
child: SizedBox(
width: double.infinity,
child: RaisedButton.icon(
icon: Icon(Icons.arrow_back),
textColor: Colors.white,
color: Colors.lightBlue,
label: Text('Go To Feed Tab'),
onPressed: () {
setState(() {
_tabController.index = 2;
});
},
)),
),
),
],
),
bottomNavigationBar: TabBar(
controller: _tabController,
tabs: [
Tab(
icon: Icon(Icons.home),
),
Tab(
icon: Icon(Icons.settings),
),
// Here is feed tab button.
Tab(
icon: Icon(Icons.rss_feed),
),
// Here is profile tab button.
Tab(
icon: Icon(Icons.perm_identity),
),
],
labelColor: Colors.yellow,
unselectedLabelColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.red,
),
backgroundColor: Colors.black,
),
),
);
}
}