Flutter API客户端插件flux_api_client的使用

Flutter API客户端插件flux_api_client的使用

Flux API Client

Flux API Client 是一个用于轻松高效地处理HTTP请求的Flutter包，支持动态响应映射。

特性

• 支持GET、POST、PUT和DELETE HTTP请求。
• 简单的JSON序列化和反序列化。
• 可定制化的错误处理，带有日志选项。
• 与Flutter应用程序易于集成。

开始使用

创建模型类

定义一个表示API期望返回的数据的模型类。例如，对于Product实体：

class Product {
  final int? id;
  final String name;
  final String username;

  Product({this.id, required this.name, required this.username});

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'],
      name: json['name'],
      username: json['username'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'username': username,
    };
  }
}

ProductsPage

ProductsPage是一个简单的UI，用于显示产品列表、创建新产品和删除现有产品。

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

class _ProductsPageState extends State<ProductsPage> {
  late Future<List<Product>?> futureProducts;
  final String url = 'https://jsonplaceholder.typicode.com/users';

  [@override](/user/override)
  void initState() {
    super.initState();
    futureProducts = fetchProducts();
  }

  Future<List<Product>?> fetchProducts() async {
    final getRequest = GetRequest<Product>(
      url: url,
      fromJson: (json) => Product.fromJson(json),
    );
    return await getRequest.fetchProducts();
  }

  Future<void> createProduct() async {
    final newProduct = Product(id: null, name: "shiboo", username: "sarvajeet");

    final postRequest = PostRequest<Product>(
      url: url,
      fromJson: (json) => Product.fromJson(json),
      body: newProduct.toJson(),
    );

    final response = await postRequest.send();
    if (response != null) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Product Created: ${response.name}')),
      );
      setState(() {
        futureProducts = fetchProducts();
      });
    }
  }

  Future<void> deleteProduct(int id) async {
    final deleteRequest = DeleteRequest<Product>(
      url: '$url/$id',
      fromJson: (json) => Product.fromJson(json),
      shouldPrintErrors: true,
      shouldPrintStackTrace: true,
    );

    final isDeleted = await deleteRequest.delete();
    if (isDeleted ) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Product Deleted Successfully.')),
      );
      setState(() {
        futureProducts = fetchProducts();
      });
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Error deleting product.')),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Products')),
      body: FutureBuilder<List<Product>?>(
        future: futureProducts,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (snapshot.data == null || snapshot.data!.isEmpty) {
            return const Center(child: Text('No products found.'));
          } else {
            final products = snapshot.data!;
            return ListView.builder(
              itemCount: product.length,
              itemBuilder: (context, index) {
                final product = product[index];

                return ListTile(
                  title: Text(product.name),
                  subtitle: Text(product.username),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () => deleteProduct(product.id!),
                  ),
                );
              },
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: createProduct,
        tooltip: 'Create Product',
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用示例

下面是一个完整的示例代码，展示了如何使用flux_api_client插件来处理HTTP请求并管理状态。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ProductsPage(),
    );
  }
}

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

class _ProductsPageState extends State<ProductsPage> {
  late Future<List<Product>?> futureProducts;
  final String url = 'https://jsonplaceholder.typicode.com/users';

  [@override](/user/override)
  void initState() {
    super.initState();
    futureProducts = fetchProducts();
  }

  Future<List<Product>?> fetchProducts() async {
    final getRequest = GetRequest<Product>(
      url: url,
      fromJson: (json) => Product.fromJson(json),
    );
    return await getRequest.fetchProducts();
  }

  Future<void> createProduct() async {
    final newProduct = Product(id: null, name: "shiboo", username: "sarvajeet");

    final postRequest = PostRequest<Product>(
      url: url,
      fromJson: (json) => Product.fromJson(json),
      body: newProduct.toJson(),
    );

    final response = await postRequest.send();
    if (response != null {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Product Created: ${response.name}')),
      );
      setState(() {
        futureProducts = fetchProducts();
      });
    }
  }

  Future<void> deleteProduct(int id) async {
    final deleteRequest = DeleteRequest<Product>(
      url: '$url/$id',
      fromJson: (json) => Product.fromJson(json),
      shouldPrintErrors: true,
      shouldPrintStackTrace: true,
    );

    final isDeleted = await deleteRequest.delete();
    if (isDeleted {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Product Deleted Successfully.')),
      );
      setState(() {
        futureProducts = fetchProducts();
      });
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Error deleting product.')),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Products')),
      body: FutureBuilder<List<Product>?>(
        future: futureProducts,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (snapshot.data == null || snapshot.data!.isEmpty) {
            return const Center(child: Text('No products found.'));
          } else {
            final products = snapshot.data!;
            return ListView.builder(
              itemCount: products.length,
              itemBuilder: (context, index) {
                final product = products[index];

                return ListTile(
                  title: Text(product.name),
                  subtitle: Text(product.username),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () => deleteProduct(product.id!),
                  ),
                );
              },
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: createProduct,
        tooltip: 'Create Product',
        child: const Icon(Icons.add),
      ),
    );
  }
}