Flutter金融图表插件candlestix的使用

candlesticks

适用于所有平台的高性能全功能蜡烛图！

网页演示：

• Binance Candles
• Binance Candles GitHub Repository

Preview（预览）

IOS	macOS

Installation（安装）

1. 在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  candlestix: ^2.2.0

1. 使用IDE的图形界面获取包，或者通过命令行运行以下命令：

$ flutter pub get

Usage（使用）

首先导入 candlestix 包：

import 'package:candlestix/candlestix.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 小部件需要一个蜡烛数据列表，最新的蜡烛数据应位于数组的第一个位置。当最后一个蜡烛变得可见时，会触发 onLoadMoreCandles 回调。如果需要在顶部工具栏中添加自定义操作（如 Binance Candles），可以创建自定义的 ToolBarAction 并将其添加到 actions 参数中。

示例代码：

Candlesticks(
  candles: candles, // 蜡烛数据列表
  annotations: [],   // 注解列表（可选）
)

完整示例代码

以下是一个完整的示例代码，展示如何使用 candlestix 插件来绘制比特币的蜡烛图。

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

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

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

class _MyAppState extends State<MyApp> {
  List<Candle> candles = []; // 存储蜡烛数据
  bool themeIsDark = false; // 是否启用深色主题

  [@override](/user/override)
  void initState() {
    // 初始化时从 API 获取蜡烛数据
    fetchCandles().then((value) {
      setState(() {
        candles = value;
      });
    });
    super.initState();
  }

  // 从 Binance API 获取蜡烛数据
  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)) // 将 JSON 数据转换为 Candle 对象
        .toList()
        .reversed // 反转顺序，使最新的蜡烛位于第一个位置
        .toList();
  }

  [@override](/user/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, // 设置蜡烛数据
            annotations: [],   // 注解列表（可选）
          ),
        ),
      ),
    );
  }
}