Flutter Login with provider implementation

Flutter login with Provider :

In flutter app UI represents the current state of the app so when there is any change / update the UI will rebuild from scratch we will be covering this scenario in Flutter login with Provider tutorial.

When there is a update to UI every widget in the screen i.e., Text widgets, buttons and all the remaining things gets updated.Usage of state management will decrease the code complexity and reduce code size.

For any dynamic app there will be quite a few changes almost on every interaction sometimes so making use of provider makes it much easy in app development.

State management provides the ability to handle data while page refresh, components to be aware of state these things provide much impact on the app performance.

We will be dealing with the concept of state management in flutter programming and consider Flutter login with Provider pattern and implement login mechanism in this tutorial.

Provider pattern is discussed in our previous tutorials too can visit them here.

 

 

pubspec.yaml :

Add provider, get dependency to pubspec.yaml to get started with flutter login with provider. Also try to specify the version numbers latest available to avoid any conflict.

dependencies:
  flutter:
    sdk: flutter
  provider: 
  get:

 

user :

We will create a model class extending change notifier and specify the fields email, password.So that we can add the user credentials and fetch them any where in the app after login with provider.

Create a method to store the data and can also create a method to fetch the data.

 

import 'package:flutter/material.dart';

class User extends ChangeNotifier{

  String email = "";
  String pwd = "";

  void signIn(String emailTxt, String pwdTxt){
    email = emailTxt;
    pwd = pwdTxt;
    notifyListeners();
  }
}

 

dashboard :

Create a dashboard screen which will be loaded once the use is logged-in.And here we display information regarding the user based on provider pattern.

 

import 'package:flutter/material.dart';
import 'package:flutter_login_provider/user.dart';
import 'package:provider/provider.dart';

class Dashboard extends StatelessWidget {
  const Dashboard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<User>(builder: (context,user,_){
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text("Dashboard"),),
          body: Center(child: Text(user.email,style: const TextStyle(color: Colors.blueAccent,fontSize: 30.0),)),
        ),
      );
    }
    );
  }
}

 

main.dart :

Specify the providers inside the void main block of code as below.

void main() {
  runApp(MultiProvider(
    providers: [ChangeNotifierProvider(create: (_) => User())],
    child: MyApp(),
  ));
}

Specify the text fields and add controllers to fetch the information from these fields.

 

var txtUserNameController = TextEditingController();
var txtUserPwdController = TextEditingController();

 

TextField(
  controller: txtUserNameController,
  decoration: const InputDecoration(hintText: "Enter username"),
),
TextField(
  controller: txtUserPwdController,
  decoration: const InputDecoration(hintText: "Enter password"),
),

 

Add a TextButton to tap on login button to perform login

TextButton(
    onPressed: () {
      },
    child: const Text("Login"))

 

Specify the provider using which we try to save the information inside the onPressed

Provider.of<User>(context, listen: false).signIn(
    txtUserNameController.text.toString(),
    txtUserPwdController.text.toString());

 

With the help of GetX library we will try to move to another screen.

Get.to(() => Dashboard());

 

Flutter login with Provider Full Code :

Providing full code for Flutter login with Provider implementation. Also may go through the video tutorial provided in this tutorial for more details.

 

import 'package:flutter/material.dart';
import 'package:flutter_login_provider/dashboard.dart';
import 'package:flutter_login_provider/user.dart';
import 'package:get/get.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MultiProvider(
    providers: [ChangeNotifierProvider(create: (_) => User())],
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  var txtUserNameController = TextEditingController();
  var txtUserPwdController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Provider Login"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Center(
            child: Column(
              children: [
                TextField(
                  controller: txtUserNameController,
                  decoration: const InputDecoration(hintText: "Enter username"),
                ),
                TextField(
                  controller: txtUserPwdController,
                  decoration: const InputDecoration(hintText: "Enter password"),
                ),
                TextButton(
                    onPressed: () {
                      Provider.of<User>(context, listen: false).signIn(
                          txtUserNameController.text.toString(),
                          txtUserPwdController.text.toString());
                      Get.to(() => Dashboard());
                    },
                    child: const Text("Login"))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

If you are having any query in this tutorial on Flutter login with Provider do let us know in the comment section below. If you like this tutorial do like and share us for more interesting updates.