Flutter单屏启动动画介绍页面制做【附视频】

Flutter单屏启动动画介绍页面制做【附视频】
本文为本人原创，

效果：

视频连接：www.bilibili.com/video/av462…
这节课主要讲的是一个单屏的启动动画，其实很简单的，以前觉得你们都会就没讲，而后有位小伙伴私聊我，说让我讲一下，由于不少软件用的都是单屏或者单屏下面还有跳过按钮倒计时数字啥的，这个你们随机应变应该会感受很简单的，看完个人这些教程的朋友，

那我就不说那么多了直接开始文字教程。复制代码

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实用例子进阶课程