Dynamic Home Route in a Flutter App

Ravgeet Dhillon
Ravgeet Dhillon on Jan 09, 20214 min read
Written in
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. In our Flutter App, we have at least two routes, Login and Dashboard. The problem is how can we decide which route should a user be redirected to?

In this app, we will check the value of a locally stored boolean variable to dynamically decide the home route. We can use any method for writing our authentication logic, like checking the validity of the API token, but for the sake of simplicity, we will explore a simple logic.

Flutter Dynamic Home Route
Flutter Dynamic Home Route Flowchart

Contents

1. Installing Dependencies

In our pubspec.yaml, let us add the following dependencies that we will be using in our Flutter application:

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

Make sure to install the latest version of the dependencies.

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

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

flutter pub get 

2. Writing Code

In our main.dart, let us 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);
}

The code is pretty self-explanatory. All we are doing is getting the value of is_logged_in boolean variable, and then decide the value of the initialRoute in our Flutter Material App.

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

Results

That’s it. We have successfully written a code that allows us to redirect the user to the Dashboard page if they are logged in, otherwise to the Login page. If you any doubts or appreciation for our team, let us know in the comments below.

Subscribe to RavSam Web Solutions newletter for information about Website development, mobile apps development and software development

Loved this post? Join our Newsletter 🚀

We write about Nuxt, 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, Freelancer and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development. He is a fan of Jamstack and likes to work with Flutter, Strapi, Nuxt/Vue and Python. Connect with Ravgeet on Twitter and LinkedIn.

TAGGED IN

KEEP READING

Blog banner for Progress Bar in Next.js

Progress Bar in Next.js

Written in Development
Blog banner for Best VS Code extensions for Nuxt/Vue Projects

Best VS Code extensions for Nuxt/Vue Projects

Written in Development

Got a project or partnership in mind?

Let's Talk

Contact Us ->