共计 2215 个字符，预计需要花费 6 分钟才能阅读完成。
Flutter 单屏启动动画介绍页面制作【附视频】本文为本人原创，
效果：
视频链接：https://www.bilibili.com/vide… 这节课主要讲的是一个单屏的启动动画，其实很简单的，之前以为大家都会就没讲，然后有位小伙伴私聊我，说让我讲一下，因为很多软件用的都是单屏或者单屏下面还有跳过按钮倒计时数字啥的，这个大家随机应变应该会感觉很简单的，看完我的这些教程的朋友，
那我就不说那么多了直接开始文字教程。
main 等东西就不说了，home 里面写了个 SingleScreen() 然后我们就创建文件之后导入了，SingleScreen 是一个动态的 widget 类，我们在里面就写个充满屏幕的图片就行了，用的图片获取方式是 network，
然后我们写了个初始化，里面有个倒计时，
void initState() {
super.initState();
conutDown();
}
然后倒计时里面我们写了个延时的东西，里面的参数是转到新页面的方法
void conutDown() {
var _duration = Duration(seconds: 3);
Future.delayed(_duration, newPage);
}
之后新页面的方法写的就是给他替换路由名字为 /newPage
void newPage() {
Navigator.of(context).pushReplacementNamed(‘/NewPage’);
}
之后我们的 main.dart 的 materialApp 就接收一个新的路由并写东西，就写了给他跳转到新页面
routes: <String, WidgetBuilder> {
‘/NewPage’ : (context) => NewPage()
},
然后新页面就很简单了，就是我们的想跳转到的页面了，
Scaffold(
appBar: AppBar(
title: Text(‘ 单屏介绍 ’),
centerTitle: true,
),
body: Center(
child: Text(
‘ 新页面 ’,
style: Theme.of(context).textTheme.display2,
),
),
)
大概就是介个样子啦，那我们就来把源码呈上来了：main.dart
import ‘package:flutter/material.dart’;
import ‘single_screen.dart’;
import ‘new_page.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘SingleScreen’,
theme: ThemeData(
primaryColor: Colors.blue,
),
home: SingleScreen(),
routes: <String, WidgetBuilder> {
‘/NewPage’ : (context) => NewPage()
},
);
}
}
single_screen.dart
import ‘package:flutter/material.dart’;
import ‘package:flutter/widgets.dart’;
import ‘dart:async’;
class SingleScreen extends StatefulWidget {
@override
_SingleScreenState createState() => _SingleScreenState();
}
class _SingleScreenState extends State<SingleScreen> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Image.network(
‘http://img.wxcha.com/file/201606/30/1978c43117.jpg’,
fit: BoxFit.cover,
),
);
}
void initState() {
super.initState();
conutDown();
}
void conutDown() {
var _duration = Duration(seconds: 3);
Future.delayed(_duration, newPage);
}
void newPage() {
Navigator.of(context).pushReplacementNamed(‘/NewPage’);
}
}
new_page.dart
import ‘package:flutter/material.dart’;
class NewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘ 单屏介绍 ’),
centerTitle: true,
),
body: Center(
child: Text(
‘ 新页面 ’,
style: Theme.of(context).textTheme.display2,
),
),
);
}
}
顺便给大家推荐个免费的实用例子课程，
Flutter 实用例子进阶课程