Flutter电商集成插件flutter_canvas_woocommerce的使用

Flutter电商集成插件flutter_canvas_woocommerce的使用

一个帮助与WooCommerce API进行通信的Flutter插件，由fluttercanvas.io开发。

开始使用

要使用此插件，请遵循以下步骤：

1. 获取WooCommerce消费者密钥和密钥及域名URL

在您的main.dart文件中，使用init函数初始化一个FlutterCanvasWooCommerce实例。

// 初始化插件实例
FlutterCanvasWooCommerce.instance.init(
  url: 'your_domain_url', // 填写您的WooCommerce域名URL
  consumerKey: 'your_consumerKey', // 填写您的消费者密钥
  consumerSecret: 'your_consumerSecret' // 填写您的消费者密钥
);

确保将'your_domain_url'、'your_consumerKey'和'your_consumerSecret'替换为您的实际WooCommerce域名URL、消费者密钥和消费者密钥。

2. 在项目中使用API

例如，要获取产品列表，可以按如下方式实现：

// 获取产品列表
FlutterCanvasWooCommerce.instance.fetchProducts(pageNumber: 1, perPage: 15);

完整示例代码

以下是一个完整的示例代码，展示了如何在项目中使用flutter_canvas_woocommerce插件。

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

import 'home.dart'; // 引入主页文件

void main() async {
  runApp(const MyApp());
  
  // 初始化插件实例
  await FlutterCanvasWooCommerce.instance.init(
      baseUrl: 'your_site_url', // 填写您的WooCommerce域名URL
      consumerKey: 'your_consumer_key', // 填写您的消费者密钥
      consumerSecret: 'your_consumer_secrete' // 填写您的消费者密钥
  );
}

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

  // 这个小部件是您的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Canvas WooCommerce API Demo', // 应用标题
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 颜色方案
        useMaterial3: true, // 使用Material 3设计
      ),
      home: const Home(), // 主页
    );
  }
}

主页文件（Home.dart）

为了完整展示，这里附上主页文件Home.dart的内容：

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

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

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<dynamic> _products = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 获取产品列表
    FlutterCanvasWooCommerce.instance.fetchProducts(pageNumber: 1, perPage: 15).then((value) {
      setState(() {
        _products = value;
      });
    }).catchError((error) {
      print('Error fetching products: $error');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('产品列表'),
      ),
      body: ListView.builder(
        itemCount: _products.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_products[index]['name']),
            subtitle: Text(_products[index]['price'].toString()),
          );
        },
      ),
    );
  }
}