Open in app

Sign in

Write

Sign in

Flutter Authentication using bloc package: A complete Shopping App-Part 3

Sanjib Maharjan
11 min readJun 27, 2023

--

Welcome to the third part of the tutorial. We have completed the dashboard page and item detail page in our previous tutorials and If you want to check them out here are the links for part I and part II. In this section, we’ll work on the authentication module where the users can log in to the app. You can check out my tutorial on Login and Register page design for detail design tutorial with form validation.

Basic Flow

Users can log in to the application by using the valid credentials which are the mock credentials stored in the code itself and can be replaced later with the real business logic in the server. The login information is then stored in the app by using the “shared_preferences” library so that the user doesn't have to log in time and again. Some functionality of the app such as “Add to Cart” requires the user to log in and if users click “Add to cart” they are presented with a login popup if they are not logged in. We’ll implement the login screen in the form of a dialog popup.

Create a file “lib/ui/auth/login/login.dart” with the following contents:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_shopping_app/constant/color.dart';
import 'package:flutter_shopping_app/ui/common/form/custom_button.dart';
import 'package:flutter_shopping_app/ui/common/form/custom_text_field.dart';

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Colors.white,
          ),
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 8, bottom: 40, top: 20),
                  child: Text(
                    "Login to the app",
                    style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: ThemeTextColorLight),
                  ),
                ),
                Divider(
                  height: 0,
                  thickness: 16,
                  color: ThemeTextColorLightest,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: TextButton.icon(
                      icon: Icon(
                        Icons.login_rounded,
                        size: 50,
                        color: ThemeColor,
                      ),
                      label: Text(
                        "SHOP",
                        style: TextStyle(fontSize: 30),
                      )),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
                  child: CustomTextField(
                    placeholder: "Username",
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
                  child: CustomTextField(
                    placeholder: "Password",
                  ),
                ),
                CustomButton(
                  label: "Login",
                  padding: EdgeInsets.symmetric(vertical: 20, horizontal: 70),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  "Don't have an account? Sign up",
                  style: TextStyle(color: ThemeColor),
                ),
                SizedBox(
                  height: 10,
                ),
                Text(
                  "Forgot password?",
                  style: TextStyle(color: ThemeTextColorLight),
                ),
                SizedBox(
                  height: 30,
                ),
              ],
            ),
          ),
        ),
        Positioned(
          child: IconButton(
              icon: Icon(Icons.close), onPressed: () => _close(context)),
          top: 10,
          right: 10,
        )
      ],
    );
  }

  _close(BuildContext context) {
    Navigator.of(context).pop();
  }
}

Create a utility file “lib/util/dialog_util.dart” with the following contents:

import 'package:flutter/material.dart';
import 'package:flutter_shopping_app/ui/auth/login/login.dart';

class DialogUtil {
  static const String SVG_ATTENTION =
      'assets/images/svgs/dialogs/attention.svg';
  static const String SVG_CONFIRM = 'assets/images/svgs/dialogs/confirm.svg';

  static Future openLoginPopup(BuildContext context, {dismissible: false}) {
    return showDialog(
      context: context,
      barrierDismissible: dismissible,
      builder: (BuildContext dialogContext) {
        return WillPopScope(
          onWillPop: () async => dismissible,
          child: Dialog(
              insetPadding: EdgeInsets.all(10),
              backgroundColor: Colors.transparent,
              elevation: 0,
              child: LoginForm()),
        );
      },
    );
  }
}

Create a custom drawer file “lib/ui/common/custom_drawer.dart” as:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_shopping_app/constant/color.dart';
import 'package:flutter_shopping_app/util/dialog_util.dart';

class CustomDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          _tile("Login", Icons.login_rounded, onPressed: () => _login(context)),
        ],
      ),
    );
  }

  _login(BuildContext context) {
    Navigator.of(context).pop();
    DialogUtil.openLoginPopup(context);
  }

  Widget _tile(String title, IconData icon, {VoidCallback onPressed}) {
    return Column(
      children: [
        ListTile(
          dense: true,
          title: Row(
            children: [
              Icon(
                icon,
                color: ThemeColor,
              ),
              SizedBox(
                width: 10,
              ),
              Text(
                title,
                style: TextStyle(color: ThemeColor),
              ),
            ],
          ),
          onTap: onPressed,
        ),
        Divider(
          height: 0,
          thickness: 1,
          color: ThemeColor,
        )
      ],
    );
  }
}

