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

你会如何在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

其他回答

你有多种方法可以做到这一点，但我使用的最简单的方法是:

对于启动图标，我使用颤振库颤振启动图标

对于自定义启动画面，我创建了不同的屏幕分辨率，然后根据Android的分辨率在mipmap文件夹中添加启动图像。

最后是调整Android中res文件夹中drawable文件夹中的launch_background.xml。

只需更改代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- <item android:drawable="@android:color/white" />
    <item android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

我所见过的少数开发人员将splash添加为可绘制的，我尝试了这一点，但不知为何在Flutter 1.0.0和Dart SDK 2.0+中构建失败。因此，我更喜欢在位图部分添加飞溅。

iOS的飞溅屏幕制作相对简单。

在iOS的Runner文件夹中，只需将LaunchImage.png文件更新为自定义启动画面图像，名称与LaunchImage.png @2x， @3x， @4x相同。

只是一个补充，我觉得在LaunchImage.imageset中有一个4倍的图像很好。只需在Content中更新代码即可。Json与以下行，以下3x规模添加一个4倍规模的选项:

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

2018-12-24 07:04:50

当我们必须在应用程序启动之前获得用户位置或其他数据时，我们可以在flutter中使用自定义启动画面，这将使您的应用程序用户友好

代码如下:示例:-

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

main(){
  runApp(MyApp());
 }

 class MyApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
    return SplashScreen();
 }
}

class SplashScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return SplashScreenState();
  }
}

class SplashScreenState extends State<SplashScreen>{
  @override
  void initState() {
    super.initState();
    when we have to get data we can show splash 
    Like this:- 
    FutureMethodForData.then((value) {
       Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        );

    });
    Or we can show splash for fix duration like this:-
    Future.delayed(
      Duration(
        seconds: 4
      ),
      (){
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        );
      }
  );
}
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.red,
      body: // add image text or whatever you want as splash
    ),
  );
}
}

2021-12-28 12:00:03

对于Android，进入Android > app > src > main > res > drawable > launcher_background.xml

现在取消注释，用你的图像位置替换@mipmap/launch_image。

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

你可以在这里改变屏幕的颜色

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

2018-05-11 11:50:36

Flutter实际上为我们的应用程序添加启动画面提供了一种更简单的方法。我们首先需要像设计其他应用程序屏幕一样设计一个基本页面。您需要将其设置为StatefulWidget，因为它的状态将在几秒钟内发生变化。

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

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

逻辑在initState()中，调用一个Timer()，如你所愿，我设置为3秒，完成后将导航器推到应用程序的主屏幕。

注意:应用程序应该只显示一次启动画面，用户不应该在返回按钮按下时再次返回。为此，我们使用Navigator.pushReplacement()，它将移动到一个新屏幕，并从导航历史堆栈中删除前一个屏幕。

要更好地了解，请访问Flutter:设计您自己的启动画面

2019-03-09 05:41:04