Flutter loading

在加载数据或者向后台发送请求后，需要有一个正在加载的过渡效果。可以用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: [
          RaisedButton(
            child: Text('打开Loading'),
            onPressed: () {
              LoadingPage loadingPage = LoadingPage(context);
              loadingPage.show();
              Future.delayed(
                Duration(seconds: 3),
                () {
                  loadingPage.close();
                },
              );
            },
          ),
        ],
      ),
    );
  }
}