Flutter图形绘制插件draw_graph的使用

draw_graph 是一个用于在Flutter应用程序中绘制折线图的Dart包。它允许开发者通过配置一些简单的属性来创建美观且交互性强的图表。下面我们将详细介绍如何使用这个插件，并提供一个完整的示例demo。

一、添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  draw_graph: ^0.2.0 # 请根据实际情况选择版本号

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

二、基本用法

1. 导入必要的库

你需要导入 draw_graph 和它的模型类 feature.dart：

import 'package:flutter/material.dart';
import 'package:draw_graph/draw_graph.dart';
import 'package:draw_graph/models/feature.dart';

2. 创建Feature列表

Feature 类用来表示图表中的每一条数据线。你可以为每个特征设置标题、颜色以及对应的数据点（Y轴值）。注意，这些数据点应该在 [0-1] 范围内，并且数量要与 X轴标签的数量相匹配。

final List<Feature> features = [
  Feature(
    title: "Drink Water",
    color: Colors.blue,
    data: [0.2, 0.8, 0.4, 0.7, 0.6],
  ),
  Feature(
    title: "Exercise",
    color: Colors.pink,
    data: [1, 0.8, 0.6, 0.7, 0.3],
  ),
  // 更多Feature...
];

3. 使用LineGraph Widget

接下来就可以在页面上使用 LineGraph widget 来展示这些数据了。你需要指定图表的尺寸 (size)、X轴和Y轴上的标签 (labelX, labelY) 等参数。

LineGraph(
  features: features,
  size: Size(320, 400),
  labelX: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'],
  labelY: ['20%', '40%', '60%', '80%', '100%'],
  showDescription: true,
  graphColor: Colors.white30,
  graphOpacity: 0.2,
  verticalFeatureDirection: true,
  descriptionHeight: 130,
)

三、完整示例代码

以下是一个完整的示例应用，展示了如何将上述所有部分组合在一起：

import 'package:flutter/material.dart';
import 'package:draw_graph/draw_graph.dart';
import 'package:draw_graph/models/feature.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey[900]),
      home: Scaffold(
        appBar: AppBar(
          title: Text("DrawGraph Package"),
        ),
        body: MyScreen(),
      ),
    );
  }
}

class MyScreen extends StatelessWidget {
  final List<Feature> features = [
    Feature(
      title: "Drink Water",
      color: Colors.blue,
      data: [0.2, 0.8, 0.4, 0.7, 0.6],
    ),
    Feature(
      title: "Exercise",
      color: Colors.pink,
      data: [1, 0.8, 0.6, 0.7, 0.3],
    ),
    Feature(
      title: "Study",
      color: Colors.cyan,
      data: [0.5, 0.4, 0.85, 0.4, 0.7],
    ),
    Feature(
      title: "Water Plants",
      color: Colors.green,
      data: [0.6, 0.2, 0, 0.1, 1],
    ),
    Feature(
      title: "Grocery Shopping",
      color: Colors.amber,
      data: [0.25, 1, 0.3, 0.8, 0.6],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 64.0),
          child: Text(
            "Tasks Track",
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
              letterSpacing: 2,
            ),
          ),
        ),
        LineGraph(
          features: features,
          size: Size(320, 400),
          labelX: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'],
          labelY: ['20%', '40%', '60%', '80%', '100%'],
          showDescription: true,
          graphColor: Colors.white30,
          graphOpacity: 0.2,
          verticalFeatureDirection: true,
          descriptionHeight: 130,
        ),
        SizedBox(height: 50),
      ],
    );
  }
}

这段代码创建了一个包含五个不同任务跟踪记录的应用程序。每个任务都有自己的颜色编码，并且可以在图表下方查看详细的描述信息。希望这能帮助你更好地理解如何使用 draw_graph 插件！