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

目标

先上效果图：

目标.gif

是不是感觉跟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, "加载完成");

});

});

}

}

重点在_childLayout()方法，当加载中的时候返回环形进度条，加载完成，返回实际显示的布局，代码效果如下：