Add Session Support to Flutter with Flutter Session

The primary reason why developers need user sessions is to be able to store information somewhere and make sure they persist and is accessible any time during the application’s lifetime. Too bad that at the time of writing, session is not yet natively supported in Flutter.

Coming in primarilly from a backend-dominated background, my journey to Flutter led me to develop Flutter Session, the easiest way to add session support to Flutter. It’s a light-weight and easy-to-use Dart package that makes it easy to add session functionality to Flutter as global and persistent store for session data and make sure they survive even after navigating to other pages.

Let’s start.

Installing Flutter Session

Set up FlutterSession to your project by following the installation guide, which is basically just adding Flutter Session to your project’s dependencies and running pub get.

// pubspec.yaml
dependencies:
  flutter_session: ^0.0.7

Next, fetch the package:

flutter pub get

And then importing the package on the file you wish to use Flutter Session:

import 'package:flutter_session/flutter_session.dart';

At this point you are now ready to start using Flutter Session.

Flutter Session Basics

Saving Data to Flutter Session

Storing information to the session is now not only possible but incredibly easy to do:

await FlutterSession().set("foo", "bar");

Retrieving Session Data

Getting the data from session can also be done with a single line of code:

var foo = await FlutterSession().get("foo");

Flutter Session In Action

In order to demonstrate how session works, let us explore an example application.

Page1: Save a string token to the session:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: FutureBuilder(
          future: saveData(context),
          builder: (context, snapshot) {
            return Text("You will not see this");
          }),
    );
  }

  Future<void> saveData(context) async {
    String token = 'The token you got from the API';
    await FlutterSession().set('token', token);
    Navigator.push(context, 
       MaterialPageRoute(builder: (_context) => Page2()));
  }
}

In the code above, Page1 contains a FutureBuilder widget that calls a Future async method called saveData that stores a value into the FlutterSession and assigns a key called “token” to it. This allows the application access to its key and value throughout the entirety of the application.

After storing the token to the session, saveData then tells the Navigator to switch the view to Page2.

Page2: Retrieve the token from the session

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
        child: FutureBuilder(
            future: FlutterSession().get('token'),
            builder: (context, snapshot) {
              return Text(snapshot.hasData ? snapshot.data : 'Loading...');
            }
        )
    );
  }
}

Page2 is responsible for rendering the token through another FutureBuilder. We can see that since the retrieval of session items is a straightforward process, we are able to directly assign FlutterSession.get() to the FutureBuilder.future property then passing the result to the FutureBuilder.builder property via the snapshot parameter. The result is a succesful retrieval of the token even after the previous “redirection”.

That’s just about all on how to add session support to Flutter with Flutter Session. It’s simple and and it’s easy to implement compared to all other alternatives I’ve tried so far that is why I decided to share what i have come up so far exploring Flutter.

If you have any questions using Flutter Session, let me know any time.

Cheers!