animated_battery_gauge widget

Very simple to use animated battery gauge widget.


  • Horizontal gauge mode
  • Vertical gauge mode
  • Horizontal grid mode


  • Both animated and static widgets exist. AnimatedBatteryGauge is animated version, and BatteryGauge is non-animated version.
  • Both horizontal and vertical widgets are supported. See screenshot above.
  • Starting from version 0.2.0, the widget takes mode parameter, which takes BatteryGaugePaintMode. You can take either gauge, grid, or none as the mode parameter.

Getting started

Please see example app under example folder.


It is as simple as using BatteryGauge or AnimatedBatteryGauge as your child widget.

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,