|
1 | | -# flutter_battery_indicator |
| 1 | +# flutter_battery_indicator :battery: |
2 | 2 |
|
3 | | -A battery indicator widget |
| 3 | +A battery indicator widget, you can use the phone battery value to display, and also you can provide your own value for the battery level. |
4 | 4 |
|
5 | 5 |  |
6 | 6 |
|
| 7 | +## Screenshots :camera: |
| 8 | + |
| 9 | +Example with native flutter |
| 10 | + |
| 11 | +<p float="left"> |
| 12 | +<img src="./example_custom_battery/screenshots/1.jpeg" width="25%" height="35%" /> |
| 13 | +<img src="./example_custom_battery/screenshots/2.jpeg" width="25%" height="35%" /> |
| 14 | +</p> |
| 15 | + |
| 16 | +Example with GetX |
| 17 | + |
| 18 | +<p float="left"> |
| 19 | +<img src="./example_custom_battery_get_x/screenshots/1.jpeg" width="25%" height="35%" /> |
| 20 | +<img src="./example_custom_battery_get_x/screenshots/2.jpeg" width="25%" height="35%" /> |
| 21 | +</p> |
| 22 | + |
| 23 | +## Usage :clipboard: |
7 | 24 |
|
8 | | -## Usage |
9 | 25 | To use this plugin, add `battery_indicator` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/). |
10 | 26 |
|
11 | | -### Example |
| 27 | +``` |
| 28 | +dependencies: |
| 29 | + battery_indicator: ^0.0.5 |
| 30 | +``` |
| 31 | + |
| 32 | +### Examples :iphone: |
| 33 | + |
| 34 | +### You can use your phone battery to display in the widget :one: |
12 | 35 |
|
13 | | -``` dart |
| 36 | +##### You can check this example in the folder [example] |
| 37 | + |
| 38 | +```dart |
14 | 39 | // Import package |
15 | 40 | import 'package:battery_indicator/battery_indicator.dart'; |
| 41 | +... |
16 | 42 |
|
17 | | -// Instantiate it |
18 | | -var batteryIndicator = new BatteryIndicator( |
19 | | - style: BatteryIndicatorStyle.values[_styleIndex], |
20 | | - colorful: _colorful, |
21 | | - showPercentNum: _showPercentNum, |
22 | | - mainColor: _color, |
23 | | - size: _size, |
24 | | - ratio: _ratio, |
25 | | - showPercentSlide: _showPercentSlide, |
26 | | - ); |
| 43 | +// Instantiate it, by default it takes the battery from your phone |
| 44 | +BatteryIndicator( |
| 45 | + style: BatteryIndicatorStyle.values[_styleIndex], |
| 46 | + colorful: _colorful, |
| 47 | + showPercentNum: _showPercentNum, |
| 48 | + mainColor: _color, |
| 49 | + size: _size, |
| 50 | + ratio: _ratio, |
| 51 | + showPercentSlide: _showPercentSlide, |
| 52 | +); |
27 | 53 |
|
28 | 54 | // and then add it to your layout . |
29 | 55 |
|
30 | 56 | ``` |
31 | 57 |
|
| 58 | +### Also you can provide your own battery value :two: |
| 59 | + |
| 60 | +##### You can check this example in the folder [example_custom_battery] |
| 61 | + |
| 62 | +```dart |
| 63 | +// Import package |
| 64 | +import 'package:battery_indicator/battery_indicator.dart'; |
| 65 | +... |
| 66 | +
|
| 67 | +//inside your statefull class, you can add functions |
| 68 | +// to control the battery level, like this: |
| 69 | +
|
| 70 | +int bat = 34; |
| 71 | +
|
| 72 | +void increment() { |
| 73 | + setState(() { |
| 74 | + if (bat < 100) { |
| 75 | + bat++; |
| 76 | + } |
| 77 | + }); |
| 78 | +} |
| 79 | +
|
| 80 | +void decrement() { |
| 81 | + setState(() { |
| 82 | + if (bat > 0) { |
| 83 | + bat--; |
| 84 | + } |
| 85 | + }); |
| 86 | +} |
| 87 | +... |
| 88 | +// Instantiate it, add the flag batteryFromPhone, and a |
| 89 | +// value to control the battery level |
| 90 | +BatteryIndicator( |
| 91 | + batteryFromPhone: false, |
| 92 | + batteryLevel: bat, |
| 93 | + style: BatteryIndicatorStyle.values[_styleIndex], |
| 94 | + colorful: _colorful, |
| 95 | + showPercentNum: _showPercentNum, |
| 96 | + mainColor: _color, |
| 97 | + size: _size, |
| 98 | + ratio: _ratio, |
| 99 | + showPercentSlide: _showPercentSlide, |
| 100 | +); |
| 101 | +
|
| 102 | +// and then add it to your layout . |
| 103 | +
|
| 104 | +``` |
| 105 | + |
| 106 | +### Also you can provide your own battery value with GetX :three: |
| 107 | + |
| 108 | +##### You can check this example in the folder [example_custom_battery_get_x] |
| 109 | + |
| 110 | +home_view.dart |
| 111 | + |
| 112 | +```dart |
| 113 | + Obx(() => BatteryIndicator( |
| 114 | + batteryFromPhone: false, |
| 115 | + batteryLevel: controller.bat.value, |
| 116 | + style: controller.myStyle, |
| 117 | + colorful: controller.colorful, |
| 118 | + showPercentNum: controller.showPercentNum, |
| 119 | + mainColor: controller.color, |
| 120 | + size: controller.size, |
| 121 | + ratio: controller.ratio, |
| 122 | + showPercentSlide: controller.showPercentSlide) |
| 123 | + ) |
| 124 | +``` |
| 125 | + |
| 126 | +home_controller.dart |
| 127 | + |
| 128 | +```dart |
| 129 | +class HomeController extends GetxController { |
| 130 | + //0,flat and 1,skeumorphism |
| 131 | + BatteryIndicatorStyle myStyle = BatteryIndicatorStyle.values[0]; |
| 132 | +
|
| 133 | + var colorful = true; |
| 134 | + var showPercentSlide = true; |
| 135 | + var showPercentNum = true; |
| 136 | + var size = 35.0; |
| 137 | + var ratio = 6.0; |
| 138 | + Color color = Colors.blue; |
| 139 | + RxInt bat = RxInt(35); |
| 140 | +
|
| 141 | +
|
| 142 | + @override |
| 143 | + void onClose() {} |
| 144 | + void increment() { |
| 145 | + if (bat.value < 100) { |
| 146 | + bat.value++; |
| 147 | + } |
| 148 | + } |
| 149 | + void decrement() { |
| 150 | + if (bat.value > 0) { |
| 151 | + bat.value--; |
| 152 | + } |
| 153 | + } |
| 154 | +} |
| 155 | +``` |
32 | 156 |
|
33 | | -## Getting Started |
| 157 | +## Getting Started :rocket: |
34 | 158 |
|
35 | 159 | For help getting started with Flutter, view our online [documentation](https://flutter.io/). |
36 | 160 |
|
|
0 commit comments