如何在我的颤振应用程序中添加启动画面？答案

【问题标题】：How can I add splash screen I my flutter app?如何在我的颤振应用程序中添加启动画面？
【发布时间】：2021-01-13 07:06:27
【问题描述】：

我正在阅读有关向应用程序添加启动画面的各种文章。我想通过启动画面包创建启动画面，也欢迎其他方法，但我无法弄清楚在哪里以及如何发布添加启动画面的代码我是颤振和飞镖的初学者。我在下面附上了所需的代码：-

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    getUserInfo();
  }

  Future getUserInfo() async {
    await getUser();
    setState(() {});
    print(uid);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Login',

      home: (uid!=null && authSignedIn != false) ? FirstScreen() : LoginPage(),
    );
  }
}

final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();

bool authSignedIn;
String uid;
String name;
String imageUrl;
Future getUser() async {
  // Initialize Firebase
  await Firebase.initializeApp();

  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool authSignedIn = prefs.getBool('auth') ?? false;

  final User user = _auth.currentUser;

  if (authSignedIn == true) {
    if (user != null) {
      uid = user.uid;
      name = user.displayName;

      imageUrl = user.photoURL;
    }
  }
}

Future<String> signInWithGoogle() async {
  // Initialize Firebase
  await Firebase.initializeApp();

  final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
  final GoogleSignInAuthentication googleSignInAuthentication = await googleSignInAccount.authentication;

  final AuthCredential credential = GoogleAuthProvider.credential(
    accessToken: googleSignInAuthentication.accessToken,
    idToken: googleSignInAuthentication.idToken,
  );

  final UserCredential userCredential = await _auth.signInWithCredential(credential);
  final User user = userCredential.user;

  if (user != null) {
    // Checking if email and name is null
    assert(user.uid != null);

    assert(user.displayName != null);
    assert(user.photoURL != null);

    uid = user.uid;
    name = user.displayName;

    imageUrl = user.photoURL;

    assert(!user.isAnonymous);
    assert(await user.getIdToken() != null);

    final User currentUser = _auth.currentUser;
    assert(user.uid == currentUser.uid);

    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setBool('auth', true);

    return 'Google sign in successful, User UID: ${user.uid}';
  }

  return null;
}

void signOutGoogle() async {
  await googleSignIn.signOut();
  await _auth.signOut();

  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setBool('auth', false);

  uid = null;
  name = null;

  imageUrl = null;

  print("User signed out of Google account");
}

【问题讨论】：

标签： android flutter dart firebase-authentication

【解决方案1】：

关于启动画面，我知道有两种方法，一种是原生的，一种是非原生的：

在这个答案中，我将为您提供不使用插件的非本地解决方案：

Splash Screen 是一个视图，您可以在其中使用 Flutter 小部件做所有您想做的事情：您可以创建视图，然后将其添加到 main.dart home: SplashScreen(); -> 显示 SplashScreen（3.5 秒），然后执行 pushReplacement 导航到您的第一个视图：
这是一个启动画面的例子：

import 'dart:async';
import 'package:flutter/material.dart';

class SplashPage extends StatefulWidget {
  @override
  createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 5),
        () => Navigator.pushReplacementNamed(context, "TabsRoute"));
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Container(
              width: 144,
              height: 144,
              child: Image.asset("images/logo.png"),
            ),
          ),
          Center(
            child: Container(
              child: Text(
                "Company Name",
                style: TextStyle(
                  fontSize: 28,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

main.dart 中的实现：

  
import 'package:flutter/material.dart';
import 'package:base_project/pages/TabsPage.dart';
import 'package:base_project/pages/SplashPage.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
 return MaterialApp(
   routes: {
     'TabsRoute':(context)=>TabsPage(),
   },
    home: SplashPage(),
    );
  }
}

Github 上的完整应用示例：https://github.com/HoussemTN/flutter_base_project

【讨论】：

【解决方案2】：

正如其他 cmets 所述，有两种方法。本机和非本机，但我会推荐本机，因为非本机需要几秒钟才能弹出，如果您使用的是调试 apk，则需要更多时间。当然，您不希望用户看到黑屏哪怕一瞬间。该方法有点棘手，您必须检查配置文件。

我将在我的一个项目中举一个例子，我只展示 android 的例子，因为我从未尝试过 IOS 解决方案。

在你的项目文件夹树中你去

your_project_name/android/app/src/main/res/

矩形区域内的文件夹是您进行此操作的工作区。您将要编辑的所有内容都是 XML 文件，您只需进行一些操作即可完成。

选择您想在初始屏幕中看到的图像，并确保它在 100 px 左右，以便您可以看到它，如果它太大，它将被渲染，但您会看到部分。并且还要确保名称不包含任何特殊字符或大写字母或空格，只需使其简单，如splash_screen，不要添加图片格式扩展名，如*.png / *.jpeg，只是名称。然后将其放入项目中的drawable 文件夹中。然后转到drawable-v21 并转到launch_background.xml 如下图所示并取消注释该评论部分

您将在此文件中进行两项更改。首先将 ic_launcher 更改为您的图片/图标名称，在我们的例子中是 splash_screen 并添加一行指定屏幕的背景颜色。

<item android:drawable="@color/teal" />

注意：teal 这是我为颜色选择的名称

最终的结果应该是这样的：

现在您只有最后一件事要做，就是以 xml 格式定义颜色，这就是我之前提到的原因，我们也将使用 values 文件夹。

转到您的 values 文件夹并创建一个名为 colors.xml 的新 XML 文件，并将此 XML 代码放入其中。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="teal">#009688</color>
</resources>

喜欢这个

当然，您需要更改颜色名称和颜色十六进制值。

瞧！

我知道这可能是一个迟到而且很长的答案，如果它现在对您没有帮助，也许它会在未来帮助有需要的人。

【讨论】：