flutter_loading 是一个用于在 Flutter 应用中显示加载状态的插件。它可以帮助你在异步操作（如网络请求、数据库查询等）期间显示加载指示器，以改善用户体验。以下是使用 flutter_loading 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_loading 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_loading: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_loading 包：

import 'package:flutter_loading/flutter_loading.dart';

3. 使用 FlutterLoading

FlutterLoading 提供了多种方法来显示和隐藏加载指示器。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_loading/flutter_loading.dart';

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  Future<void> _simulateLoading() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Loading Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _isLoading ? null : _simulateLoading,
              child: Text('Start Loading'),
            ),
            SizedBox(height: 20),
            if (_isLoading) FlutterLoading(),
          ],
        ),
      ),
    );
  }
}

4. 自定义加载指示器

FlutterLoading 允许你自定义加载指示器的外观。你可以通过传递 loadingWidget 参数来指定自定义的加载 widget：

FlutterLoading(
  loadingWidget: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
  ),
)

5. 显示和隐藏加载指示器

你可以在异步操作开始和结束时手动显示和隐藏加载指示器：

FlutterLoading.show(context); // 显示加载指示器

// 执行异步操作
await Future.delayed(Duration(seconds: 2));

FlutterLoading.hide(); // 隐藏加载指示器

6. 完整示例

以下是一个完整的示例，展示了如何使用 FlutterLoading 来显示和隐藏加载指示器：

import 'package:flutter/material.dart';
import 'package:flutter_loading/flutter_loading.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Loading Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  Future<void> _simulateLoading() async {
    setState(() {
      _isLoading = true;
    });

    // 显示加载指示器
    FlutterLoading.show(context);

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));

    // 隐藏加载指示器
    FlutterLoading.hide();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Loading Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _isLoading ? null : _simulateLoading,
              child: Text('Start Loading'),
            ),
          ],
        ),
      ),
    );
  }
}