在加载数据或者向后台发送请求后,需要有一个正在加载的过渡效果。可以用showDialog和插件flutter_spinkit解决。
最终效果图
抽出一个名为LoadingPage的class表达loading效果,如下:
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class LoadingPage {
final BuildContext _context;
LoadingPage(this._context);
///打开loading
void show({Function onClosed}) {
showDialog(
context: _context,
builder: (context) {
return SpinKitFadingCircle(color: Colors.white);
},
).then((value) {
onClosed(value);
});
}
///关闭loading
void close() {
Navigator.of(_context).pop();
}
}
使用LoadingPage的实例:
import 'package:flutter/material.dart';
import './common/loading_page.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首页'),
elevation: 0.0,
),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('打开Loading'),
onPressed: () {
LoadingPage loadingPage = LoadingPage(context);
loadingPage.show();
Future.delayed(
Duration(seconds: 3),
() {
loadingPage.close();
},
);
},
),
],
),
);
}
}