[Flutter] How to remove the first screen from route in Flutter?

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??

Continue reading...