title: Implementing Multiple Pages into a Single Page using Navigation and a Stack
body: <p>In Flutter, I want to make screens like with <code>Fragment</code> in android, in this my code i try to replace each screens into current screen like with <code>Fragment.replecae</code> in android, i used <code>Hook</code> and <code>Provider</code> and my code work fine when in click on buttons to switch between them but i can't implementing back stack, which means when i click on <code>Back</code> button on phone, my code should show latest screen which i stored into <code>_backStack</code> variable, each swtich between this screens i stored current screen index into the this variable.</p>
  
  <p>how can i solve back from this stack in my sample code?</p>
  
  <pre><code>// Switch Between screens:
  DashboardPage(), UserProfilePage(), SearchPage()
  -------------&gt;   -------------&gt;     -------------&gt;
  </code></pre>
  
  <pre><code>// When back from stack:
                        DashboardPage(), UserProfilePage(), SearchPage()
  Exit from application &lt;--------------  &lt;----------------  &lt;-----------
  </code></pre>
  
  <p>i used <code>Hook</code> and i want to implementing this action with this library features</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'dart:async';
  
  import 'package:flutter/material.dart';
  import 'package:flutter_hooks/flutter_hooks.dart';
  import 'package:provider/provider.dart';
  
  void main() {
    WidgetsFlutterBinding.ensureInitialized();
    runApp(MultiProvider(providers: [
      Provider.value(value: StreamBackStackSupport()),
      StreamProvider&lt;homePages&gt;(
        create: (context) =&gt;
            Provider.of&lt;StreamBackStackSupport&gt;(context, listen: false)
                .selectedPage,
      )
    ], child: StartupApplication()));
  }
  
  class StartupApplication extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'BackStack Support App',
        home: MainBodyApp(),
      );
    }
  }
  
  class MainBodyApp extends HookWidget {
    final List&lt;Widget&gt; _fragments = [
      DashboardPage(),
      UserProfilePage(),
      SearchPage()
    ];
    List&lt;int&gt; _backStack = [0];
    int _currentIndex = 0;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('BackStack Screen'),
        ),
        body: WillPopScope(
          // ignore: missing_return
          onWillPop: () {
            customPop(context);
          },
          child: Container(
            child: Column(
              children: &lt;Widget&gt;[
                Consumer&lt;homePages&gt;(
                  builder: (context, selectedPage, child) {
                    _currentIndex = selectedPage != null ? selectedPage.index : 0;
                    _backStack.add(_currentIndex);
                    return Expanded(child: _fragments[_currentIndex]);
                  },
                ),
                Container(
                  width: double.infinity,
                  height: 50.0,
                  padding: const EdgeInsets.symmetric(horizontal: 15.0),
                  color: Colors.indigo[400],
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: &lt;Widget&gt;[
                      RaisedButton(
                        onPressed: () =&gt; Provider.of&lt;StreamBackStackSupport&gt;(
                                context,
                                listen: false)
                            .switchBetweenPages(homePages.screenDashboard),
                        child: Text('Dashboard'),
                      ),
                      RaisedButton(
                        onPressed: () =&gt; Provider.of&lt;StreamBackStackSupport&gt;(
                                context,
                                listen: false)
                            .switchBetweenPages(homePages.screenProfile),
                        child: Text('Profile'),
                      ),
                      RaisedButton(
                        onPressed: () =&gt; Provider.of&lt;StreamBackStackSupport&gt;(
                                context,
                                listen: false)
                            .switchBetweenPages(homePages.screenSearch),
                        child: Text('Search'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  
    void navigateBack(int index) {
      useState(() =&gt; _currentIndex = index);
    }
  
    void customPop(BuildContext context) {
      if (_backStack.length - 1 &gt; 0) {
        navigateBack(_backStack[_backStack.length - 1]);
      } else {
        _backStack.removeAt(_backStack.length - 1);
        Provider.of&lt;StreamBackStackSupport&gt;(context, listen: false)
            .switchBetweenPages(homePages.values[_backStack.length - 1]);
        Navigator.pop(context);
      }
    }
  }
  
  class UserProfilePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        alignment: Alignment.center,
        child: Text(' screenProfile ...'),
      );
    }
  }
  
  class DashboardPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        alignment: Alignment.center,
        child: Text(' screenDashboard ...'),
      );
    }
  }
  
  class SearchPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        alignment: Alignment.center,
        child: Text(' screenSearch ...'),
      );
    }
  }
  
  enum homePages { screenDashboard, screenProfile, screenSearch }
  
  class StreamBackStackSupport {
    final StreamController&lt;homePages&gt; _homePages = StreamController&lt;homePages&gt;();
  
    Stream&lt;homePages&gt; get selectedPage =&gt; _homePages.stream;
  
    void switchBetweenPages(homePages selectedPage) {
      _homePages.add(homePages.values[selectedPage.index]);
    }
  
    void close() {
      _homePages.close();
    }
  }
  
  </code></pre>