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實用例子進階課程