Flutter單屏啟動動畫介紹頁面製作【附視訊】
摘要：
Flutter單屏啟動動畫介紹頁面製作【附視訊】
本文為本人原創，
效果：
image
視訊連結： https://www.bilibili.com/video/av46276578/?p=2
這節課主要講的是一個單屏的啟動動畫，...
Flutter單屏啟動動畫介紹頁面製作【附視訊】
本文為本人原創，
效果：
image
視訊連結： https://www.bilibili.com/video/av46276578/?p=2
這節課主要講的是一個單屏的啟動動畫，其實很簡單的，之前以為大家都會就沒講，然後有位小夥伴私聊我，說讓我講一下，因為很多軟體用的都是單屏或者單屏下面還有跳過按鈕倒計時數字啥的，這個大家隨機應變應該會感覺很簡單的，看完我的這些教程的朋友，
那我就不說那麼多了直接開始文字教程。
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,
),
),
);
}
}
順便給大家推薦個免費的實用例子課程，