在发起请求时 需要有loading页面这样可以让用户知道当前正在操作,又可以防止多次点击等误操作,所以这里就自定义了一个loading页面 菊花使用flutter_spinkit里面的菊花来代替
在需要显示loding的地方通过showDialog的弹窗的方式来显示菊花,在需要关闭的时候让dialog关闭
这里使用了flutter_spinkit
flutter_spinkit: ^4.0.0
具体代码
loading.dart
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class Loading extends StatelessWidget {
BuildContext ctx;
@override
Widget build(BuildContext context) {
ctx = context;
return Container(
color: Colors.transparent,
child: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
width: 60,
height: 60,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SpinKitFadingCircle(
color: Colors.black,
size: 46.0,
)
],
),
),
),
);
}
void dismiss() {
Navigator.pop(ctx);
}
}
关于使用
创建Loading对象
Loading loading = Loading();
实现下面两个方法
void showLoading() {
showDialog(
barrierDismissible: true,
context: context,
builder: (ctx) => Theme(
data: Theme.of(ctx)
.copyWith(dialogBackgroundColor: Colors.transparent),
child: loading,
));
}
void dissmiss() {
loading.dismiss();
}
需要loading的地方
showLoading();
关闭
dissmiss();