Flutter Login with Provider: Seamless User Authentication Implementation

Flutter login with Provider :

In a Flutter app, the UI mirrors the current state of the application. Any changes or updates trigger a complete rebuild of the UI, a scenario we’ll delve into in the Flutter login with Provider tutorial.

Whenever there’s a UI update, every widget on the screen—Text widgets, buttons, and others—undergoes an update. Implementing state management reduces code complexity and minimizes code size.

For dynamic apps, frequent changes occur with nearly every interaction. Leveraging Provider simplifies app development in such scenarios.

State management proves crucial for handling data during page refresh, ensuring components are aware of state changes, thereby significantly impacting app performance.

Our tutorial will explore state management in Flutter programming, focusing on the Flutter login with Provider pattern to implement an efficient login mechanism.

If you’re new to the Provider pattern, check out our previous tutorials for more insights. Visit them here.

 

Flutter login with Provider Video Tutorial:

For a more in-depth understanding, be sure to watch the accompanying video tutorial below. It provides a detailed explanation of the concepts discussed, guiding you through each step for a comprehensive learning experience.

 

pubspec.yaml :

Incorporate the ‘provider’ dependency into your ‘pubspec.yaml’ file to kickstart your Flutter login implementation with Provider. Make sure to include the latest version numbers to prevent any potential conflicts and ensure a smooth integration process.

dependencies:
  flutter:
    sdk: flutter
  provider: 
  get:

 

user :

Take your Flutter login to the next level by crafting a dedicated model class that extends ‘ChangeNotifier.’ This essential class will define crucial fields like ’email’ and ‘password,’ enabling seamless management of user credentials throughout your app post-login using Provider.

By creating custom methods within the model, you’ll empower your application to not only store user data securely but also retrieve it effortlessly when needed. This ensures a robust and flexible architecture for handling user information, enhancing the overall functionality and user experience of your application.

 

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 :

Develop a user-friendly dashboard screen that loads upon successful login. Utilizing the Provider pattern, showcase personalized user information on this screen, ensuring a seamless and dynamic user experience.

 

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 :

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 have any questions regarding this Login tutorial using Provider, feel free to share them in the comments below. If you found this tutorial helpful, please show your support by liking and sharing for more engaging updates.