代码之家 › 专栏 › 技术社区 › taha khamis

如何自定义设计飘动中的图标?

flutter-design flutter-layout user-interface dart flutter

taha khamis · 技术社区 · 2 年前

我想构建一个定制的电池设计,看起来像这张图中的电池,这样它就可以分成块,并根据电池的百分比填充:

我只使用电池图标创建了一个简单的电池,但我如何自定义这个图标使其看起来像图片中的那个

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

0 回复 | 直到 2 年前

Kaushik Chandru 2 年前

您可以创建一个自定义类,该类将采用颜色或电池电量等值,并根据这些值返回一个小部件。我制作了一个假人供你参考。。

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 2 年前

最简单的解决方案是制作4个不同的svg图片,并将其放在“assets/icons/”中(不要忘记在pubspecs.yaml中添加路径) 然后基于batery百分比的条件返回路径

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

然后使用渲染 SvgPicture.asset("path") ;