Flutter JSON数据解析插件json_getter的使用

JsonGetter

该插件是一个有用的Flutter工具，用于从JSON结构中提取值。

特性

• 轻松地从JSON结构中提取值。
• 支持多种过滤器以细化数据提取。

开始使用

要使用此插件，请确保已安装Flutter，并将其添加到你的pubspec.yaml文件中。

步骤 1: 添加插件

在pubspec.yaml文件中添加插件：

dependencies:
  json_getter: ^0.0.1

步骤 2: 导入插件

在Dart文件中导入插件：

import 'package:json_getter/json_getter.dart';

使用方法

使用JSON字符串

const jsonString = '{"key1": "value1", "key2": "value2"}';
final filters = FiltersMapper.fromJson(
    '{"filters":[{"selectorType":"getValueByKey","filterBy":null,"key":"key1","operator":null,"value":null}]}',
);

final result = JsonGetter.get(filters: filters, json: jsonString);
print(result); // 输出: value1

使用JSON Map

const jsonString = {'key1': 'value1', 'key2': 'value2'};
final filters = Filters(
  filters: [
    const Filter(
      selectorType: SelectorType.getValueByKey,
      key: 'key1',
    ),
  ],
);

final result = JsonGetter.get(filters: filters, json: jsonString);
print(result); // 输出: value1

示例

完整示例代码

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

import 'data.mocks.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter JSON Getter Example',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<List<Product>> productList = ValueNotifier([]);

  Future<void> _getProducts() async {
    productList.value = productJsonMock
        .map((json) => Product.fromJson(json, filters: filtersConfigMock))
        .toList();
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    _getProducts();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder(
        valueListenable: productList,
        builder: (context, value, child) {
          return ListView.builder(
            itemCount: value.length,
            itemBuilder: (context, index) {
              return ProductCard(product: value[index]);
            },
          );
        },
      ),
    );
  }
}

class Product {
  Product({
    this.name,
    this.price,
    this.image,
    this.customFields,
  });

  factory Product.fromJson(
    Map<String, dynamic> json, {
    Map<String, Map<String, List<Map<String, String?>>>>? filters,
  }) {
    final name = json['name']?.toString();

    final price = json['price']?.toString();

    final images = json['images'];
    final image = (images is List<Map> && images.isNotEmpty)
        ? images[0]['src']?.toString()
        : null;

    final customFields = filters?.map(
      (key, filter) {
        return MapEntry(
          key,
          JsonGetter.get(
            filters: FiltersMapper.fromMap(filter),
            json: json,
          ),
        );
      },
    );

    return Product(
      name: name,
      price: price,
      image: image,
      customFields: customFields,
    );
  }

  final String? name;
  final String? image;
  final String? price;

  /// Custom fields from json_getter filters
  final Map<String, dynamic>? customFields;
}

class ProductCard extends StatelessWidget {
  const ProductCard({super.key, required this.product});

  final Product product;

  Widget _renderProductDetails(Product product) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        if (product.name != null) Text(product.name!),
        if (product.price != null) Text('Price: \$${product.price}'),
        if (product.customFields?['categories']?.toString().isNotEmpty ?? false)
          Text(
            'Categories: ${product.customFields?['categories']}',
          ),
        if (product.customFields?['tags']?.toString().isNotEmpty ?? false)
          Text('Tags: ${product.customFields?['tags']}'),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.sizeOf(context);
    final isLandscape =
        MediaQuery.of(context).orientation == Orientation.landscape;

    return Container(
      padding: const EdgeInsets.all(8.0),
      margin: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        border: Border.all(),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: (screenSize.width > 720 || isLandscape)
          ? Row(
              spacing: 8,
              children: [
                if (product.image != null)
                  Flexible(child: Image.network(product.image!)),
                _renderProductDetails(product),
              ],
            )
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (product.image != null) Image.network(product.image!),
                _renderProductDetails(product),
              ],
            ),
    );
  }
}