And update the “lib/main.dart” file with the drawer we’ve just created as:

...home: Scaffold(
  backgroundColor: Colors.white,
  body: Dashboard(),
  appBar: AppBar(
    centerTitle: false,
    title: Text("Shopping App"),
    elevation: 0,
  ),
  drawer: CustomDrawer(),
),...

Next, create a model file “data/models/user/user_auth.dart” for storing user auth data as:

import 'package:json_annotation/json_annotation.dart';

part 'user_auth.g.dart';

@JsonSerializable()
class UserAuth {
  final String username;
  final int id;
  final String assessToken;
  final double refreshToken;
  final String email;

  UserAuth({
    this.username,
    this.assessToken,
    this.refreshToken,
    this.id,
    this.email,
  });

  factory UserAuth.fromJson(Map<String, dynamic> json) =>
      _$UserAuthFromJson(json);

  Map<String, dynamic> toJson() => _$UserAuthToJson(this);

  String toString() {
    return '''{
      "username": "$username",
    }''';
  }
}

Run: fvm flutter packages pub run build_runner build — delete-conflicting-outputs

Add the following dependencies in the “pubspec.yaml” file:

shared_preferences: ^2.0.5
bot_toast: ^4.0.1

We’ll use shared preferences to persist the user data to the device and bot toast to show error, info, and loading messages in the application.

The loading message may be blocking or non-blocking. The blocking loader restricts the user to access any component in the app as long as it is active while the non-blocking does not.

Create “util/pref_util.dart” file as:

import 'dart:convert';
import 'package:flutter_shopping_app/data/models/user/user_auth.dart';
import 'package:shared_preferences/shared_preferences.dart';

enum AUTH_STORE { isLoggedIn, userAuth }

abstract class PrefUtils {
  ///
  /// Instantiation of the SharedPreferences library
  ///
  static final Future<SharedPreferences> prefs =
      SharedPreferences.getInstance();

  static const String USER_IDENTIFIER = "tokens_";

  static final Map<AUTH_STORE, dynamic> authStore = <AUTH_STORE, dynamic>{
    AUTH_STORE.isLoggedIn: false,
  };

  static Map<AUTH_STORE, dynamic> getAuthStore() {
    return authStore;
  }

  /// check if user is logged in or not
  static bool isUserLoggedIn() {
    return authStore[AUTH_STORE.isLoggedIn];
  }

  /// get [UserAuth]
  static UserAuth getUserAuthData() {
    return authStore[AUTH_STORE.userAuth];
  }

  static int getUserId() {
    return authStore[AUTH_STORE]?.id;
  }

  /// load [UserAuth] if saved in shared pref
  static Future<void> loadUserAuthData() async {
    final userString = (await prefs).get(USER_IDENTIFIER) ?? null;
    if (userString != null) {
      final userJson = json.decode(userString);
      updateUserSetting(
          userAuthData: UserAuth.fromJson(userJson), isLoggedIn: true);
    } else {
      return null;
    }
  }

  /// save [UserAuth] in shared pref
  static Future<bool> storeUserAuthData(UserAuth userAuthData) async {
    updateUserSetting(userAuthData: userAuthData, isLoggedIn: true);
    // converts to Map<String, dynamic>
    final userAuth = userAuthData.toJson();
    // converts Map<String, dynamic> to string type using jsonEncode()
    // and save in shared preference
    return (await prefs).setString(USER_IDENTIFIER, jsonEncode(userAuth));
  }

  static Future<bool> clearUserToken() async {
    updateUserSetting(clear: true);
    return (await prefs).remove(USER_IDENTIFIER);
  }

  static void updateUserSetting(
      {UserAuth userAuthData, bool isLoggedIn, bool clear: false}) async {
    if (userAuthData != null || clear) {
      authStore[AUTH_STORE.userAuth] = userAuthData;
    }

    if (isLoggedIn != null || clear) {
      authStore[AUTH_STORE.isLoggedIn] = isLoggedIn ?? false;
    }
  }
}

