Flutter：如何在IconButton中添加轮廓/描边边框？

Question

如何在IconButton中添加轮廓/描边边框？ 我尝试使用stack，但这并没有产生预期的输出。

这是我的代码：

SliverAppBar(
            leading: Stack(
              alignment: Alignment.center,
              children: [
                Icon(
                  Icons.arrow_back,
                  color: Colors.black,
                  size: 36,
                ),
                IconButton(
                  icon: new Icon(
                    Icons.arrow_back,
                    size: 24,
                  ),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ],
            ),
            //
            // another code
            //
          ),

上述代码的输出结果

我希望在IconButton上创建一个轮廓/描边，就像右侧输出的文本一样。

具有可自定义“轮廓/描边边框颜色”和填充颜色的图标示例。

我试图找到解决方案，但是找不到。是否可能仅通过代码来添加轮廓/描边边框以自定义 IconButton？

- Septian Dika

Answer 1

根据图标的不同，如果它有一个轮廓/边框版本，您可以使用Stack实现此效果。 例如：

IconButton(
    icon: Stack(
        children: [
            Icon(Icons.favorite, color: Colors.red),
            Icon(Icons.favorite_border, color: Colors.white),
        ],
    ),
    onPressed: () => {},
),

这将显示一个带有白色轮廓的红色心形图案。

- Brackyt

Answer 2

正如@Rohan Thacker所说。目前，Flutter不支持为icon添加轮廓/描边边框的功能。因此，在这种情况下，自定义icons的最佳解决方案是使用带有SVG格式的图像，并使用flutter_svg插件将SVG图像资源用作IconButton。

因此，从上述情况出发，我完成了以下代码（使用flutter_svg插件）：

import 'package:flutter_svg/flutter_svg.dart';

//
// another code
// 

SliverAppBar(
               leading: Center(
                 child: IconButton(
                   icon: SvgPicture.asset(
                          "assets/icons/ back-arrow-bold.svg",
                          width: 30,
                          // the image height will automatically adjust the width...
                          // to the original image scale. Simply declare the size...
                          // in between the length or width, choose one.
                         ),
                   onPressed: () => Navigator.of (context) .pop (),
                 ),
               ),
               //
               // another code
               // 
             ),

- Septian Dika

Answer 3

添加另一个答案，因为两者都有一定的有效性，而我最终选择了这个。

如果你的使用情况涉及箭头 - 大多数字体都包含箭头符号 - 所以我只需在文本中添加一个箭头符号，然后轮廓效果就能按照预期工作！

请在此处查看结果。

- Oded Ben Dov

Answer 4

很遗憾，目前Flutter不支持此功能。 Icon 只能使用 fill 颜色进行装饰。

Flutter图标是通过使用具有Icon字体系列中每个符号定义的unicode codePoint的.ttf字体来工作的，而与Web不同，后者通常使用SVG，并且由于大多数浏览器本地支持svgs，我们可以设置轮廓值以实现上面显示的结果。

但是，您可以使用CustomPainter和CustomPaint小部件实现上述效果，但这需要手动绘制图标的形状，然后将PaintStyle属性设置为Stroke。

CustomPaint文档

- Rohan Thacker

---

似乎仅仅为了制作一个图标就太复杂了。CustomPaint是唯一解决这个问题的方法吗？ - undefined

基于核心框架，我相信CustomPainter是唯一的方法。可能有一个可用的社区插件可以完成这个任务，但目前我不知道有任何插件。 - undefined

请考虑将此答案标记为被接受的答案，这样我们就能在StackOverflow社区上帮助其他有同样问题的人。 - undefined

我通过提供一个解决方案来回答自己的问题。但是很高兴知道上述情况也可以使用CustomPaint小部件来解决。所以我会接受你的答案。提前谢谢你。 - undefined

Answer 5

在这里，您需要一些设计技能：

1. 前往https://icons8.com
2. 选择您想要的图标。
3. 点击添加效果，然后点击描边。
4. 选择描边的颜色（也就是边框颜色）。
5. 下载图片并用作您的图标。

- gbube tuoyo

Answer 6

一个新的选择，虽然还不是一个大纲，是使用Icon的shadows属性：

Icon(
    Icons.arrow_forward_rounded,
    color: Colors.blue,
    shadows: const [
        Shadow(
            color: Colors.white, 
            blurRadius: 2.0,
        ),
    ],
)

- Oded Ben Dov