How to remove the first screen from route in Flutter?

Question

I am creating a loading screen for an app. This loading screen is the first screen to be shown to the user. After 3 seconds the page will navigate to the HomePage. everything is working fine. But when the user taps back button the loading screen will be shown again.

FIRST PAGE CODE

import 'dart:async';
import 'package:flutter/material.dart';
import 'home_page.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    Future.delayed(
        Duration(
          seconds: 3,
        ), () {
      // Navigator.of(context).pop(); // THIS IS NOT WORKING
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => HomePage(),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlutterLogo(
          size: 400,
        ),
      ),
    );
  }
}

HOMEPAGE CODE

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('HomePage'),
        ),
      ),
    );
  }
}

I tried to add Navigator.of(context).pop(); before calling the HomePage but that is not working. This will show a blank black screen.

Any ideas??

Answer 1

You need to use pushReplacement instead of the push method.

To solve your problem just replace this code:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => HomePage(),
  ),
);

with this:

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => HomePage(),
  ),
);

Answer 2

Yes, I found the same problem as you. The problem with replace is that it only works once, but I don't know why it doesn't work as it should. For this after a few attempts, I read the official guide and this method exists: pushAndRemoveUntil (). In fact, push on another widget and at the same time remove all the widgets behind, including the current one. You must only create a one Class to management your root atrough the string. This is the example:

class RouteGenerator {
  static const main_home= "/main";


  static Route<dynamic> generatorRoute(RouteSettings settings) {
  final args = settings.arguments;

  switch (settings.name) {

  case main_home:
    return MaterialPageRoute(builder: (_) => MainHome());
    break;

  }
 }
}

This class must be add to the Main in:

MaterialApp( onGenerateRoute: ->RouteGenerator.generatorRoute)

Now to use this method, just write:

 Navigator.of(context).pushNamedAndRemoveUntil(
              RouteGenerator.main_home,
              (Route<dynamic> route) => false
            );