flutter loading


在发起请求时 需要有loading页面这样可以让用户知道当前正在操作，又可以防止多次点击等误操作，所以这里就自定义了一个loading页面 菊花使用flutter_spinkit里面的菊花来代替
在需要显示loding的地方通过showDialog的弹窗的方式来显示菊花，在需要关闭的时候让dialog关闭
这里使用了flutter_spinkit


flutter_spinkit: ^4.0.0


具体代码
loading.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
  }
}

关于使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
创建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();