Flutter居中加载指示器插件center_loading的使用

在Flutter开发中，有时我们需要在页面中央显示一个加载指示器，以提示用户当前正在加载数据或执行某个操作。本文将介绍如何使用center_loading插件来实现这一功能。

特性

• 简单易用：只需几行代码即可在页面中央添加加载指示器。
• 灵活配置：支持多种样式和颜色的加载指示器。

开始使用

添加依赖

首先，在你的pubspec.yaml文件中添加center_loading依赖：

dependencies:
  center_loading: ^1.0.0

然后运行以下命令安装依赖：

flutter pub get

导入包

在需要使用的Dart文件中导入center_loading包：

import 'package:center_loading/center_loading.dart';

使用示例

以下是一个简单的示例，展示如何在页面中央添加一个加载指示器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CenterLoadingExample(),
    );
  }
}

class CenterLoadingExample extends StatefulWidget {
  @override
  _CenterLoadingExampleState createState() => _CenterLoadingExampleState();
}

class _CenterLoadingExampleState extends State<CenterLoadingExample> {
  bool isLoading = false;

  void _showLoader() {
    setState(() {
      isLoading = true;
    });
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('中心加载指示器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _showLoader,
              child: Text('显示加载指示器'),
            ),
            SizedBox(height: 20),
            CenterLoading(
              isLoading: isLoading,
              child: Text('加载完成！'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

1. 导入包：

   import 'package:center_loading/center_loading.dart';
   

   导入center_loading包以便使用其中的CenterLoading组件。

2. 定义状态管理：

   bool isLoading = false;
   
   void _showLoader() {
     setState(() {
       isLoading = true;
     });
     Future.delayed(Duration(seconds: 3), () {
       setState(() {
         isLoading = false;
       });
     });
   }
   

   定义了一个isLoading变量来控制加载指示器的显示状态，并通过按钮点击事件触发加载逻辑。

3. 使用CenterLoading组件：

   CenterLoading(
     isLoading: isLoading,
     child: Text('加载完成！'),
   )