Flutter单次请求管理插件one_request的使用

Flutter单次请求管理插件one_request的使用

特性

• 使用了dio，flutter_easyloading，either_dart。感谢所有这些库。

使用方法

在你的项目中使用one_request插件，首先需要添加必要的配置，并初始化加载指示器。以下是一个完整的示例代码来展示如何使用one_request插件。

添加加载配置

在main()函数中调用oneRequest.loadingconfig()以初始化加载配置。

void main() async {
  // 初始化加载配置
  oneRequest.loadingconfig();
  runApp(const MyApp());
}

在MaterialApp中初始化加载指示器

在MaterialApp中添加一个Builder来初始化加载指示器。

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    // 初始化加载指示器
    builder: oneRequest.initLoading,
    title: 'Flutter Demo one_request',
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

发送API请求

创建一个oneRequest实例并发送请求。

// 创建一个oneRequest实例
final request = oneRequest();

// 发送请求
var value = await request.send(
  // 请求URL
  url: 'https://google.com',
  // 请求方法
  method: RequestType.GET,
  // 请求头（可选）
  header: {'test': 'test'},
  // 请求体（可选）
  body: {'test': 'test'},
  // 是否为FormData（可选，默认为false）
  formData: false,
  // 最大重定向次数（可选，默认为1）
  maxRedirects: 1,
  // 请求超时时间（可选，默认为60秒）
  timeout: 60,
  // 内容类型（可选，默认为'application/json'）
  contentType: ContentType.json,
  // 响应类型（可选，默认为'json'）
  responsetype: ResponseType.json,
  // 如果响应类型包含{'status':'success','message': 'text','data':[]} 或者响应内容包含在'data'键中，则设置为true（初始值为false）
  innderData: false,
);

额外信息

修改加载配置

可以自定义加载配置，包括背景颜色、加载指示器、文本颜色等。

// 自定义加载配置
oneRequest.loadingconfig(
  // 背景颜色
  backgroundColor: Colors.amber,
  // 加载指示器
  indicator: const CircularProgressIndicator(),
  // 加载指示器颜色
  indicatorColor: Colors.red,
  // 进度指示器颜色
  progressColor: Colors.red,
  // 文本颜色
  textColor: Colors.red,
  // 成功图标
  success: const Icon(Icons.check, color: Colors.green),
  // 错误图标
  error: const Icon(Icons.error, color: Colors.red),
  // 信息图标
  info: const Icon(Icons.info, color: Colors.blue),
);

只修改加载指示器以在多个用途上使用

仅自定义加载指示器。

// 只自定义加载指示器
oneRequest.loadingconfig(
  // 加载指示器
  indicator: const CircularProgressIndicator(),
  // 状态文本
  status: 'loading',
);

关闭加载指示器

通过调用oneRequest.dismissLoading来关闭加载指示器。

// 关闭加载指示器
oneRequest.dismissLoading;

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用one_request插件。

import 'dart:io';

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

// 主应用
void main() async {
  // 初始化加载配置
  oneRequest.loadingconfig();
  runApp(const MyApp());
}

// 主应用组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      // 初始化加载指示器
      builder: oneRequest.initLoading,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _counter = '';
  List<int> filebytes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

  Future<void> _incrementCounter() async {
    // 创建oneRequest实例
    final request = oneRequest();
    // 发送请求
    var value = await request.send(
      // 请求URL
      url: 'https://catfact.ninja/fact',
      // 请求方法
      method: RequestType.GET,
      formData: true,
      body: {
        'file': [
          // 发送文件
          request.file(file: File('path'), filename: 'file'),
          request.fileFromByte(filebyte: filebytes),
          request.fileFormString(filestring: 'fileString'),
        ],
      },
    );

    setState(() {
      // 处理响应
      value.fold(
        // 成功
        (l) => _counter = l['fact'],
        // 错误
        (r) => _counter = r.toString(),
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Here is Response:',
            ),
            Text(
              // 响应值
              _counter,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 点击按钮发送请求
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}