[Day26] Flutter - Presentation Login & Splash Screen (part10)

前言

Hi, 我是鱼板伯爵今天就是把之前写的一堆功能放到Screen里面，由於是UI的部分所以程序码会很长，有些地方我只会撷取片段，建议大家看完整程序码。

完整程序码

需要具备知识

• 基本元件应用
• 专案架构 (Domain Driven Design)
• 管理程序码好帮手 ( Bloc )
• 大海捞针不是办法 ( Dartz )

Splash Screen

把首页的MultiBlocProvider加上AuthenticationBloc，并触发事件AppStarted()来检查是否有登入过。

// main.dart

BlocProvider(
  create: (context) => AuthenticationBloc(
    authRepository: authRepository,
  )..add(AppStarted()),
),

把这个画面设置成初始画面，然後当事件触发後BlocListener会监听AuthenticationBloc现在的状态进行页面切换。

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

  @override
  Widget build(BuildContext context) {
    return BlocListener<AuthenticationBloc, AuthenticationState>(
      listener: (context, state) {
        if (state is Unauthenticated) {
          context.replaceRoute(LoginScreen());
        }
        if (state is Authenticated) {
          context.replaceRoute(HomeScreen());
        }
      },
      child: Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
      ),
    );
  }
}

Login Screen

在LoginScreen这边一样加一个AuthenticationBloc监听器，检查是否登入成功取得验证。

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

  @override
  Widget build(BuildContext context) {
    return BlocListener<AuthenticationBloc, AuthenticationState>(
      listener: (context, state) {
        if (state is Authenticated) {
          context.replaceRoute(HomeScreen());
        }
      },
      child: Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                top: 200,
                child: Text(
                  "Hello",
                  style: Theme.of(context).textTheme.bodyText1,
                ),
              ),
              Positioned(
                top: 370,
                child: BlocProvider(
                  create: (context) =>
                      SignInBloc(authRepository: AuthRepository()),
                  child: LoginFrom(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Login From

创建SignInBloc然後在LoginForm里面写一个SignInBloc的监听器来检查登入成功或失败，如果登入成功的话就触法LoggedIn的事件。

Positioned(
    top: 370,
    child: BlocProvider(
      create: (context) =>
          SignInBloc(authRepository: AuthRepository()),
      child: LoginFrom(),
    ),
),

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

  @override
  Widget build(BuildContext context) {
    return BlocListener<SignInBloc, SignInState>(
      listener: (context, state) {
        if (state is SignInStateSuccess) {
          BlocProvider.of<AuthenticationBloc>(context).add(LoggedIn());
        }
        if (state is SignInStateFailure) {
          // TODO: Display a snackbar
        }
      },
      child: Column(
        children: [
          GoogleSignInButton(),
        ],
      ),
    );
  }
}

Home Screen

在首页检查验证登入状态，然後在登出按钮(左上角的小啤酒)新增LoggedOut事件。

return BlocListener<AuthenticationBloc, AuthenticationState>(
  listener: (context, state) {
    if (state is Unauthenticated) {
      context.replaceRoute(LoginScreen());
    }
  },

class SignOutButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {
        BlocProvider.of<AuthenticationBloc>(context).add(LoggedOut());
      },
      icon: Icon(
        Icons.sports_bar_rounded,
        color: Theme.of(context).shadowColor,
        size: 30,
      ),
    );
  }
}