Flutter条形图展示插件 flutter_bargraph 的使用

flutter_bargraph 是一个用于在Flutter中显示条形图的插件。它不仅能够以图形方式显示当前值，还可以管理值变化时的动画效果，并支持自定义方向和方向。

特性

• 最小值/最大值属性
• 自定义颜色和文本样式
• 垂直方向，从左到右或从右到左
• 水平方向，从上到下或从下到上
• 可自定义的分割数

使用方法

安装

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

dependencies:
  flutter_bargraph: <last-release>

记得替换 <last-release> 为最新的版本号。

基本设置

BarGraph 需要提供 min, max 和 value 参数：

• min: 条形图刻度的最小值。
• max: 条形图刻度的最大值。
• value: 当前条形图刻度的值。

示例代码如下：

BarGraph(
    min: 0,
    max: 100.0,
    value: 65.0,
);

高级选项

样式

• orientation: 刻度的方向，默认为垂直从底部开始。
• indicatorStyle: 刻度指示器的样式，默认为左右都可见。
• indicatorSpacing: 刻度指示器的间距，默认为 SPACE_AROUND，另一种选择是 SPACE_BETWEEN。

颜色

• backgroundColor: 条形图的背景颜色。
• barColor: 实际值条的颜色。
• indicatorsColor: 刻度的颜色。

文本指示器

• textStyle: 指示器文本的样式。
• textAlign: 指示器文本的对齐方式。
• fractionDigits: 显示的小数位数。
• divisions: 刻度的分割数。
• textFlex: 用于文本的部分比例，剩余空间用于指示器。

动画

• animationDuration: 动画持续时间（毫秒），当实际值发生变化时。

示例

下面是一个完整的示例代码，展示了如何使用 flutter_bargraph 插件来创建一个带有滑块控制的条形图。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BarGraph',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'BarGraph'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title = ''}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _currentSliderValue = 5;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: BarGraph(
                      min: 0,
                      max: 100,
                      divisions: 4,
                      value: _currentSliderValue,
                      barColor: Theme.of(context).colorScheme.secondary,
                      orientation: BarGraphOrientation.horizontalFromLeft,
                    ),
                  ),
                  Expanded(
                    child: BarGraph(
                      min: 0,
                      max: 100,
                      divisions: 5,
                      value: _currentSliderValue,
                      barColor: Theme.of(context).colorScheme.secondary,
                      orientation: BarGraphOrientation.verticalFromBottom,
                      indicatorSpacing: BarGraphIndicatorSpacing.spaceBetween,
                    ),
                  ),
                ],
              ),
            ),
            Slider(
              value: _currentSliderValue,
              min: 0,
              max: 100,
              divisions: 20,
              label: _currentSliderValue.round().toString(),
              onChanged: (double value) {
                setState(() {
                  _currentSliderValue = value;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}