Flutter K线图绘制插件flutter_kline的使用

效果图

使用说明

Getting Started

flutter_kline 是一个用于在 Flutter 中绘制 K 线图的插件。它可以帮助开发者快速实现股票、数字货币等数据的可视化。

原作者地址

原项目地址：https://github.com/zhaojijin/flutter_kline

在此代码基础上增加了空安全支持，并将其封装为 Pub 库。

完整示例代码

以下是一个完整的示例代码，展示如何使用 flutter_kline 插件来绘制 K 线图。

/*
 * @Description: 使用 flutter_kline 插件绘制 K 线图的示例代码
 * @Author: zhaojijin
 * @LastEditors: zhaojijin
 * @Date: 2019-04-16 10:21:10
 * @LastEditTime: 2020-05-11 16:48:45
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_kline/packages/bloc/klineBloc.dart'; // 引入 K 线图的核心 Bloc
import 'package:flutter_kline/packages/klinePage.dart'; // 引入 K 线图页面
import 'package:flutter/services.dart' show rootBundle; // 用于加载本地 JSON 文件
import 'package:flutter_kline/packages/model/klineConstrants.dart'; // 引入常量定义
import 'dart:async'; // 异步操作
import 'dart:convert'; // JSON 解析
import 'dart:io'; // HTTP 请求
import 'package:flutter_kline/packages/model/klineModel.dart'; // 模型类
import 'package:flutter_kline/packages/model/kline_data_model.dart'; // 数据模型
import 'package:http/http.dart' as http; // HTTP 请求库

void main() => runApp(MyApp()); // 启动应用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Kline Demo', // 应用标题
      home: MyHomePage(title: 'Kline Home Page'), // 主页
      debugShowCheckedModeBanner: false, // 隐藏调试标志
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState(); // 创建状态
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    KlinePageBloc bloc = KlinePageBloc(); // 初始化 K 线图 Bloc
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(widget.title ?? ''), // 设置导航栏标题
      ),
      body: Center(
        child: FloatingActionButton(
          child: Icon(Icons.input), // 设置按钮图标
          onPressed: () {
            Navigator.push(
              context,
              CupertinoPageRoute(builder: (context) {
                return Scaffold(
                  appBar: CupertinoNavigationBar(
                    padding: EdgeInsetsDirectional.only(start: 0), // 设置导航栏内边距
                    leading: CupertinoButton(
                      padding: EdgeInsets.all(0), // 设置按钮内边距
                      child: Icon(Icons.arrow_back, color: Colors.white,), // 返回按钮图标
                      onPressed: () {
                        if (Navigator.canPop(context)) {
                          Navigator.pop(context); // 返回上一页
                        }
                      },
                    ),
                    middle: Text('BTC-USDT', style: TextStyle(color: Colors.white),), // 设置中间标题
                    backgroundColor: kBackgroundColor, // 设置背景颜色
                  ),
                  body: Container(
                    color: kBackgroundColor, // 设置页面背景颜色
                    child: ListView(
                      children: [
                        KlinePageWidget(bloc), // 绘制 K 线图
                        Center(
                          child: Container(
                            margin: EdgeInsets.only(top: 20), // 设置上下间距
                            child: Text(
                              '财富自由', // 提示文字
                              style: TextStyle(fontSize: 12, color: Colors.blueGrey),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }),
            );
          },
        ),
      ),
    );
  }
}

// 加载本地 JSON 文件
Future<String> loadAsset() async {
  return await rootBundle.loadString('json/btcusdt.json'); // 加载本地 JSON 文件
}

// 获取远程数据
Future<String?> getIPAddress(String period) async {
  if (period == null) {
    period = '1day'; // 默认周期
  }
  var url =
      'https://api.huobi.pro/market/history/kline?period=$period&size=449&symbol=btcusdt'; // Huobi API 地址
  String? result;

  var response = await http.get(Uri.parse(url)); // 发送 HTTP 请求
  if (response.statusCode == HttpStatus.ok) {
    result = response.body; // 获取响应数据
  } else {
    print('Failed getting IP address'); // 打印错误信息
  }
  return result;
}

// 自定义 K 线图 Bloc
class KlinePageBloc extends KlineBloc {
  @override
  void periodSwitch(String period) {
    _getData(period); // 切换周期时获取数据
    super.periodSwitch(period); // 调用父类方法
  }

  @override
  void initData() {
    _getData('1day'); // 初始化数据
    super.initData();
  }

  // 获取数据逻辑
  _getData(String period) {
    this.showLoadingSinkAdd(true); // 显示加载动画
    Future<String?> future = getIPAddress('$period'); // 异步获取数据
    future.then((result) {
      final parseJson = json.decode(result ?? ''); // 解析 JSON 数据
      MarketData marketData = MarketData.fromJson(parseJson); // 将 JSON 数据映射到模型
      List<Market> list = [];
      for (var item in marketData.data ?? []) { // 遍历数据并生成 Market 对象
        Market market = Market(
          item.open, item.high, item.low, item.close, item.vol, item.id); // 构造 Market 对象
        list.add(market); // 添加到列表
      }
      this.showLoadingSinkAdd(false); // 隐藏加载动画
      this.updateDataList(list); // 更新数据列表
    });
  }
}

说明

1. 依赖配置
   在 pubspec.yaml 文件中添加以下依赖：

   dependencies:
     flutter_kline: ^版本号