Flutter conditional rendering of screen

Viewed 1306

I am trying to achieve the conditional showing of the screen when the app opens.

In main.dart

return Materialapp(
  ...
  home: WelcomePage()
  ...
);

In WelcomePage.dart

isLoggedin() async {
  prefs = await SharedPreferences.getInstance();
  if (prefs.getString('username') == null) {
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (BuildContext context) => LoginPage()),
      (Route<dynamic> route) => false);
  }
}

Issue: - The user will open the app, after the splash screen, the WelcomePage screen will show momentarily then redirects the user to Login screen.

This code does what I needed, but what I really want. What I want is the app will not show the WelcomePage screen if the user has no saved preference in the app, instead, there is a code that checks whether the app will show the Login screen or the WelcomePage screen.

UPDATE

First, I really appreciate the answers given. It is both helpful but I think the other answer is the one I am thinking of. But I do it the way like this:

main.dart

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  SharedPreferences prefs = await SharedPreferences.getInstance();

  _username = prefs.getString("username");
  ...
} 

return Materialapp(
  ...
  home: _username == null ? LoginPage() : WelcomePage()
  ...
);

I don't think if it is one of the right way to do this. Any comments/suggestions will be appreciated.

2 Answers

You can check username in main() and use initialRoute to decide which page to go
so you won't go to WelcomePage screen every time

initialRoute: username == null ? "/welcome" : "/login",

code snippet

String username;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  SharedPreferences prefs = await SharedPreferences.getInstance();

  username = await prefs.getString("username");   
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: username == null ? "/welcome" : "/login",
      routes: {
        '/login': (context) => LoginPage(
              title: "demo",
            ),
        "/welcome": (context) => WelcomePage(),
      },
    );
  }
}

So from my understanding you are trying to make sure after the splash screen the user is redirected to the appropriate page if user exits in shared preference. so what you can do is to put the isLoggedin method in you splash screen page... less typing .. check out the sample code. So the timer is how long the splash screen should last

@override
  void initState() {
    super.initState();
    loadData();
  }

  Future<Timer> loadData() async {
    return new Timer(Duration(seconds: 5), isLoggedin());
  }

isLoggedin() async {
  prefs = await SharedPreferences.getInstance();
  if (prefs.getString('username') == null) {
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (BuildContext context) => LoginPage()),
      (Route<dynamic> route) => false);
  }
}

so in you splash screen page you can do this... add a timer and when the timer is done execute to check for user

Related