dart 当我有routemaster软件包时,如何在Flutter应用程序中添加闪屏?

8nuwlpux  于 2023-09-28  发布在  Flutter
关注(0)|答案(1)|浏览(141)

新手程序员,第一次问这里。你好啊!
我做了一个Flutter项目,并使用routemaster来决定用户是否登录;如果Firebase识别用户并有数据,则用户应转到主屏幕,如果没有数据,则应重定向到登录屏幕。
我想有一个闪屏有两个原因:首先,它是很好的显示标志几秒钟,其次,因为我有这个相同的problem.
当我打开我的应用程序时,它会显示登录屏幕一两秒钟,直到应用程序知道Thre是否是数据,我担心如果用户的互联网连接很慢,它可能会在屏幕上显示更长时间。

main.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_first_flutter_app/core/common/error_text.dart';
import 'package:my_first_flutter_app/core/common/loader.dart';
import 'package:my_first_flutter_app/features/auth/controller/auth_controller.dart';
import 'package:my_first_flutter_app/firebase_options.dart';
import 'package:my_first_flutter_app/models/user_model.dart';
import 'package:my_first_flutter_app/router.dart';
import 'package:my_first_flutter_app/theme/pallete.dart';
import 'package:routemaster/routemaster.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends ConsumerStatefulWidget {
  const MyApp({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends ConsumerState<MyApp> {
  UserModel? userModel;

  void getData(WidgetRef ref, User data) async {
    userModel = await ref
        .watch(authControllerProvider.notifier)
        .getUserData(data.uid)
        .first;
    ref.read(userProvider.notifier).update((state) => userModel);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return ref.watch(authStateChangeProvider).when(
          data: (data) => MaterialApp.router(
            debugShowCheckedModeBanner: false,
            title: 'My Flutter App',
            theme: ref.watch(themeNotifierProvider),
            routerDelegate: RoutemasterDelegate(
              routesBuilder: (context) {
                if (data != null) {
                  getData(ref, data);
                  if (userModel != null) {
                    return loggedInRoute;
                  }
                }
                return loggedOutRoute;
              },
            ),
            routeInformationParser: const RoutemasterParser(),
          ),
          error: (error, stackTrace) => ErrorText(error: error.toString()),
          loading: () => const Loader(),
        );
  }
}

router.dart

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/features/auth/screen/login_screen.dart';
import 'package:my_first_flutter_app/features/home/screens/home_screen.dart';
import 'package:routemaster/routemaster.dart';

final loggedOutRoute = RouteMap(routes: {
  '/': (_) => const MaterialPage(child: LoginScreen()),
});

final loggedInRoute = RouteMap(routes: {
  '/': (_) => const MaterialPage(child: HomeScreen()),
});

我没有在这里放更多的代码,以免混淆问题。如果您需要登录屏幕或主屏幕,或其他文件,我可以把它放在下面。
我试着用我的问题中的答案。我还试着启动名为SplashScreenToHome和SplashScreenToLogin的屏幕(都是空白页面,分别重定向到主屏幕和登录屏幕)。然后我修改了router.dart重定向到这两个屏幕,两秒钟后会自动重定向到各自的屏幕。当用户登录时,它确实工作(当Firebase有数据时,路由器将重定向到SplashScreenToHome,这将自动重定向到HomeSCreen)。但是,当没有数据时,路由器会重定向到SplashScreenToLogin,但不会重定向到LoginScreen。
这是我尝试过的一种变通方法,但我的直觉告诉我,这不是一个好的解决方案。但在编程POV我没有经验,不知道。
先谢了。编码愉快!

vlju58qv

vlju58qv1#

您可以使用以下软件包
https://pub.dev/packages/flutter_native_splash
这将在支持的平台上生成启动屏幕所需的代码。

相关问题