Flutter数字资产K线图插件candlestick_digiasset的使用

Flutter数字资产K线图插件candlesticks_digiasset的使用

candlesticks_digiasset

pub package

一个适用于所有平台的高性能全功能K线图插件！

Web演示：

预览

IOS macOS
iOS示例 macOS示例

安装

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

    dependencies:
  candlesticks: ^2.1.0

  2. 使用IDE的图形界面或命令行获取包：

    $ flutter pub get

使用

首先导入插件：

import 'package:candlesticks/candlesticks.dart';

Candle

Candle类包含六个必需的变量，用于保存单个蜡烛数据：日期、最高价、最低价、开盘价、收盘价和成交量。

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

Candlesticks

Candlesticks小部件需要一个蜡烛列表。数组中的蜡烛排列应使最新的蜡烛位于位置0。onLoadMoreCandles是一个可选回调，当最后一个蜡烛变得可见时调用。如果你想要在顶部工具栏添加更多操作（例如在Binance Candles中），你可以创建自定义的ToolBarAction并将其添加到actions参数中。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Candlesticks Example'),
        ),
        body: Center(
          child: Candlesticks(
            candles: [
              // 添加一些示例蜡烛数据
              Candle(
                date: DateTime.now(),
                open: 1780.36,
                high: 1873.93,
                low: 1755.34,
                close: 1848.56,
                volume: 0
              ),
              Candle(
                date: DateTime.now().subtract(Duration(days: 1)),
                open: 1780.36,
                high: 1873.93,
                low: 1755.34,
                close: 1848.56,
                volume: 0
              ),
              // 可以继续添加更多蜡烛数据
            ],
            onLoadMoreCandles: () {
              // 当最后一个蜡烛变得可见时调用的逻辑
            },
            actions: [
              // 自定义操作
            ]
          ),
        ),
      ),
    );
  }
}

更多关于Flutter数字资产K线图插件candlestick_digiasset的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter数字资产K线图插件candlestick_digiasset的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用candlestick_digiasset插件来显示数字资产K线图的示例代码。假设你已经创建了一个Flutter项目，并且已经在pubspec.yaml文件中添加了candlestick_digiasset依赖。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加candlestick_digiasset依赖：

dependencies:
  flutter:
    sdk: flutter
  candlestick_digiasset: ^latest_version  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Flutter项目的Dart文件中（例如main.dart），导入candlestick_digiasset包：

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

3. 准备K线图数据

你需要准备一些K线图的数据。这里是一个简单的OHLC（开盘价、最高价、最低价、收盘价）数据示例：

List<CandleData> candleDataList = [
  CandleData(
    open: 100.0,
    high: 110.0,
    low: 95.0,
    close: 105.0,
    time: DateTime.now().subtract(Duration(days: 9)),
  ),
  CandleData(
    open: 105.0,
    high: 115.0,
    low: 100.0,
    close: 110.0,
    time: DateTime.now().subtract(Duration(days: 8)),
  ),
  // 继续添加更多数据...
];

4. 使用CandlestickChart组件

在你的build方法中，使用CandlestickChart组件来显示K线图：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('K线图示例'),
        ),
        body: Center(
          child: CandlestickChart(
            candleDataList: candleDataList,
            width: MediaQuery.of(context).size.width * 0.9,
            height: MediaQuery.of(context).size.height * 0.6,
            initialVisibleMinTime: DateTime.now().subtract(Duration(days: 10)),
            initialVisibleMaxTime: DateTime.now(),
            title: '数字资产K线图',
            backgroundColor: Colors.white,
            gridBackgroundColor: Colors.grey[200]!,
            crosshairColor: Colors.blue,
            candleStickColorUp: Colors.green,
            candleStickColorDown: Colors.red,
          ),
        ),
      ),
    );
  }
}

5. 运行应用

现在，你可以运行你的Flutter应用，并应该能够看到带有K线图的界面。

注意事项

  • 确保你的candleDataList数据是按照时间顺序排列的。
  • 你可以根据需要调整CandlestickChart组件的各种参数，例如颜色、尺寸等。
  • candlestick_digiasset插件可能会有自己的API和配置选项，建议查阅官方文档以获取更多详细信息和高级用法。

以上是一个基本的示例，希望对你有所帮助！

回到顶部