Flutter蜡烛图绘制插件candlesticks的使用

candlesticks 是一个高性能、功能齐全的蜡烛图插件，适用于所有平台。本文将介绍如何在Flutter项目中使用这个插件，并提供完整的示例代码。

预览

以下是 candlesticks 在不同平台上的运行效果：

• iOS 示例
• macOS 示例

安装

步骤 1: 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  candlesticks: ^2.1.0

步骤 2: 获取包

通过 IDE 的 GUI 或者命令行获取包：

$ flutter pub get

使用方法

首先，导入 candlesticks 包：

import 'package:candlesticks/candlesticks.dart';

Candle 类

Candle 类包含六个必需的变量：date、high、low、open、close 和 volume，用于存储单个蜡烛图数据。

final candle = Candle(
  date: DateTime.now(),
  open: 1780.36,
  high: 1873.93,
  low: 1755.34,
  close: 1848.56,
  volume: 0,
);

Candlesticks 小部件

Candlesticks 小部件需要一个蜡烛图数据列表 (List<Candle>)，其中最新的数据应位于索引 0 处。onLoadMoreCandles 是一个可选的回调函数，在最后一个蜡烛图可见时调用。如果你想在顶部工具栏中添加更多操作（如 Binance Candles），可以创建自定义的 ToolBarAction 并将其添加到 actions 参数中。

完整示例代码

以下是一个完整的示例代码，展示如何从 Binance API 获取 BTCUSDT 1小时图表的数据并显示在蜡烛图上：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:candlesticks/candlesticks.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Candle> candles = [];
  bool themeIsDark = false;

  @override
  void initState() {
    fetchCandles().then((value) {
      setState(() {
        candles = value;
      });
    });
    super.initState();
  }

  Future<List<Candle>> fetchCandles() async {
    final uri = Uri.parse(
        "https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1h");
    final res = await http.get(uri);
    return (jsonDecode(res.body) as List<dynamic>)
        .map((e) => Candle.fromJson(e))
        .toList()
        .reversed
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: themeIsDark ? ThemeData.dark() : ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("BTCUSDT 1H Chart"),
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  themeIsDark = !themeIsDark;
                });
              },
              icon: Icon(
                themeIsDark
                    ? Icons.wb_sunny_sharp
                    : Icons.nightlight_round_outlined,
              ),
            )
          ],
        ),
        body: Center(
          child: Candlesticks(
            candles: candles,
          ),
        ),
      ),
    );
  }
}

说明

• fetchCandles: 该函数从 Binance API 获取 BTCUSDT 1小时图表的数据，并将其转换为 Candle 对象列表。
• Candlesticks: 这个小部件接收 candles 列表，并显示蜡烛图。

希望这个指南能帮助你快速上手 candlesticks 插件，并成功绘制出你需要的蜡烛图！如果有任何问题或改进建议，请随时提交 pull request。