Also, add the “bloc/token/auth_token_cubit.dart” and “bloc/token/auth_token_state.dart” files to update the login state in the view without having the user reload the application with the following contents:

File: “bloc/token/auth_token_cubit.dart”

import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_shopping_app/data/models/user/user_auth.dart';
import 'package:flutter_shopping_app/util/pref_util.dart';
import 'package:injectable/injectable.dart';

part 'auth_token_state.dart';

@injectable
class AuthTokenCubit extends Cubit<AuthTokenState> {
  AuthTokenCubit() : super(AuthTokenState.initial());

  void update({UserAuth auth, bool isLoggedIn}) async {
    try {
      emit(state.update(
          auth: auth ?? PrefUtil.getUserAuthData(),
          isLoggedIn: isLoggedIn ?? PrefUtil.isUserLoggedIn()));
    } catch (e) {
      final errorMsg = e.toString();
      emit(state.update(error: errorMsg));
    }
  }
}

File: “bloc/token/auth_token_state.dart”

part of 'auth_token_cubit.dart';

@immutable
class AuthTokenState extends Equatable {
  final UserAuth auth;
  final String error;

  final bool isLoggedIn;

  bool get hasError => error != null && error.isNotEmpty;

  const AuthTokenState({this.error, this.auth, this.isLoggedIn});

  @override
  List<Object> get props => [error, isLoggedIn, auth];

  factory AuthTokenState.initial() {
    return AuthTokenState(error: "", isLoggedIn: false);
  }

  AuthTokenState init({bool isLoggedIn, UserAuth auth, error}) {
    return AuthTokenState(
      auth: auth ?? this.auth,
      isLoggedIn: isLoggedIn ?? this.isLoggedIn,
      error: error ?? "",
    );
  }

  @override
  String toString() =>
      'AuthTokenState { auth: $auth, error: $error, isLoggedIn: $isLoggedIn }';
}

Run: fvm flutter packages pub run build_runner build — delete-conflicting-outputs

Similarly create the “util/message_util.dart” file as:

import 'package:bot_toast/bot_toast.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_shopping_app/constant/color.dart';

class MessageUtil {
  static CancelFunc loadingCancelFunc;

  static void _show(String message, {bool error}) {
    BotToast.showCustomNotification(
        toastBuilder: (context) =>
            _CustomMessage(message: message, error: error),
        duration: Duration(seconds: 4),
        align: const Alignment(0, 0.99));
  }

  static void showSuccessMessage(String message) {
    _show(message, error: false);
  }

  static void showErrorMessage(String message) {
    _show(message, error: true);
  }

  static void showLoading({String message: 'loading...'}) {
    if (loadingCancelFunc == null)
      loadingCancelFunc = BotToast.showCustomLoading(
          backgroundColor: Colors.black.withOpacity(.3),
          toastBuilder: (context) => _LoaderOverlay(label: message));
  }

  static void hideLoading() {
    if (loadingCancelFunc != null) {
      loadingCancelFunc();
      loadingCancelFunc = null;
    }
  }
}

class _LoaderOverlay extends StatelessWidget {
  final String label;

