dart Flutter：如何在IconButton中添加轮廓/笔触边框？

6tr1vspr 于 2023-09-28 发布在 Flutter

关注(0)|答案(6)|浏览(197)

如何在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轮廓/笔划。
具有可定制的“轮廓/笔触边框颜色”和填充颜色的图标示例

我试图找到一个解决办法，但我找不到。是否有可能通过添加一个轮廓/笔划边框来自定义IconButton？

dart

来源：https://stackoverflow.com/questions/67254237/flutter-how-to-add-outline-stroke-border-in-iconbutton

6条答案

按热度按时间

falq053o1#

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

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

这将显示一个红色的心与白色的轮廓。

赞(0）回复(0）举报 2023-09-28

hfyxw5xn2#

正如@罗汉Thacker所说。目前，flutter不支持向icon添加轮廓/笔划边框的功能。因此，在这种情况下，自定义icons的最佳解决方案是使用SVG的图像（SVG格式的文件大小小于.png或.jpg），并使用flutter_svg插件，以便能够将SVG图像资产用作IconButton。
所以从上面的例子中，我完成了这样的代码（使用flutter_svg插件）：

IconButton(
  icon: SvgPicture.asset(
    "assets/icons/ back-arrow-bold.svg",
    width: 30,           
  ),
  onPressed: (){},
),

赞(0）回复(0）举报 2023-09-28

hyrbngr73#

不幸的是，目前Flutter不支持此功能。Icon唯一可用的装饰选项是fill颜色。
Flutter图标通过使用.ttf字体和Icon Font Family中每个符号定义的unicode codePoint来工作，这与通常使用SVG的web不同，因为大多数浏览器都支持svgs，所以我们可以设置一个outline值来实现上面显示的结果。
但是，您可以使用CustomPainter和CustomPaint小部件实现上面显示的结果，但这需要手动绘制图标的形状，然后将PaintStyle属性设置为Stroke。
CustomPaint Docs

赞(0）回复(0）举报 2023-09-28

368yc8dk4#

你需要一些设计的智慧：

Go https://icons8.com
1.选择您想要的图标。
1.点击添加效果，然后点击笔划。
1.选择笔划的颜色，这只是幻想的边界颜色。
1.下载图像并用作您的图标

赞(0）回复(0）举报 2023-09-28

gmol16395#

一个新的替代方案，尽管仍然不是大纲，是使用Icon的shadows属性：

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

赞(0）回复(0）举报 2023-09-28

kq4fsx7k6#

添加另一个答案，因为两者都是有效的，这是我最终使用的答案。
如果你的用例是关于箭头的--大多数字体都包含箭头的符号--那么我只需要在文本中添加一个箭头符号，轮廓效果就可以正常工作了！