Flutter, setting screens with multiple stacks

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,
        ),
      ),
    );
  }
}