Dynamically decide the home page shown to a user in a Flutter App based on some authentication logic.

Dynamic Home Route in a Flutter App

Ravgeet Dhillon

Ravgeet Dhillon

Written on Jan 09, 2021 in Development

⏱ 4 min read

Blog banner for Dynamic Home Route in a Flutter App

In any production app, the user is directed to a route based on some authentication logic whenever the app is opened. For example, in your Flutter App, you have at least two routes, Login and Dashboard. The problem is how can you decide which route should a user be redirected to?

In this tutorial, you’ll check the value of a locally stored boolean variable to dynamically decide the home route. You can use any method for writing your authentication logic, like checking the validity of the API token, but for the sake of simplicity, you’ll explore a simple logic.

Flutter Dynamic Home Route
Flutter Dynamic Home Route Flowchart
Contents

Prerequisites

Before proceeding, make sure to set up a Flutter app with at least two different screens.

Installing Dependencies

For this tutorial, add the following dependencies in your pubspec.yaml:

dependencies:
  shared_preferences: ^0.5.12+4
  async: ^2.4.2

Make sure to add the latest version of the dependencies from pub.dev.

After adding these dependencies, it is now time to install them. In your terminal, execute the following command:

flutter pub get

Shared Preferences is a Flutter plugin for reading and writing key-value pairs to the local storage. Async contains the utility functions and classes related to the dart:async library.

Writing Code

In the lib/main.dart, add the following code:

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

void main() async {

  // handle exceptions caused by making main async
  WidgetsFlutterBinding.ensureInitialized();

  // init a shared preferences variable
  SharedPreferences prefs = await SharedPreferences.getInstance();
  
  // get the locally stored boolean variable
  bool isLoggedIn = prefs.getBoolean('is_logged_in');
  
  // define the initial route based on whether the user is logged in or not
  String initialRoute = isLoggedIn ? '/' : 'login';

  // create a flutter material app as usual
  Widget app = MaterialApp(
    ...
    initialRoute: initialRoute,
  );

  // mount and run the flutter app
  runApp(app);
}

In the above code, you are getting the value of the is_logged_in boolean variable, and based on it decide the value of the initialRoute and pass it to the MaterialApp widget.

One important thing in the above code is the use of the async-await pattern. You can also use then but it makes the code a little messy and that’s what you should try to avoid here. Making your main() function asynchronous can cause some exceptions, so to solve this, you need to add WidgetsFlutterBinding.ensureInitialized().

Results

That’s it. You have successfully written a code that allows you to redirect the user to the Dashboard page if they are logged in, otherwise to the Login page.

📫

Loved this post? Join our Newsletter.

We write about React, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development and Technical Content Writing. He is a fan of Jamstack and likes to work with React, Vue, Flutter, Strapi, Node, Laravel and Python. He loves to play outdoor sports and cycles every day.

TAGGED WITH

Got a project or partnership in mind?

Let's Talk

Contact Us ->