如何在我的 Flutter 應用程序中添加啟動畫面？

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

關於閃屏，我知道有兩種方法，一種是原生的，另一種是非原生的：

在這個答案中，我將在不使用插件的情況下為您提供非本地解決方案：

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

Answer 2

我正在閱讀有關向應用程序添加啟動屏幕的各種文章。 我想通過閃屏包創建閃屏，也歡迎使用其他方法，但是我不知道在哪里以及如何編寫添加閃屏的代碼。我是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 3

正如其他評論中所述，有兩種方法。 本機和非本機，但我會推薦本機，因為非本機需要幾秒鍾才能彈出，如果您使用調試 apk，則需要更多時間。 當然，您不希望用戶看到那個黑屏，即使是一瞬間。 該方法是一個有點棘手的提示，您必須查看配置文件。

我將在我的一個項目中舉一個例子，我只展示 android 一個，因為我從未嘗試過 IOS 解決方案。

在你的項目文件夾樹中，你去

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

矩形區域內的文件夾是您進行此操作的工作區。 您要編輯的所有內容都是 XML 文件，您只需稍作修改即可完成。

選擇你想在啟動畫面中看到的圖像，並確保它在 100 像素左右，以便你可以看到它，如果它太大，它會被渲染，但你會看到部分。 並且還要確保名稱不包含任何特殊字符或大寫字母或空格，只需像splash_screen一樣簡單，不要添加像*.png / *.jpeg這樣的圖片格式擴展名。 然后將其放入drawable中的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>

像這樣

當然，您需要更改顏色名稱和顏色十六進制值。

瞧！

我知道這可能是一個遲到的答案，而且是一個很長的答案，如果它現在對你沒有幫助，也許它會在未來幫助有需要的人。