Flutter进度条图表插件progress_bar_chart的使用

Flutter进度条图表插件progress_bar_chart的使用

progress_bar_chart 是一个用于在垂直图表上显示多个值并使用进度指示器和动画的包。每个值可以有其自己的颜色。

特性

以下是该插件的一些示例展示：

Example 1: Example

Example 2: Example

使用方法

示例 1
// 定义统计数据列表，每个数据项包含颜色、数值和标题
final List<StatisticsItem> stats = [
  StatisticsItem(Colors.blue, 500, title: 'Type 1'),
  StatisticsItem(Colors.green, 200, title: 'Type 2'),
  StatisticsItem(Colors.red, 300, title: 'Type 3'),
  StatisticsItem(Colors.yellow, 100, title: 'Type 4'),
];

// 使用 ProgressBarChart 显示统计信息
ProgressBarChart(
    values: stats, // 数据列表
    height: 30, // 进度条高度
    borderRadius: 20, // 圆角半径
    totalPercentage: 1100, // 总百分比
    unitLabel: 'kg', // 单位标签
),
示例 2
// 定义统计数据列表，每个数据项包含颜色和数值（百分比）
final List<StatisticsItem> stats = [
  StatisticsItem(Colors.blue, 0.4),
  StatisticsItem(Colors.green, 0.3),
  StatisticsItem(Colors.red, 0.2),
  StatisticsItem(Colors.yellow, 0.1),
];

// 使用 ProgressBarChart 显示统计信息
ProgressBarChart(
  values: stats, // 数据列表
  height: 30, // 进度条高度
  borderRadius: 20, // 圆角半径
),
不带标签和颜色混合的示例
// 定义统计数据列表，每个数据项包含颜色和数值（百分比）
final List<StatisticsItem> stats = [
  StatisticsItem(Colors.blue, 0.4),
  StatisticsItem(Colors.green, 0.3),
  StatisticsItem(Colors.red, 0.2),
  StatisticsItem(Colors.yellow, 0.1),
];

// 使用 ProgressBarChart 显示统计信息，不显示标签和颜色混合
ProgressBarChart(
  values: stats, // 数据列表
  height: 30, // 进度条高度
  borderRadius: 20, // 圆角半径
  showLables: false, // 不显示标签
  colorBlend: false, // 不使用颜色混合
)

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 progress_bar_chart 插件来创建一个带有进度条图表的应用程序：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const height = 30.0; // 设置进度条的高度
    final List<StatisticsItem> colors = [
      StatisticsItem(Colors.blue, 500, title: 'Weight'), // 蓝色，数值为500，标题为 "Weight"
      StatisticsItem(Colors.green, 200, title: 'Height'), // 绿色，数值为200，标题为 "Height"
      StatisticsItem(Colors.red, 300, title: 'Length'), // 红色，数值为300，标题为 "Length"
      StatisticsItem(Colors.yellow, 100, title: 'Width'), // 黄色，数值为100，标题为 "Width"
    ];

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true, // 使用 Material Design 3 主题
      ),
      home: Center(
        child: ProgressBarChart(
          values: colors, // 数据列表
          height: height, // 进度条高度
          borderRadius: 20, // 圆角半径
          totalPercentage: 1200, // 总百分比
          unitLabel: 'kg', // 单位标签
        ),
      ),
    );
  }
}

更多关于Flutter进度条图表插件progress_bar_chart的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter进度条图表插件progress_bar_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用progress_bar_chart插件来创建进度条图表的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了progress_bar_chart依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_bar_chart: ^0.1.0  # 请注意版本号，这里是一个示例版本号

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

接下来，你可以在你的Flutter应用中创建一个进度条图表。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Progress Bar Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 示例数据
  final List<double> data = [30, 70, 50, 80, 40];
  final List<String> labels = ['A', 'B', 'C', 'D', 'E'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Bar Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 20),
            Text('Progress Bar Chart', style: TextStyle(fontSize: 24)),
            SizedBox(height: 10),
            // 使用 ProgressBarChart 组件
            ProgressBarChart(
              data: data,
              labels: labels,
              barWidth: 30,
              barRadius: 15,
              barBackgroundColor: Colors.grey[300]!,
              barProgressColor: Colors.blue,
              labelTextStyle: TextStyle(fontSize: 14, color: Colors.black),
              labelPadding: 8,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在主页上显示了一个进度条图表。ProgressBarChart组件接收以下参数：

  • data: 一个包含进度值的List<double>。
  • labels: 一个与进度值对应的标签List<String>。
  • barWidth: 进度条的宽度。
  • barRadius: 进度条两端的圆角半径。
  • barBackgroundColor: 进度条的背景颜色。
  • barProgressColor: 进度条的进度颜色。
  • labelTextStyle: 标签的文本样式。
  • labelPadding: 标签与进度条之间的间距。

你可以根据需要调整这些参数来定制你的进度条图表。这个示例展示了如何使用progress_bar_chart插件来创建并显示一个简单的进度条图表。

回到顶部