Flutter电池电量动画展示插件animated_battery_gauge的使用

Flutter电池电量动画展示插件animated_battery_gauge的使用

非常简单的用于展示动画电池电量的插件。

截图

• 水平仪表模式

• 垂直仪表模式

• 水平网格模式

特性

• 该插件包含动画版本和静态版本。AnimatedBatteryGauge是动画版本，而BatteryGauge是非动画版本。
• 支持水平和垂直模式。参见上方截图。
• 从0.2.0版本开始，该插件引入了mode参数，可以设置为gauge（仪表）、grid（网格）或none（无）。

入门指南

请查看example文件夹下的示例应用。

使用方法

使用方法非常简单，只需将BatteryGauge或AnimatedBatteryGauge作为子部件即可。

Widget build(BuildContext context) {
  return CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      middle: Text('Animated Battery Demo'),
    ),
    child: Center(
      child: AnimatedBatteryGauge(
        duration: Duration(seconds: 2), // 动画持续时间
        value: 60, // 电量百分比
        size: Size(150, 70), // 仪表大小
        borderColor: CupertinoColors.systemGrey, // 边框颜色
        valueColor: CupertinoColors.activeGreen, // 电量显示颜色
        mode: BatteryGaugePaintMode.gauge, // 仪表模式
        hasText: true, // 是否显示电量文本
      ),
    ),
  );
}

完整示例

以下是一个完整的示例代码，展示了如何在应用中集成AnimatedBatteryGauge。

import 'package:flutter/cupertino.dart';

import 'battery_gauge_demo.dart';

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

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

  // 应用的根部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      theme: CupertinoThemeData(
        primaryColor: CupertinoColors.activeBlue, // 主题颜色
      ),
      home: StartWidget(),
    );
  }
}

class StartWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Animated Battery Demo'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CupertinoButton(
              onPressed: () {
                Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
                  return BatteryGaugeDemo(isHorizontal: true, isGrid: false);
                }));
              },
              child: Text('显示水平仪表模式'),
            ),
            CupertinoButton(
              onPressed: () {
                Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
                  return BatteryGaugeDemo(isHorizontal: false, isGrid: false);
                }));
              },
              child: Text('显示垂直仪表模式'),
            ),
            CupertinoButton(
              onPressed: () {
                Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
                  return BatteryGaugeDemo(isHorizontal: true, isGrid: true);
                }));
              },
              child: Text('显示水平网格模式'),
            ),
            CupertinoButton(
              onPressed: () {
                Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
                  return BatteryGaugeDemo(isHorizontal: false, isGrid: true);
                }));
              },
              child: Text('显示垂直网格模式'),
            ),
          ],
        ),
      ),
    );
  }
}