Flutter仪表盘插件moon_gauge_bar的使用

Flutter仪表盘插件moon_gauge_bar的使用

Features

一个简单易用的仪表盘条形图包！

1. 半圆形仪表盘条形图

Getting started

在项目中添加依赖：

flutter pub add moon_gauge_bar

Usage

1. 半圆形仪表盘条形图

SizedBox(
    width: 200,
    height: 200,
    // 使用 moon gauge bar
    child: MoonGaugeBar.halfCircularGaugeBar(
        score: score,
        labelStyle: const MoonGaugeLabelStyleUIModel(
            startPointText: "0",
            endPointText: "100",
        ),
    ),
)

Additional information

properties objects

1. gaugeStyle: MoonGaugeBarStyleUIModel()
   定义仪表盘条形图的样式。

2. labelStyle: MoonGaugeLabelStyleUIModel()
   定义仪表盘条形图标签的样式。

3. scoreStyle: MoonGaugeScoreStyleUIModel()
   定义仪表盘中心分数的样式。

完整示例代码

以下是完整的示例代码，展示如何使用 moon_gauge_bar 插件创建一个动态更新的半圆形仪表盘条形图。

import 'dart:math';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {

  double score = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('moon gauge bar'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 半圆形仪表盘条形图
            SizedBox(
              width: 200,
              height: 200,
              child: MoonGaugeBar.halfCircularGaugeBar(
                score: score,
                labelStyle: const MoonGaugeLabelStyleUIModel(
                  startPointText: "0",
                  endPointText: "100",
                ),
              ),
            ),

            // 按钮用于动态更新分数
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score = Random().nextInt(100).toDouble();
                });
              },
              child: const Text('改变分数'),
            )
          ],
        ),
      ),
    );
  }
}