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

【问题标题】：Flutter: How to add outline/stroke border in IconButton?Flutter：如何在 IconButton 中添加轮廓/描边边框？
【发布时间】：2021-04-25 14:04:19
【问题描述】：

如何在 IconButton 中添加轮廓/描边边框？我尝试使用堆栈，但这并没有按预期提供输出。

这是我的代码

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 中创建一个轮廓/笔划，例如输出右侧的 Text。

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

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

【问题讨论】：

标签： flutter dart

【解决方案1】：

很遗憾，目前 Flutter 不支持该功能。 Icon 唯一可用的装饰选项是 fill 颜色。

Flutter 图标通过使用.ttf 字体和Icon Font Family 中每个符号定义的unicode codePoint 来工作，这与web 通常使用SVG 不同，因为大多数浏览器都支持svgs，所以我们有能力设置一个大纲值来达到上面显示的结果。

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

CustomPaint Docs

【讨论】：

做个图标好像太复杂了。 CustomPaint 是解决此问题的唯一方法吗？
通过核心框架我相信CustomPainter是唯一的方法。可能有一个社区插件可以完成这项任务，但我目前不知道。
请考虑将此答案标记为已接受的答案，以便我们可以帮助 StackOverflow 社区上遇到相同问题的其他人
我通过提供解决方案来回答我自己的问题。但很高兴知道上述情况也可以使用CustomPaint 小部件解决。所以我会接受你的回答。提前谢谢你

【解决方案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
               // 
             ),

【讨论】：

【解决方案3】：

你需要一些设计敏锐度：

去https://icons8.com
选择您想要的图标。
点击添加效果，然后点击描边。
选择适合边框颜色的笔触颜色。
下载图片并用作您的图标

【讨论】：

【解决方案4】：

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

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

这将显示带有白色轮廓的红色心形。

【讨论】：