Flutter封装loading加载动画

两个必需参数：isLoading和child。isLoading参数用于控制是否显示loading动画和蒙层，而child参数则用于传递页面内容。

import 'package:flutter/material.dart';

class LoadingOverlay extends StatelessWidget {
  final bool isLoading;
  final Widget child;

  LoadingOverlay({required this.isLoading, required this.child});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        if (isLoading)
          Positioned.fill(
            child: Container(
              color: Colors.black.withOpacity(0.5),
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ),
      ],
    );
  }
}

使用这个控件

import 'package:flutter/material.dart';
import 'package:my_app/loading_overlay.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool isLoading = false;

  void _login() async {
    setState(() {
      isLoading = true;
    });

    // 发送网络请求
    // ...

    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return LoadingOverlay(
      isLoading: isLoading,
      child: Scaffold(
        appBar: AppBar(
          title: Text('My Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _login,
            child: Text('Login'),
          ),
        ),
      ),
    );
  }
}

当然可以在LoadingOverlay里边添加Text提示文字,动画效果也可自定义,就不做示例了。