Sunday 13 November 2022

Flutter Session Installation | Pros | Set & Get Functions | Remove Session Variable

 



========================
Note : newPage.dart file code is given below.
========================
1. In main.dart file, After int _counter = 0;
Add code given below
var sessionManager = SessionManager();
@override
void initState() {
super.initState();
setSessionValue();
}
setSessionValue()
async {
dynamic count = await SessionManager().get("count");
if(count!=null)
{
_counter=int.parse('$count');
_counter=_counter-1;
_incrementCounter();
}
}
----------------------------------
2.In main.dart file, at the end of _incrementCounter function
Add below line.
await sessionManager.set("count", _counter);
========================
newPage.dart File Code :
import 'package:flutter/material.dart';
import 'main.dart';
import 'package:flutter_session_manager/flutter_session_manager.dart';
class newPage extends StatelessWidget {
const newPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(title: 'Flutter Demo Page 2'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
var sessionManager = SessionManager();
@override
void initState() {
super.initState();
setSessionValue();
}
setSessionValue()
async {
dynamic count = await SessionManager().get("count");
if(count!=null)
{
_counter=int.parse('$count');
_counter=_counter-1;
_incrementCounter();
}
}
Future<void> _incrementCounter() async {
setState(() {
_counter++;
});
await sessionManager.set("count", _counter);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
children: <Widget>[
const Text(
'Second Page Count :',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
RaisedButton(
child: new Text('Jump To Previous Page'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyApp()),
);
},
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), 
);
}
}
-------------------------------
The biggest pros of using session in flutter or any other language is that you can pass values between 2 or multiple pages without form submission or setting it hidden field.
For example, there are 2 pages in flutter application, the PLUS button below increases the count on that page, I can set that value in session and pass it down in 2nd page and vice versa.
I shall show how to do the setup and how to implement session in flutter.
Let’s get started.
In basic project of flutter application, there is always a main.dart. file with a button which will increase the count. And I also added 2 raised-buttons manually in design to redirect to second page and to destroy session.
I also created another page called newPage.dart with some session code pre-applied, but it shows error because I haven’t added session library yet.
To add libraries or dependencies, pubspec.yaml file is used.
However, we are going add session library using commands.
So, let’s go to browser and search “flutter session”.
Click on installing tab.
There you will find command to install it in dependencies.
Run that command.
Reopen pubspec file, you will find flutter_session_manager line, which means the library is installed.
And there is no error in newPage.dart file.
Let’s go to main.dart file.
I shall enable code to redirect to second page.
To make session library actually work in dart file, we have to import it.
If we go to Readme tab, you will find session code, like how to create session variable.
I shall use 1st and 3rd line.
Actually I created some code. So just copy-paste it. Code link is given in the description.
From 1st point, copy the code and paste it below _counter variable.
This code is used for fetching session variable at the page-start.
SessionManager.get function is used for it.
To set the session variable “count”, sessionManager.set function is used.
Use it after the setState function.
Let’s run the project.
Let’s test the code.
From first page, I shall set counter value to 4.
And that value is successfully called in 2nd page.
From this page, if I change it, it will be reflected in 1st page.
We can also destroy session by using destroy function.
Or we can unset it.
So, in second raised-button, I shall call remove function.
That’s it.
Thanks for watching. Like, Share and Subscribe.