  _LoaderOverlay({this.label: "Please wait..."});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(10)),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Please wait",
              style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                  color: ThemeTextColorLight),
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              children: [
                SizedBox(
                    width: 30,
                    height: 30,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      backgroundColor: ThemeTextColor,
                    )),
                SizedBox(
                  width: 16,
                ),
                Text(
                  label,
                  style: TextStyle(fontSize: 12, color: ThemeTextColor),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class _CustomMessage extends StatelessWidget {
  final bool error;
  final String message;

  _CustomMessage({
    @required this.message,
    this.error: true,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: error ? Colors.redAccent : ThemeColor,
          borderRadius: BorderRadius.circular(10)),
      width: double.infinity,
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(10),
      child: Row(
        children: [
          Icon(error ? Icons.info : Icons.error),
          SizedBox(width: 10),
          Expanded(
            child: Text(
              message,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

Finally, make changes in the “main.dart” file as:

import 'package:bot_toast/bot_toast.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_shopping_app/bloc/token/auth_token_cubit.dart';
import 'package:flutter_shopping_app/constant/color.dart';
import 'package:flutter_shopping_app/injectable/config.dart';
import 'package:flutter_shopping_app/ui/common/custom_drawer.dart';
import 'package:flutter_shopping_app/ui/dashboard/dashboard.dart';
import 'package:flutter_shopping_app/util/pref_util.dart';
import 'package:get_it/get_it.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // load user stored data if any
  await PrefUtil.loadUserAuthData();
  configureDependencies();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<AuthTokenCubit>(
          create: (context) => GetIt.I.get<AuthTokenCubit>()..init(),
          lazy: false,
        )
      ],
      child: MaterialApp(
        title: 'Shopping App Demo',
        builder: BotToastInit(),
        navigatorObservers: [BotToastNavigatorObserver()],
        //set up bot toast
        theme: ThemeData(
          primarySwatch: ThemeWhite,
        ),
        home: Scaffold(
          backgroundColor: Colors.white,
          body: Dashboard(),
          appBar: AppBar(
            centerTitle: false,
            title: Text("Shopping App"),
            elevation: 0,
          ),
          drawer: CustomDrawer(),
        ),
      ),
    );
  }
}

Now let's create some fake users in our MockUtil class and we’ll use these values to mock our login function. Add following entries in the “util/mock_util.dart” file as:

...
static List<Map<String, dynamic>> getUsers() {
  return [
    {"username": "user1", "password": "password1", "id": 1, "email": "user1@email.com"},
    {"username": "user2", "password": "password2", "id": 2, "email": "user2@email.com"},
    {"username": "user3", "password": "password3", "id": 3, "email": "user3@email.com"},
    {"username": "user4", "password": "password4", "id": 4, "email": "user4@email.com"},
  ];
}
...

Then add the logic in the file “data/provider/user_provider.dart” as:

import 'package:flutter_shopping_app/data/models/user/user_auth.dart';
import 'package:flutter_shopping_app/util/mock_util.dart';
import 'package:injectable/injectable.dart';

abstract class UserProvider {
  Future<UserAuth> login(String username, String password);
}

@Named("mock")
@Singleton(as: UserProvider)
class MockUserProvider implements UserProvider {
  const MockUserProvider();

  @override
  Future<UserAuth> login(String username, String password) async {
    //add some delay to give the feel of api call
    await Future.delayed(Duration(seconds: 3));
    final List<Map<String, dynamic>> _data = MockUtil.getUsers();
    Map<String, dynamic> _user = _data.firstWhere(
        (Map data) =>
            data["username"]?.toString()?.trim() == username &&
            data["password"]?.toString()?.trim() == password,
        orElse: () => null);
    if (_user == null) throw Exception("Username and password does not match");

    return Future.value(UserAuth.fromJson(_user));
  }
}

Also, create the corresponding repository file “data/repository/user_repository.dart” as:

import 'package:flutter_shopping_app/data/models/user/user_auth.dart';
import 'package:flutter_shopping_app/data/provider/user_provider.dart';
import 'package:injectable/injectable.dart';

@injectable
class UserRepository {
  final UserProvider _provider;

  const UserRepository({@Named("mock") UserProvider provider})
      : _provider = provider;

  Future<UserAuth> handleLogin(String username, String password) async {
    return await _provider.login(username, password);
  }
}

We also need a bloc to communicate the login form with the API call. The user types in the username and password in the form which the app extracts and checks if they are valid. If it is valid then the user is logged in successfully and if not some error message is shown to the user.

Create the files “ui/auth/login/bloc/login_cubit.dart” and “ui/auth/login/bloc/login_state.dart” as:

import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_shopping_app/bloc/token/auth_token_cubit.dart';
import 'package:flutter_shopping_app/data/models/user/user_auth.dart';
import 'package:flutter_shopping_app/data/repository/user_repository.dart';
import 'package:flutter_shopping_app/util/message_util.dart';
import 'package:flutter_shopping_app/util/pref_util.dart';
import 'package:injectable/injectable.dart';

part 'login_state.dart';

@injectable
class LoginCubit extends Cubit<LoginState> {
  final UserRepository _userRepository;
  final AuthTokenCubit _authTokenCubit;

  LoginCubit(
      {UserRepository userRepository,
      @factoryParam AuthTokenCubit authTokenCubit})
      : _userRepository = userRepository,
        _authTokenCubit = authTokenCubit,
        super(LoginState.initial());

  void login(String userName, String password) async {
    emit(state.update(loading: true));
    try {
      MessageUtil.showLoading();
      emit(state.update(loading: true));
      UserAuth _auth = await _userRepository.handleLogin(userName, password);
      await PrefUtil.storeUserAuthData(_auth);
      _authTokenCubit.init(auth: _auth, isLoggedIn: true);
      emit(state.update(success: true, loading: false));
      MessageUtil.showSuccessMessage("Login Successful.");
    } catch (e) {
      final String _error = e.toString() ?? "Error";
      MessageUtil.showErrorMessage(_error);
      emit(state.update(error: _error, loading: false));
    }finally{
      MessageUtil.hideLoading();
    }
  }
}

File: “ui/auth/login/bloc/login_state.dart”

part of 'login_cubit.dart';

@immutable
class LoginState extends Equatable {
  final bool loading;

  final String error;
  final bool success;

  bool get hasError => error.isNotEmpty;

  LoginState({this.loading, this.error, this.success});

  factory LoginState.initial() => LoginState(
        loading: false,
        success: false,
        error: "",
      );

  LoginState update({bool loading, bool success, String error}) {
    return LoginState(
      loading: loading ?? this.loading,
      success: success ?? this.success,
      error: error ?? "",
    );
  }

  @override
  List<Object> get props => [loading, hasError, success];
}

Then update the file “ui/auth/login/login.dart” as:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_shopping_app/bloc/token/auth_token_cubit.dart';
import 'package:flutter_shopping_app/constant/color.dart';
import 'package:flutter_shopping_app/ui/auth/login/bloc/login_cubit.dart';
import 'package:flutter_shopping_app/ui/common/form/custom_button.dart';
import 'package:flutter_shopping_app/ui/common/form/custom_text_field.dart';
import 'package:get_it/get_it.dart';

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  bool _isVisible = false;

  final _userData = {"username": "", "password": ""};

  @override
  void initState() {
    _usernameController
        .addListener(() => _setValue("username", _usernameController));
    _passwordController
        .addListener(() => _setValue("password", _passwordController));
    super.initState();
  }

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  _setValue(key, TextEditingController controller) {
    if (_userData[key] != controller.text.trim()) {
      setState(() {
        _userData[key] = controller.text.trim();
      });
    }
  }

  _listenEvents(BuildContext context, LoginState state) {
    if (state.success) {
      _close(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<LoginCubit>(
      create: (context) =>
          GetIt.I.get<LoginCubit>(param1: context.read<AuthTokenCubit>()),
      child: BlocListener<LoginCubit, LoginState>(
        listener: _listenEvents,
        child: BlocBuilder<LoginCubit, LoginState>(builder: (context, state) {
          return Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white,
                ),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Padding(
                        padding:
                            const EdgeInsets.only(left: 8, bottom: 40, top: 20),
                        child: Text(
                          "Login to the app",
                          style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: ThemeTextColorLight),
                        ),
                      ),
                      Divider(
                        height: 0,
                        thickness: 16,
                        color: ThemeTextColorLightest,
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: TextButton.icon(
                            icon: Icon(
                              Icons.login_rounded,
                              size: 50,
                              color: ThemeColor,
                            ),
                            label: Text(
                              "SHOP",
                              style: TextStyle(fontSize: 30),
                            )),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
                        child: CustomTextField(
                          placeholder: "Username",
                          enabled: !state.loading,
                          controller: _usernameController,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
                        child: CustomTextField(
                          placeholder: "Password",
                          enabled: !state.loading,
                          controller: _passwordController,
                          obscureText: !_isVisible,
                          suffixIcon: IconButton(
                            icon: Icon(_isVisible
                                ? Icons.visibility
                                : Icons.visibility_off, color: ThemeColor,),
                            onPressed: _toggleVisibility,
                          ),
                        ),
                      ),
                      CustomButton(
                        label: "Login",
                        padding:
                            EdgeInsets.symmetric(vertical: 20, horizontal: 70),
                        onPressed: () => _login(context),
                        disabled: state.loading ||
                            !_isUsernameValid() ||
                            !_isPasswordValid(),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Text(
                        "Don't have an account? Sign up",
                        style: TextStyle(color: ThemeColor),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        "Forgot password?",
                        style: TextStyle(color: ThemeTextColorLight),
                      ),
                      SizedBox(
                        height: 30,
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                child: IconButton(
                    icon: Icon(Icons.close), onPressed: () => _close(context)),
                top: 10,
                right: 10,
              )
            ],
          );
        }),
      ),
    );
  }

  _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  _login(BuildContext context) {
    context
        .read<LoginCubit>()
        .login(_userData["username"], _userData["password"]);
  }

  bool _isUsernameValid() {
    return _userData["username"].isNotEmpty;
  }

  bool _isPasswordValid() {
    return _userData["password"].isNotEmpty;
  }

  _close(BuildContext context) {
    Navigator.of(context).pop();
  }
}

Also, we need some way for the users to log out from the system and we’ll add it in the “ui/common/custom_drawer.dart” file as:

...
return Drawer(
    child: ListView(
      children: [
        _tile(PrefUtil.isUserLoggedIn() ? "Logout" : "Login",
            Icons.login_rounded,
            onPressed: () => _handleLogin(context)),
      ],
    ),
  );
}

_handleLogin(BuildContext context) {
  Navigator.of(context).pop();
  if (PrefUtil.isUserLoggedIn()) {
    context.read<AuthTokenCubit>().logout();
  } else {
    DialogUtil.openLoginPopup(context);
  }
}
...

To test the auth module create the “ui/dashboard/user_info.dart” file with the following contents:

import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_shopping_app/bloc/token/auth_token_cubit.dart';
import 'package:flutter_shopping_app/constant/color.dart';

class UserInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthTokenCubit, AuthTokenState>(
        builder: (context, state) {
      return state.isLoggedIn
          ? Padding(
              padding: EdgeInsets.fromLTRB(20, 10, 10, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Hello ${state.auth.username},",
                    style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.bold,
                        color: ThemeTextColor),
                  ),
                  SizedBox(height: 4,),
                  Text(
                    "your daily goods are here!",
                    style: TextStyle(fontSize: 22, color: ThemeTextColorLight),
                  ),
                  SizedBox(height: 10,)
                ],
              ),
            )
          : SizedBox.shrink();
    });
  }
}

