Flutter气泡图表展示插件bubble_chart的使用

概述

bubble_chart 是一个简单的 Dart 实现的气泡图表插件。它可以帮助你在 Flutter 应用中轻松地展示气泡图表。

版本和构建状态

示例图

使用方法

添加依赖

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

dependencies:
  bubble_chart: any # 或者使用最新版本

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 bubble_chart 插件。

import 'dart:math';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<BubbleNode> childNode = [];

  @override
  void initState() {
    super.initState();
    _addNewNode();
    // Timer.periodic(Duration(milliseconds: 500), (_) {
    //   _addNewNode();
    // });
  }

  _addNewNode() {
    setState(() {
      Random random = Random();
      BubbleNode node = BubbleNode.leaf(
        value: max(1, random.nextInt(10)),
        options: BubbleOptions(
          color: () {
            Random random = Random();
            return Colors.primaries[random.nextInt(Colors.primaries.length)];
          }(),
        ),
      );
      node.options?.onTap = () {
        setState(() {
          node.value += 1;
          // childNode.remove(node);
        });
      };
      childNode.add(node);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BubbleChartLayout(
        children: [
          BubbleNode.node(
            padding: 15,
            children: childNode,
            options: BubbleOptions(color: Colors.black),
          ),
          BubbleNode.node(
            padding: 15,
            children: [
              BubbleNode.leaf(
                value: 5,
                options: BubbleOptions(
                  color: () {
                    Random random = Random();
                    return Colors
                        .primaries[random.nextInt(Colors.primaries.length)];
                  }(),
                ),
              )
            ],
            options: BubbleOptions(color: Colors.black),
          ),
        ],
        duration: const Duration(milliseconds: 500),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Text("+"),
        onPressed: () {
          _addNewNode();
        },
      ),
    );
  }
}

运行示例

你可以在 example/ 文件夹中找到一个完整的示例应用。

支持作者

如果你觉得这个插件对你有帮助，可以通过以下方式支持作者：

• 通过 Ko-Fi 进行捐赠。
• 在 GitHub 上给项目加星。
• 在 pub.dev 上给项目点赞。

每一份捐赠和支持都是对作者继续开发开源项目的巨大鼓励！