在颤振应用程序中添加启动画面的正确方法是啥?
Posted
技术标签:
【中文标题】在颤振应用程序中添加启动画面的正确方法是啥?【英文标题】:What's the correct way to add splash screen in flutter app?在颤振应用程序中添加启动画面的正确方法是什么? 【发布时间】:2019-02-20 22:58:39 【问题描述】:我正在开发一个基于 Flutter 的应用程序,并研究了几种添加启动画面的方法。但我不确定哪一个是最好的实现。
【问题讨论】:
您可以在这里了解更多信息 - ***.com/questions/43879103/… 你可以查看我关于 Flutter 启动画面的帖子:medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548 我在这里找到了一个例子:pub.dartlang.org/packages/splashscreen#-readme-tab- 【参考方案1】: import 'dart:async';
import 'package:flutter/material.dart';
import 'package:mingup/screen/login_screen.dart';
// This is the Splash Screen
class SplashScreen extends StatefulWidget
@override
_SplashScreenState createState() => _SplashScreenState();
class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin
AnimationController _animationController;
Animation<double> _animation;
@override
void initState()
// TODO: implement initState
super.initState();
_animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 500)
);
_animation = new CurvedAnimation(
parent: _animationController,
curve: Curves.easeOut,
);
_animation.addListener(()=> this.setState(()));
_animationController.forward();
Timer(Duration(seconds: 10), ()
Navigator.push(context, MaterialPageRoute(builder: (context) => LoginScreen()));
);
@override
Widget build(BuildContext context)
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: Image.asset(
'images/splashscreenbg.png',
fit: BoxFit.cover,
)
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(
size: _animation.value * 100.0,
),
Padding(padding: EdgeInsets.only(top: 10.0)),
Text("MingUp", style: TextStyle(color: Colors.white, fontSize: 24.0, fontWeight: FontWeight.bold),)
],
),
),
),
]
)
],
),
);
【讨论】:
这是我用于动画的方法【参考方案2】:您可以只添加一个简单的启动屏幕,它可以在 5 秒后导航到下一个屏幕。
import 'package:flutter/material.dart';
import 'dart:async';
class SplashScreen extends StatefulWidget
@override
_SplashScreenState createState() => _SplashScreenState();
class _SplashScreenState extends State<SplashScreen>
@override
void initState()
super.initState();
Timer(
Duration(seconds: 5),
() => Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Home())));
@override
Widget build(BuildContext context)
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(20, 172, 168, 1),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 60.0,
child: new Image.asset(
'assets/images/tree.jpg',
width: 70,
height: 90,
)),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
'Your Text here!!',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
'Your Text here!!',
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
【讨论】:
以上是关于在颤振应用程序中添加启动画面的正确方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章
将初始化代码添加到 Spring Boot 应用程序的正确方法是啥?
在 Elixir 1.12 应用程序中启动 `:pg` 的默认范围的正确方法是啥?
在颤振形式的sqlite数据库中,在列表视图中加载7000多个项目的内存有效方法是啥