Flutter交易图表插件flutter_trading_chart的使用

Flutter插件flutter_trading_chart用于显示交易图表。它包括绘制指标的功能，自定义参数以及在时间轴上的平移和缩放能力。此外，成交量和量价比已经内置。

开始使用

安装

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

dependencies:
  flutter_trading_chart: ^0.0.1

或者使用以下命令添加：

flutter pub add flutter_trading_chart

使用

下面是一个完整的示例代码，展示了如何使用flutter_trading_chart插件来创建一个简单的交易图表。

import 'dart:math';

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter_trading_chart/flutter_trading_chart.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ExempleTradingChart(),
    );
  }
}

class ExempleTradingChart extends StatefulWidget {
  const ExempleTradingChart({Key? key}) : super(key: key);

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

class _ExempleTradingChartState extends State<ExempleTradingChart> {
  TradingChartController controller = TradingChartController(
    settings: TradingChartSettings(
      volume: VolumeSettings(
        visible: true,
      ),
      vpvr: VpvrSettings(
        visible: true,
      ),
    ),
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    setCandleSerie();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("交易图表示例"),
      ),
      body: TradingChart(
        controller: controller,
      ),
    );
  }

  // 生成蜡烛图数据
  CandlestickSerie generateCandleStickSerie() {
    var rng = Random();
    double open = 50000;
    int timestamp = 1621184400000;
    double volume = 1000;
    List<Candlestick> candles = [];
    for (int i = 0; i < 100; ++i) {
      double close = open * (1 + (rng.nextInt(11) - 4.5) / 100);
      double high = max(close, open) * (1 + rng.nextInt(2) / 100);
      double low = min(close, open) * (1 - rng.nextInt(2) / 100);
      volume = volume * (1 + (rng.nextInt(11) - 4.8) / 100);
      candles.add(Candlestick(
        timestamp: timestamp + i * 300000,
        open: open,
        high: high,
        low: low,
        close: close,
        volume: volume,
      ));
      open = close;
    }
    return CandlestickSerie(
      name: "价格",
      candles: candles,
    );
  }

  // 设置蜡烛图数据
  void setCandleSerie() {
    controller.data.candleSerie = generateCandleStickSerie();
    List<Point> movingAveragePoints = [];
    for (int i = 8; i < controller.data.candleSerie!.candles.length; ++i) {
      final sublist = controller.data.candleSerie!.candles.sublist(i - 8, i + 1).map((e) => e.close).toList();
      movingAveragePoints.add(Point(
        timestamp: controller.data.candleSerie!.candles[i].timestamp,
        y: sublist.average,
      ));
    }
    controller.data.lineSeries.add(LineSerie(
      name: "移动平均线",
      color: Colors.yellow,
      points: movingAveragePoints,
    ));
    controller.setTimestamps(
      controller.data.candleSerie!.candles.first.timestamp,
      controller.data.candleSerie!.candles.last.timestamp,
    );
  }
}