flutter 页面加载动画_Flutter撸一个加载动画

Flutter正式版出了,做为一个Android开发，是时候跟随大部队进坑了。在写一个登录页面的时候登录是写完了，突然发现不知道怎么搞一个加载中的动画效果，毕竟Android中有ProgressDialog可用，然而Flutter中不知道用啥，那就自己写一个出来。

目标

先上效果图：

是不是感觉跟ProgressDialog创建出来的一毛一样！！！

实现思路

使用对话框

首先想到的是用Flutter自带的SimpleDialog对话框，但是想到这玩意貌似要主动点击按钮关闭，这种方案不符合自己的要求。

根据情况返回不同布局

在加载的时候返回加载的布局，不加载的时候返回登陆页面布局，代码如下:

import 'package:flutter/material.dart';

import 'package:flutter_loading/Toast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(title: '加载动画'),

);

}

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

bool _loading = false;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

),

body: _childLayout(),

);

}

Widget _childLayout() {

if (_loading) {

return Center(

child: Container(

child: CircularProgressIndicator(),

),

);

} else {

return Center(

child: RaisedButton(

onPressed: () => _onRefresh(),

child: Text('显示加载动画'),

),

);

}

}

Future _onRefresh() async {

setState(() {

_loading = !_loading;

});

await Future.delayed(Duration(seconds: 3), () {

setState(() {

_loading = !_loading;

Toast.show(context, "加载完成");

});