flutter - 带自动路线的启动画面

Question

我想实现一个动画启动画面

通常在MaterialApp中，我们有一个名为home的属性，但是当我使用自动路由(MaterialApp.router)时，我无法在其中找到一个home，那么如何使用自动路由实现启动屏幕

package link

main.dart 文件

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      supportedLocales: const <Locale>[Locale('en')],
      path: 'assets/i18n',
      fallbackLocale: const Locale('en'),
      child: const App(),
    ),
  );
}
class Appp extends StatefulWidget {
  const Appp({Key? key}) : super(key: key);

  @override
  State<Appp> createState() =>
      _ApppState();
}

class _ApppState extends State<Appp> {
  final _themeStore = ThemeStore();
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      title: 'App',
      theme: _themeStore.selectedThemeData,
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}

Answer 1

首先您必须显示启动屏幕，然后对于下一个屏幕，您可以使用 MaterialApp.router

例如。

void main() {
  runApp(SplashScreen());
}

class SplashScreen extends StatelessWidget {
  SplashScreen({Key? key}) : super(key: key);
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Splash App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AnimatedSplashScreen(
        animationDuration: const Duration(seconds: 2),
        splashTransition: SplashTransition.slideTransition,
        splash: Icons.code,
        nextScreen: MaterialApp.router(
          routeInformationParser: _appRouter.defaultRouteParser(),
          routerDelegate: _appRouter.delegate(),
        ),
      ),
    );
  }
}

使用的包:

• auto route
• animated_splash_screen