Also, add them in the dashboard as:

...
@override
Widget build(BuildContext context) {
  return ListView(
    children: [
      UserInfo(),
...

We are done with the authentication module and can reuse this module wherever necessary. Our app works both in mobile as well as in web platforms while UI looks better only on a mobile platform. So in the next part, we’ll work to make the UI better on both mobile and web platforms.

Project Starter Link: https://github.com/cshanjib/flutter_shopping_app/tree/section3-start
Project Completed Link: https://github.com/cshanjib/flutter_shopping_app/tree/section3-end

Prev —Part 2: API calls and Dependency Injection using the get_it package
Next —Part 4: Responsive Design

Check out other tutorials in this series:

Part 1: Designing the E-commerce App
Part 2: API calls and Dependency Injection using the get_it package
Part 3: Authentication and Login Design using the flutter_bloc package
Part 4: Responsive Design
Part 5: Proper Routing in Flutter Web using beamer package
Part 6: Pagination in Flutter(Lazy Loading, Paginated Truncated Display, etc.)

If you like this tutorial please hit 👏 as many times as you like and also leave comments if you have any questions or suggestions. Thank you!

#flutter, #flutter_app_development, #ecommerce_application, #flutter_get_it #flutter_bloc #login_form_design

Flutter Bloc
Authentication
Sharedpreferences
Flutter
Flutter App Development

--

--

Sanjib Maharjan

Written by Sanjib Maharjan

68 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams