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

效果：

image

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

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