添加一个启动屏幕颤振应用程序

你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前，在Scaffold(home:X)小部件加载之前，会有一个短暂的颜色闪烁。

当前回答

这是在Flutter中添加动态启动画面的最佳方法。

主要。飞镖

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

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));

SPLASHSCREEN。飞镖

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';


class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

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

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    animation =
        new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 30.0),
                child: new Image.asset(
                  'assets/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

常量。飞镖

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

主屏幕。飞镖

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}

2019-11-14 12:53:04

其他回答

Flutter为您提供了默认的启动画面的能力，但有很多插件可以做这项工作。如果你不想使用插件来完成任务，你担心添加一个新的插件可能会影响你的应用程序大小。然后你可以这样做。

为安卓

打开launch_background.xml，然后你可以放入启动画面图像，或者你想要的渐变颜色。这是用户打开应用程序时看到的第一件事。

为IOS

用Xcode打开你的应用，点击Runner > asset。xcassets > LaunchImage，你可以在这里添加图像。如果你想编辑启动屏幕图像的位置，你可以在LaunchScreen.storyboard上编辑。

2019-09-11 08:30:13

以下是在IOS和Android平台上为Flutter应用程序配置启动画面的步骤。

IOS平台

所有提交到苹果应用商店的应用程序都必须使用Xcode故事板来提供应用程序的启动屏幕。让我们分三步来做:-

第一步:打开ios/Runner。Xcworkspace从应用程序目录的根目录。

步骤2:选择Runner/Assets。从Project Navigator中拖动所有大小的启动图像(2x, 3x等)。您还可以从https://appicon.co/#image-sets生成不同大小的图像

步骤3:你可以看到启动屏幕。故事板文件显示了所提供的图像，在这里您还可以通过简单地拖动图像来更改图像的位置。有关更多信息，请参阅官方文档https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Android平台

在Android中，当你的Android应用程序初始化时，会显示一个启动屏幕。让我们在3个步骤中设置这个启动屏幕:-

第一步:打开android/app/src/main/res/drawable/launch_background.xml文件。

第二步:在第4行，您可以选择所需的颜色:-

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

第三步:在第10行，你可以改变图像:-

android:src="@mipmap/launch_image"

就这样，你完成了!快乐编码:)

2020-05-28 17:18:20

有两种方法

转到本机包和初始页面。就像在原生Android包中创建一个drawable 创建一个省道屏幕来显示一段时间

我在这里找到了关于移除白屏和显示启动画面的完整解释

2020-07-30 12:56:36

对于那些像我一样严格按照步骤来做的人来说，它仍然没有发挥作用……

如果你有一个drawable-v21文件夹，请注意，因为你需要将你的代码从drawable文件夹> launch_background.xml code复制到drawable-v21文件夹> launch_background.xml

我的项目不喜欢android:src="@mipmap/launch" />

因此，我有android:src="@drawable/launch" />

2022-08-24 09:55:18