How to custom design an icon in flutter?

Question

I wanna build a A custom battery design to look like the one in this image so that its devided to chunks and they will be filled based on the percentage of the battery:

I only managed to creat a simple battery by using the battery icon but how can I customize this icon to look like the one in the image

return Container(
          width: 100,
          height: 200,
       
          child: (Icon(
            Icons.battery_full,
            size: 100,
            color: Colors.black,
          )),
        );

Why don't grab them as separate images? Or you can draw them with canvas if you really want — MMZK1526
– MMZK1526, Commented Aug 11, 2022 at 2:45
I am not familiar with canvas but I will look it up and might consider the separate images as well. Thanks for your answer — taha khamis
– taha khamis, Commented Aug 11, 2022 at 2:57
you can try to make new widget , and return Icons based on value. material icon provide several level of battery mui.com/material-ui/material-icons/?query=batt — pmatatias
– pmatatias, Commented Aug 11, 2022 at 2:59

Kaushik Chandru · Accepted Answer · 2022-08-11 04:25:41Z

You can create a custom class which will take values like color or battery level and return a widget based on those values. I created a dummy for your reference..

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Center(
            child: BatteryIcon(
      segmentHeight: 20,
      segmentWidth: 45,
      segmentColor: Colors.red,
      batteryLevel: 1,
    )));
  }
}

class BatteryIcon extends StatelessWidget {
  int batteryLevel;
  double segmentHeight;
  double segmentWidth;
  Color segmentColor;
  BatteryIcon(
      {Key? key,
      this.batteryLevel = 0,
      this.segmentHeight = 10,
      this.segmentWidth = 30,
      this.segmentColor = Colors.transparent})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: segmentWidth * 0.5,
          height: segmentHeight * 0.6,
          decoration: BoxDecoration(
              color: batteryLevel >= 5 ? segmentColor : Colors.transparent,
              border: const Border(
                top: BorderSide(width: 1.0, color: Colors.white),
                right: BorderSide(width: 1.0, color: Colors.white),
                left: BorderSide(width: 1.0, color: Colors.white),
              )),
        ),
        Container(
          width: segmentWidth,
          height: segmentHeight,
          decoration: BoxDecoration(
              color: batteryLevel >= 4 ? segmentColor : Colors.transparent,
              borderRadius: const BorderRadius.only(
                  topRight: Radius.circular(5), topLeft: Radius.circular(5)),
              border: Border.all(color: Colors.white, width: 1)),
        ),
        Container(
          width: segmentWidth,
          height: segmentHeight,
          decoration: BoxDecoration(
              color: batteryLevel >= 3 ? segmentColor : Colors.transparent,
              border: const Border(
                  bottom: BorderSide(width: 1.0, color: Colors.white),
                  right: BorderSide(width: 1.0, color: Colors.white),
                  left: BorderSide(width: 1.0, color: Colors.white))),
        ),
        Container(
          width: segmentWidth,
          height: segmentHeight,
          decoration: BoxDecoration(
              color: batteryLevel >= 2 ? segmentColor : Colors.transparent,
              border: const Border(
                  right: BorderSide(width: 1.0, color: Colors.white),
                  left: BorderSide(width: 1.0, color: Colors.white))),
        ),
        Container(
          width: segmentWidth,
          height: segmentHeight,
          decoration: BoxDecoration(
              color: batteryLevel >= 1 ? segmentColor : Colors.transparent,
              borderRadius: const BorderRadius.only(
                  bottomRight: Radius.circular(5),
                  bottomLeft: Radius.circular(5)),
              border: Border.all(color: Colors.white, width: 1)),
        ),
      ],
    );
  }
}

Rintu Banerjee · Accepted Answer · 2022-08-11 05:03:20Z

1

easiest solution would be making 4 different svg picture and putting it to "assets/icons/" (dont forget to add path in pubspecs.yaml") then condionally return path based on batery percentage

if (Battery.percentage < 30) {
 return "battery1.svg";
}

then render with SvgPicture.asset("path");

answered Aug 11, 2022 at 5:03

Rintu Banerjee

1242 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to custom design an icon in flutter?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related