Flutter Shopify集成插件savvy_shopify的使用

Flutter Shopify 集成插件 savvy_shopify 的使用

介绍

Savvient Shopify 是一个 Flutter 包，它作为我们 API（用于 Shopify）与 Flutter 应用程序之间的桥梁。在这里，我们添加了一些方法来获取 Shopify 地点、类别、产品列表和详细信息。你只需要使用这些方法并获取结果，然后将数据设置在你希望的 UI 中。

使用

要将此库在你的代码中使用，请执行以下步骤：

1. 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     savvy_shopify: <最新版本>
   

2. 在顶部导入包：

   import 'package:savvy_shopify/savvy_shopify.dart';
   

3. 可以使用的所有方法列表：

   Future<Map<String, dynamic>?> locationListAPI()
   Future<Map<String, dynamic>?> shopCategoryListAPI({required String countryCode, required String pageIndex})
   Future<Map<String, dynamic>?> shopProductListAPI({required String countryCode, required String categoryId, required String pageIndex, String searchText = ""})
   Future<Map<String, dynamic>?> shopProductDetailAPI({required String countryCode, required String productId})
   

示例

示例可以在 这里 找到，并且有 Dart 版本的例子可以在 这里 的示例目录中找到。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 savvy_shopify 插件获取和展示 Shopify 地点列表：

import 'package:example/location_res_model.dart';
import 'package:flutter/material.dart';
import 'package:savvy_shopify/savvy_shopify.dart';

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

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

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopify Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Shopify 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> {
  List<LocationResModel> _arrLocationResModel = [];

  [@override](/user/override)
  void initState() {
    // 初始化状态
    super.initState();
    getLocationList();
  }

  void getLocationList() {
    // 设置 API 令牌
    SavvyShopify.token = "0";
    // 调用获取地点列表的方法
    SavvyShopify().locationListAPI().then((value) {
      if (value != null) {
        // 将返回值解析为 Map
        Map<String, dynamic> response = value;
        debugPrint('Location Response: ${response.toString()}');
        // 解析响应数据
        final LocationMainResModel resModel = LocationMainResModel.fromJson(response);
        _arrLocationResModel = resModel.data ?? [];
        // 更新 UI
        if (mounted) {
          setState(() {
            _arrLocationResModel = _arrLocationResModel;
          });
        }
      }
    });
  }

  void getShopCategoryList() {
    // 设置 API 令牌
    SavvyShopify.token = "0";
    // 调用获取店铺分类列表的方法
    SavvyShopify()
        .shopCategoryListAPI(countryCode: "AU", pageIndex: "1")
        .then((value) {
      if (value != null) {
        // 将返回值解析为 Map
        Map<String, dynamic> response = value;
        debugPrint('Shop Category Response: ${response.toString()}');
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: _arrLocationResModel.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
                title: Text(_arrLocationResModel[index].locationCountryName ?? ''));
          }),
    );
  }
}