save login details remember me in flutter
save login details - remember me in flutter
Flutter Keep User Logged In - Hive... x
Flutter Keep User Logged In - Hive Database Example - Realtime login, registration example

Hi Guys, Welcome to Proto Coders Point. In this flutter tutorial article, will learn how to implement remember me feature in flutter app to save login details by using HIVE local database.

So the feature is very useful, if a user don’t want to enter his login credential in login form everytime he visits the app.

How to implement login remember me in flutter app

The Idea that works behind this is, When a user put his login credential for first time for login purpose in the login textField & check the checkbox ‘Remember me’, We will store/save his/her details in local data store in mobile device itself i.e by using Hive NoSQL database, and when user re-visit the flutter app, we will retrive the data from HIVE database(local database) & put it into TextField, so that their is no need for a user to enter the login credential again & again.

In flutter there are many ways to store data locally. In our case, we are going to make use of HIVE database to save user login details in app itself.

Video Tutorial

Let’s get started

1. Implement Login registration UI

I have wrote a complete article of flutter login-registration, you can just check the below article to learn login UI or else simply download/clone the flutter login registration UI from my github repo.

In the above login UI project, You will get 2 pages UI

  1. Login Page UI
  2. Registration Page UI

The main motive of this tutorial article is how to save login details in flutter i.e. remember me login.

As you can see In login page we have:-

  1. 2 TextField: In TextField we have added TextEditingController to easily get the text entered in TextField.
  2. CheckBox: Remember me Checkbox, user can use it to choose weather to save his login credential or no.
  3. Login Button: To login to app.

Flutter Login Remember Me - Save login details using hive db - flutter hive example
2. Create new flutter project / clone UI from step 1

Implement remember me in flutter, create your own login form or else use my login UI from my github repository.


3. Adding Hive Package

Once your project is ready, go to pubspec.yaml file & under dependencies section add this 2 dependencies package.

dependencies:
  hive:
  hive_flutter:

then hit pub get text button or run ‘flutter pub get’ in your IDE terminal.

Therefore HIVE NoSQL database package will get installed in your flutter project as external library.


4. Importing HIVE & Hive_flutter package

To use hive you need to import it wherever required.

import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

5. Initialize HIVE Database

Now, to make use of Hive db, you need to initialize Hive, to make use of local storage, therefore the best place to do it is in main() method, before loading your app.

void main()  async{
  await Hive.initFlutter();  // init flutter hive
  runApp(const MyApp());
}

6. Creating Hive Box

After initializing HIVE, We need to create/open a HIVE BOX.

In short, Hive box is a box where we will store our data in flutter NOSQL database form.

The best place to create Boxes is immediate after Hive.InitFlutter(). Therefore we can create/open HIVE box in initState().

let’s create flutter hive box

late Box box1;

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    createOpenBox();

  }

  void createOpenBox()async{

    box1 = await Hive.openBox('logindata');


    //getdata();  // when user re-visit app, we will get data saved in local database 
    //how to get data from hive db check it in below steps
  }

7. Save login detail in HIVE BOX

To save data in hive db box we will use put() method.

syntax:

box.put('key',value);

In Hive, data are stored in key-value pair.

In our case, we need to save login detial if remember me checkbox is checked.

Therefore, when login button is pressed we will call a method(login()), In that method we will check if remember me login checkbox is checked, if yes then save login details in HIVE DB.

void login(){
    
   // perform your login authentication
  // is login success then save the credential if remember me is on
    if(isChecked){
      box1.put('email', email.value.text);
      box1.put('pass', pass.value.text);
    }
 }

8. Get data saved in HIVE database

To get data from hive database, we can make use of get() method and pass the key.

syntax:

box1.get('email')

The above syntex will return the data stored in the database using key, if data don’t exist it simply return null.

code: to get login remember me data in login form.

we will call getData() method immediatly after opening hive box, so if data is saved in database will set the data to Login TextField, if data is null then will do nothing.

 void getdata()async{
    if(box1.get('email')!=null){
      email.text = box1.get('email');
      isChecked = true;
      setState(() {

      });
    }
    if(box1.get('pass')!=null){
      pass.text = box1.get('pass');
      isChecked = true;
      setState(() {

      });
    }
  }

