How To Set Default Page Conditionally In Flutter

Introduction

 

In this article, we will learn how to set a default page conditionally in Flutter. This is a very important concept for app development. We will use sharedPreferences to make the condition for the page on which we will want to navigate. If you are new to Flutter and don’t know about shared preferences, then check out my another article SharedPreferences In Flutter. So, let’s start with the scenario.

 

Scenario

 

So now, let's take an example. Suppose you have an app in which you need authentication from the user, for, let’s say, Google or Facebook authentication. After authentication, you navigate to the home page. When the user first time authenticates and goes to the home page, it’s all working well but when the user closes the app and starts the app again, he/she needs to authenticate himself/herself again which is not a good idea. In this case, we need to bypass the authentication process and directly redirect this user to the home page. So, we need conditional navigation.

 

Programming

 

Below is the program for conditional navigation.

 

_decideMainPage() will conditionally navigate to home or registration page.

import 'package:flutter/material.dart';
import 'package:flutter_chat_app/pages/home_page.dart';
import 'package:flutter_chat_app/pages/registration_page.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  SharedPreferences.getInstance().then((prefs) {
    runApp(LandingPage(prefs: prefs));
  });
}

class LandingPage extends StatelessWidget {
  final SharedPreferences prefs;
  LandingPage({this.prefs});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: _decideMainPage(),
    );
  }

  _decideMainPage() {
    if (prefs.getBool('is_verified') != null) {
      if (prefs.getBool('is_verified')) {
        return HomePage(prefs: prefs);
        // return RegistrationPage(prefs: prefs);
      } else {
        return RegistrationPage(prefs: prefs);
      }
    } else {
      return RegistrationPage(prefs: prefs);
    }
  }
}

Conclusion

 

In this article, we have learned how to conditionally navigate to default page in Flutter.