Search code examples
flutterflutter-navigation

Flutter navigation removing in between routes


In my flutter app I want to remove in between routes so when the user press back it will go the previous to previous screen. following is my screen flow.

  1. Dashboard landing screen.
  2. User clicks on the List Topic button and lands on List of Topics page.
  3. User clicks on Create New Topic and lands on new page with form to fill with basic info for the topic.
  4. After filling the form user clicks on the save button and lands on the new page with the topic details he just created.
  5. Now if user clicks back, he/she should land on List of Topics page instead of Create New Topic page.
  6. Also if he press back again form the List of Topics page, he should see the dashboard instead of exiting the app.

Thanking you in advance.


Solution

  • Just use pushReplacement instead of push, when you whant to skip the page at going back.

    enter image description here

    import 'dart:math';
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter naviagtion',
          theme: ThemeData(
            backgroundColor: Colors.white,
            primarySwatch: Colors.green,
          ),
          home: DashboardLandingScreen(),
        );
      }
    }
    
    class DashboardLandingScreen extends StatelessWidget {
      static Route route() => MaterialPageRoute(
            builder: (context) => DashboardLandingScreen(),
          );
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Dashboard landing screen.'),
                RaisedButton(
                  child: Text('List of Topics'),
                  onPressed: () => Navigator.of(context).push(
                    TopicsListScreen.route(),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    class TopicsListScreen extends StatelessWidget {
      static Route route() => MaterialPageRoute(
            builder: (context) => TopicsListScreen(),
          );
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('List of Topics'),
                RaisedButton(
                  child: Text('Create New Topic'),
                  onPressed: () => Navigator.of(context).push(
                    NewTopic.route(),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    class NewTopic extends StatelessWidget {
      static Route route() => MaterialPageRoute(
            builder: (context) => NewTopic(),
          );
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('page: new topic'),
                RaisedButton(
                  child: Text('Save'),
                  onPressed: () => Navigator.of(context).pushReplacement(
                    CreatedTopicDetails.route(),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    class CreatedTopicDetails extends StatelessWidget {
      static Route route() => MaterialPageRoute(
            builder: (context) => CreatedTopicDetails(),
          );
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            alignment: Alignment.center,
            child: Text('page: created topic details'),
          ),
        );
      }
    }