Question

我正在尝试建立一个基本的启动画面。我已经尝试了来自pub的各种软件包，例如flutter_splash，splashscreen等。它们确实显示了但具有自定义限制，例如text below logo，但是主要问题在于，它显示了默认的白屏首先，然后是我的启动屏幕之前的黑屏。

我见过关于在xml files中添加自己的资产的文档，但是似乎什么也没发生。

这是我的代码： 1. launch_background.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />

<!-- You can insert your own image assets here -->
<item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/logo.png" />
</item>

徽标已添加到各种mipmap密度文件夹中，但均未显示。 styles.xml相同，因为我想要白色背景。

使用splashscreen库，下面是代码：

import 'package:eme_clone/utils/constants.dart';

import'package：eme_clone / utils / router.dart'; 导入'package：flutter / material.dart';

void main() =>
runApp(
    MaterialApp(
      title: 'EME Water App',
      debugShowCheckedModeBanner: false,
      initialRoute: homeRoute,
      onGenerateRoute: Router.generateRoute,
    )
);

router.dart文件

import 'package:eme_clone/screens/home.dart';
import 'package:eme_clone/screens/splash.dart';
import 'package:flutter/material.dart';
import 'package:eme_clone/utils/constants.dart';

class Router {

 static Route<dynamic> generateRoute(RouteSettings settings){
   switch (settings.name){
     case splashRoute:
       return MaterialPageRoute(builder: (_)=> Splash());
     case homeRoute:
      return MaterialPageRoute(builder: (_) => Home());
      break;
    }
  }

 }

和constants.dart文件

  /**
  *  Routes
  * */

 const String splashRoute = '/splash';
 const String homeRoute = '/';

任何有助于摆脱黑屏或解释以及如何解决上述问题的帮助，我们将不胜感激。谢谢。

Answer 1

在main.dart中，创建一个SplashScreen类，然后在您的

中

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "default"
      ),
      home: SplashScreen(),
    );
  }
}

在您的SplashScreen类中添加initState，然后根据需要创建一个Future函数，

 Future _dohere()async{
     if(true){
    Navigator.pushReplacement(context, new MaterialPageRoute(builder: (context)=> HomePage()))
    }else{
    Navigator.pushReplacement(context, new MaterialPageRoute(builder: (context)=> LoginPage()))
    }
}

@override
void initState(){
 super.initState();
 _dohere();
}

Answer 2

在我的情况下，我正在使用Bloc模式进行状态管理，并且可以正常工作：基于身份验证状态，我们返回相关屏幕：

在main.dart中，使用BlocBuilder AuthenticationBloc（来自于依赖项flutter_bloc或自己使用StreamBuilder），如下所示：

class App extends StatelessWidget {

  App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
          builder: (context, state) {
            if (state is AuthenticationUnauthenticated) {
              return LoginPage();
            }

            if (state is AuthenticationLoading) {
              return LoadingIndicator();
            }

            if (state is AuthenticationAuthenticated) {
              return HomePage();
            }

            return SplashPage(); ///when state is AuthenticationUninitialized
          },
        ),
      );
    );
  }
}

颤振闪屏正确的方法？

2 个答案: