Flutter网络数据查询插件fl_rest_query的使用

开始使用

在您的依赖项中添加fl_rest_query和fl_query。

使用方法

第一步：创建HTTP基础查询

例如，我们可以使用dio来创建HTTP基础查询。

import 'package:fl_rest_query/fl_rest_query.dart';
import 'package:dio/dio.dart' as dio;
import 'package:flutter/material.dart';

class HttpDio implements HttpBaseQuery {
  late final dio.Dio req;

  final BuildContext context;

  HttpDio(this.context, {dio.Dio? dioOverride}) {
    req = dioOverride ??
        dio.Dio(
            dio.BaseOptions(baseUrl: 'https://jsonplaceholder.typicode.com'));
  }

  [@override](/user/override)
  performMutation<T extends RestBaseQueryParams, DataType, Response>(
      params, data) async {
    var response = await req.request(params.url,
        data: data,
        queryParameters: params.params, onSendProgress: (received, total) {
    },
        options: dio.Options(
          headers: params.headers,
          method: params.method.name,
        ));
    return response.data;
  }

  [@override](/user/override)
  performQuery<T extends RestBaseQueryParams, Response>(params) async {
    var response = await req.request(params.url, queryParameters: params.params,
        onReceiveProgress: (received, total) {
    },
        options: dio.Options(
          headers: params.headers,
          method: params.method.name,
        ));
    return response.data as Response;
  }
}

第二步：初始化配置

在main.dart文件中初始化配置。

import 'package:example/page.dart';
import 'package:fl_query/fl_query.dart';
import 'package:fl_rest_query/fl_rest_query.dart';
import 'package:flutter/material.dart';

import 'http_dio.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await QueryClient.initialize(cachePrefix: 'fl_rest_query');
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return RestQueryClientProvider(
      baseQuery: HttpDio(context), // 使用自定义的HttpDio作为基础查询
      client: QueryClient(),
      child: MaterialApp(
        title: 'Rest Query',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            useMaterial3: true,
            primarySwatch: Colors.cyan,
            primaryColor: Colors.cyan),
        home: const HomePage(),
      ),
    );
  }
}

第三步：在代码中使用restMutationBuilder和RestQueryBuilder

import 'package:fl_query/fl_query.dart';
import 'package:fl_rest_query/fl_rest_query.dart';
import 'package:flutter/material.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RestQueryBuilder(
              context: context,
              params: RestBaseQueryParams(
                  method: Method.GET, tag: 'GET-POST', url: '/posts'),
              builder: (context, Query query) {
                if (query.isLoading) {
                  return const CupertinoActivityIndicator();
                }

                if (query.hasError) {
                  return Text(query.error.toString());
                }
                // 日志记录 query.data
                return RestMutationBuilder(
                    context: context,
                    params: RestBaseQueryParams(
                        method: Method.POST, tag: 'ADD-POST', url: '/posts'),
                    onData: (data, d) {
                      // 日志记录 data
                    },
                    builder: (context, mutation) {
                      return ElevatedButton(
                          onPressed: () {
                            mutation.mutate({
                              "title": 'foo',
                              "body": 'bar',
                              "userId": 1,
                            });
                          },
                          child: const Text('Add Post'));
                    });
              },
            )
          ],
        ),
      ),
    );
  }
}