Question

我正在浏览有关向应用程序添加启动画面的各种文章。我想通过闪屏包创建闪屏，也欢迎使用其他方法，但是我不知道在哪里以及如何编写添加闪屏的代码。我是Flutter和Dart的初学者。我在下面附加了所需的代码：-

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");
}

Answer 1

关于初始屏幕，我知道两种方法：原生方法和非原生方法：

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

启动画面是一个视图，您可以在其中使用启动窗口小部件执行所有操作：您可以创建视图，然后将其添加到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

Answer 2

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

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

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

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

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

选择您想在启动画面中看到的图像，并确保它在 100 像素左右，以便您可以看到它，如果它太大，它会被渲染，但您会看到部分。还要确保名称不包含任何特殊字符或大写字母或空格，只需使其简单如 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>

喜欢这个

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

瞧！

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

如何在我的Flutter应用中添加启动画面？

2 个答案: