Flutter简易加载提示插件request_easy_loading的使用

request_easy_loading 插件帮助你在向服务器发送请求时显示加载或进度对话框，并且不需要上下文即可执行此操作。

开始使用

request_easy_loading 包含创建导航键所需的最小实现，并将其传递给库。

如何使用

第一步

下载或克隆此仓库：

https://github.com/sepehr13494/request_easy_loading

第二步

进入项目根目录并在控制台中执行以下命令以获取所需的依赖项：

flutter pub get 

请求简易加载功能

request_easy_loading 提供了以下功能：

• showLoading
• showProgressDialog

现在，让我们进入 lib 文件夹，该文件夹包含应用程序的主要代码。

主程序

创建一个导航键并将其传递给 request_easy_loading 的 setNavigatorKey 方法，这将管理所有上下文。同时，将导航键传递给你的 MaterialApp 组件。

这可以帮助你在应用程序的任何位置通过以下方式访问当前上下文：

BuildContext currentContext = navigatorKey.currentState!.context;

让我们回到我们的项目中：

final navigatorKey = GlobalKey<NavigatorState>();  // 添加此行

void main() {
  WidgetsFlutterBinding.ensureInitialized();   // 添加此行
  RequestEasyLoading().setNavigatorKey(navigatorKey);   // 添加此行
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey, // 添加此行
      home: HomePage(),
    );
  }
}

现在，你可以轻松地在应用程序的任何地方使用以下代码来显示加载对话框：

showLoading(){
  RequestEasyLoading().showEasyLoading();
  // 或者你可以传递自己的可选小部件（你的小部件必须包含 Dialog 小部件）
  RequestEasyLoading().showEasyLoading(widget: myWidget);
}

或者取消加载：

cancelLoading(){
  RequestEasyLoading().cancelEasyLoading();
}

对于需要上传文件并且需要显示进度对话的请求，可以简单地使用：

showProgressDialog(){
  RequestEasyLoading().showProgressDialog(sent, total);
  // 或者你可以传递自己的可选小部件（你的小部件必须包含 Dialog 小部件）
  RequestEasyLoading().showProgressDialog(sent, total, widget: myWidget);
}

对于使用 dio 的情况，可以这样使用：

sendFileRequest(){
  dio.post(
      baseUrl,
      data: body,
      onSendProgress:(int sent,int total){
        print("$sent , $total");
        RequestEasyLoading().showProgressDialog(sent,total);
      }
  );
}

示例代码

以下是完整的示例代码：

import 'dart:async';

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

final navigatorKey = GlobalKey<NavigatorState>();
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  RequestEasyLoading().setNavigatorKey(navigatorKey);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Timer? timer;
  int sent = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Request Easy Loading"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                RequestEasyLoading().showEasyLoading();
                Future.delayed(Duration(seconds: 2), () {
                  RequestEasyLoading().cancelEasyLoading();
                });
              },
              child: Text("显示加载"),
            ),
            ElevatedButton(
              onPressed: () {
                Timer.periodic(Duration(seconds: 1), (timer) {
                  RequestEasyLoading().showProgressDialog(sent, 100);
                  if (sent == 100) {
                    timer.cancel();
                    sent = 0;
                  } else {
                    sent += 20;
                  }
                });
              },
              child: Text("显示进度加载"),
            ),
          ]
              .map((e) => Padding(
                    padding: EdgeInsets.symmetric(vertical: 16),
                    child: e,
                  ))
              .toList(),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    if (timer != null) {
      timer!.cancel();
    }
    super.dispose();
  }
}