Complete Source code – Save Login Credential locally in flutter

main.dart

import 'package:flutter/material.dart';
import 'login_page.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

void main()  async{
  await Hive.initFlutter();  //init hive
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Login_Page()  // load login page
    );
  }
}

Login_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:login_ui/registrationpage.dart';
import 'package:velocity_x/velocity_x.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

class Login_Page extends StatefulWidget {
  const Login_Page({Key? key}) : super(key: key);

  @override
  _Login_PageState createState() => _Login_PageState();
}

class _Login_PageState extends State<Login_Page> {
  bool isChecked = false;
  TextEditingController email = TextEditingController();
  TextEditingController pass = TextEditingController();

  late Box box1;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    createOpenBox();

  }

  void createOpenBox()async{
    box1 = await Hive.openBox('logindata');
    getdata();
  }
  void getdata()async{
    if(box1.get('email')!=null){
      email.text = box1.get('email');
      isChecked = true;
      setState(() {

      });
    }
    if(box1.get('pass')!=null){
      pass.text = box1.get('pass');
      isChecked = true;
      setState(() {

      });
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
          child: Stack(
            children: [
              Container(
                decoration: const BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/assets/backgroundUI.png"),
                        fit: BoxFit.cover)),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 40, 20, 0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                        height: 100,
                        width: 100,
                        child: SvgPicture.asset("images/assets/xing.svg")),
                    const HeightBox(10),
                    "Login".text.color(Colors.white).size(20).make(),
                    const HeightBox(20),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
                      child: TextField(
                        controller: email,
                        decoration: InputDecoration(
                          hintText: 'Email',
                          hintStyle: const TextStyle(color: Colors.white),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10.0),
                            borderSide: const BorderSide(color: Colors.white),
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(10.0),
                              borderSide: const BorderSide(color: Colors.blue)),
                          isDense: true,
                          // Added this
                          contentPadding:
                              const EdgeInsets.fromLTRB(10, 20, 10, 10),
                        ),
                        cursorColor: Colors.white,
                        style: const TextStyle(color: Colors.white),
                      ),
                    ),
                    const HeightBox(20),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
                      child: TextField(
                        controller: pass,
                        obscureText:true,
                        decoration: InputDecoration(
                          hintText: 'Password',
                          hintStyle: const TextStyle(color: Colors.white),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10.0),
                            borderSide: const BorderSide(color: Colors.white),
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: new BorderRadius.circular(10.0),
                              borderSide: const BorderSide(color: Colors.blue)),
                          isDense: true,
                          // Added this
                          contentPadding:
                              const EdgeInsets.fromLTRB(10, 20, 10, 10),
                        ),
                        cursorColor: Colors.white,
                        style: const TextStyle(color: Colors.white),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("Remember Me",style: TextStyle(color: Colors.white),),
                        Checkbox(
                          value: isChecked,
                          onChanged: (value){
                            isChecked = !isChecked;
                            setState(() {

                            });
                          },
                        ),
                      ],
                    ),
                    GestureDetector(
                      onTap: () {},
                      child: const Text(
                        "Forgot Password ? Reset Now",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    HeightBox(10),
                    GestureDetector(
                        onTap: () {
                          print("Login Clicked Event");
                          login();
                        },
                        child: "Login".text.white.light.xl.makeCentered().box.white.shadowOutline(outlineColor: Colors.grey).color(Color(0XFFFF0772)).roundedLg.make().w(150).h(40)),
                    const HeightBox(20),
                  ],
                ),
              )
            ],
          ),
        ),
        bottomNavigationBar: GestureDetector(
          onTap: () {
            Navigator.pushReplacement(context,
                MaterialPageRoute(builder: (context) => registrationpage()));
          },
          child: RichText(
              text: const TextSpan(
            text: 'New User?',
            style: TextStyle(fontSize: 15.0, color: Colors.black),
            children: <TextSpan>[
              TextSpan(
                text: ' Register Now',
                style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 18,
                    color: Color(0XFF4321F5)),
              ),
            ],
          )).pLTRB(20, 0, 0, 15),
        ));
  }

  void login(){
    if(isChecked){
      box1.put('email', email.value.text);
      box1.put('pass', pass.value.text);
    }
  }
}