Flutter Routes Emulators keeps rendering '/' instead of InitialRoute

Question

New to Flutter. Here is the content of my main page:

void main() => runApp(MaterialApp(
  initialRoute: '/location',
  routes: {
    '/': (context)=> Loading(),
    '/location': (context)=> Location(),
    '/home': (context)=> Home(),
  },
));

Consider that in my '/': (context)=> Loading(), there is a function that is executed in initState at the end of which it redirects to '/home', but as you can see in my main.dart I set the initial route to '/location' so the emulators is not supposed to open the loading file in order to be redirected to the home file, however it keeps happening. When I clean & run my emulator, it opens on the location file and then somehow the function in the loading file gets executed which takes me back to the home file.

I do not know if I am making sense, please let me know if you have a hard time understanding.

Optional, here is my loading.dart function:

class _LoadingState extends State<Loading> {
  String time;

  void fetchIt() async {
    final WorldTimeClass defaultinstance = WorldTimeClass(flag: 'Algiers', url: 'Africa/Algiers', location: 'Algiers');
    DateTime getTimeFormat = await defaultinstance.getTimeFormat();
    await defaultinstance.getTimeHumanFormat(getTimeFormat);
    // here the navigator to home.dart
    await Navigator.pushReplacementNamed(context, '/home', arguments: {
      'location': defaultinstance.location,
      'time': defaultinstance.time,
      'isDayTime': defaultinstance.isDayTime
    });
  }
  @override
  void initState() {
    time = 'loading...';
    super.initState();
    fetchIt(); // here the function executed
  }
...

Kindly, explain to me why is this happening?

Answer 1

the route represented by '/' must be your initial route that is the screen that you want to show when your app is started . Otherwise if you use '/' for any other screen , that screen will run behind the scenes . Use the code below as an example . I want to show Page 2 as the home screen that is why I have set initial route to '/' and

'/':(BuildContext ctx)=>Page2()

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// import 'package:path_provider/path_provider.dart';

void main() => runApp(Example());

class Example extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(

      title: "Example",
      initialRoute: '/',
      routes: {
         '/':(BuildContext ctx)=>Page2(),
        '/page1':(BuildContext ctx)=>Page1(),
        '/page3':(BuildContext ctx)=>Page3()

      },

    );
  }
}

class Page1 extends StatefulWidget{
  Page1State createState()=> Page1State();

}

class Page1State extends State<Page1> {

  @override
  void initState() {
    super.initState();
    timerFunction();

  }

  Timer timerFunction(){

    return new Timer(Duration(seconds: 3),handleTimeout);
}

handleTimeout(){
   Navigator.pushNamed(context, '/page3');
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: Text("Page1"),
      ),
    );
  }


}

class Page2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body:Container(
        alignment: Alignment.center,
        child :Column(

        children:<Widget>[
          Padding(padding: EdgeInsets.only(top: 100)),
          Text("Page2"),
          RaisedButton(
            child: Text("go to page1"),
            onPressed: ()=>Navigator.pushNamed(context, '/page1'),
          )

        ]
      ),
      ),
    );
  }

}
class Page3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: Text("Page3"),
      ),
    );
  }


}

Answer 2

I solved this by changing -in the routes: argument- :

'/home' to 'home',

'/location' to 'location', and

kept '/' as is.

I do not know why this solved the problem but, it works now.

Answer 3

First, try to restart the app by re-running flutter run