What is more elegant for flutter to log out and confirm again?

Preface

stay flutter_bloc Provides a status monitoring component BlocListener, When the state changes, it will call listener Callback function given by parameter , This method does not return a value , It can be used for us to deal with some reminders , For example, display pop-up reminder or confirmation , Display status information, etc . With BlocListener, It is equivalent to providing us with an additional entry to deal with object changes . Next we pass BlocListener Implement some App Second confirmation before logging out .

The login status

To simplify logic , Our login data has only one enumeration LoginStatus, There are three states ：

• logon： Logged in
• logout： Logged out
• logoutConfirm： Exit login confirmation

enum LoginStatus { logon, logout, logoutConfirm }

class LoginCubit extends Cubit<LoginStatus> {
  LoginCubit({initial = LoginStatus.logout}) : super(initial);

  void login() => emit(LoginStatus.logon);
  void logout() => emit(LoginStatus.logout);
  void logoutConfirm() => emit(LoginStatus.logoutConfirm);
}

Business logic

We put a button in the middle of the screen , Switch button text according to login status ：

• Logged in ： Displayed as logout ;
• Logged out ： Displayed as login .

When you click the exit login button , The second confirmation dialog box pops up , After confirmation, change the status to logged out , Otherwise, keep the login status unchanged , The dialog box is shown below .

Code implementation

Because of our buttons and BlocListener All need to use status data , Therefore use BlocProvider Placed on the upper layer is BlocListener and BlocBuilder Provide status data at the same time .

class BlocListenerWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => LoginCubit(),
      child: BlocListenerDemo(),
    );
  }
}

BlocListener Part of the code is as follows ：

class BlocListenerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BlocListener  Example '),
      ),
      body: Center(
        child: BlocListener<LoginCubit, LoginStatus>(
          listener: (context, loginSatus) async {
            if (loginSatus == LoginStatus.logout ||
                loginSatus == LoginStatus.logon) {
              ScaffoldMessenger.of(context)
                ..hideCurrentSnackBar()
                ..showSnackBar(SnackBar(
                  content:
                      Text(loginSatus == LoginStatus.logout ? ' Logged out ' : ' Login successful '),
                  duration: Duration(seconds: 1),
                ));
            } else {
              var confirmed = await _confirmLogout(context);
              if (confirmed == true) {
                context.read<LoginCubit>().logout();
              }
            }
          },
          child: BlocBuilder<LoginCubit, LoginStatus>(
            builder: (context, loginSatus) => TextButton(
              child: Text(
                loginSatus == LoginStatus.logon ? ' Log out ' : ' Sign in ',
                style: TextStyle(
                  fontSize: 24.0,
                ),
              ),
              onPressed: () {
                if (loginSatus == LoginStatus.logon) {
                  context.read<LoginCubit>().logoutConfirm();
                } else {
                  context.read<LoginCubit>().login();
                }
              },
            ),
          ),
        ),
      ),
    );
  }

When the status is logged in and logged out, a SnackBar Prompt results , And if it's confirm login , A dialog box pops up . The dialog box will return true or false, If it is true It means confirm to exit , Call again at this point LoginCubit Of logout Log out . The source code has been submitted to ：BLoC State management source code , The operation effect is as follows ：

Process demonstration

summary

You can see , With BlocListener, We can achieve the effect similar to the post interceptor , Do some extra processing after the state changes , For example, tips , Or upload data 、 Offline storage, etc . Deal with... In this way , It can reduce the coupling of business code .

Pay attention to the yard farmers on the island