如何在没有 Materialbutton 的情况下为图标添加宽度 - Flutter答案

【问题标题】：How to add width to icon without Materialbutton - Flutter如何在没有 Materialbutton 的情况下为图标添加宽度 - Flutter
【发布时间】：2022-01-21 07:22:04
【问题描述】：

我想在我的应用程序中显示粗体图标，但我不想使用材质图标，因为当我点击它时它会显示飞溅效果，我不希望这样，所以有什么方法可以为图标添加宽度颤抖？

我的图标：-

我的愿望结果：-

这是我的代码：-

 Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Icon(
                                Icons.add,
                                color: DarkBlueColor,
                              ),
                            ),

【问题讨论】：

添加你的代码sn-p
你的意思是增加这些图标的大小？
在图标上使用size 怎么样？
不，我的意思是我想增加图标的宽度，就像我们为文本添加宽度一样
你的意思是这个图标是粗体并且有一个边框半径吗？

标签： android ios flutter dart material-ui

【解决方案1】：

尝试使用font_awesome_flutter。

示例代码：

FaIcon(
  FontAwesomeIcons.plus,
),

【讨论】：

【解决方案2】：

您可以在文本小部件中使用图标并指定字体大小、字体粗细、字体系列和包装，这也使您的图标变粗

Text(
  String.fromCharCode(CupertinoIcons.exclamationmark_circle.codePoint),
  style: TextStyle(
    inherit: false,
    color: Colors.red,
    fontSize: 30.0,
    fontWeight: FontWeight.w700,
    fontFamily: CupertinoIcons.exclamationmark_circle.fontFamily,
    package: CupertinoIcons.exclamationmark_circle.fontPackage,
  ),
)

【讨论】：

【解决方案3】：

如果你可以通过简单地去除飞溅/波纹来达到效果，你可以将ThemeData.splashColor设置为透明。

Theme(
  data: ThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: Widget(), // Set your button here
);

否则，如果您在图标的“宽度”上的意思是“粗体”或“重量”。 Here's a workaround for that.

【讨论】：

【解决方案4】：

您可以使用自定义图标，只需在线下载添加 ' + ' 图标并将其粘贴到您的资产文件夹中。

现在像这样使用那个图标 --

Image.asset('assets/add.png', width: 25, height: 25),

现在您可以根据需要设置宽度。

如果你想摆脱那种飞溅效果，只需设置

    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    hoverColor: Colors.transparent,

【讨论】：

【解决方案5】：

只需将初始颜色设置为透明

【讨论】：

不，因为当我单击按钮按钮进行通话时，我想将父级调用到属性上

【解决方案6】：

您可以使用 Container 和 RichText 组合。如下图。

 InkWell(
                child: Container(
                  width: 150,
                  height: 50,
                  decoration: BoxDecoration(color: Colors.green,border: Border.all(width: 1, color: Colors.green),borderRadius: BorderRadius.circular(25) ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Icon(
                        Icons.add,
                        color: Colors.indigo,
                        size: 34,
                      ),
                      Text(
                      "Add Offer",
                        style: TextStyle(color: Colors.indigo, fontSize: 20),

                      ),

                    ],
                  ),
                ),
                onTap: (){
                  doSomething();
                },
              ),

 void doSomething() {}

【讨论】：

【解决方案7】：

         InkWell(
            onTap: () {
              print("object");
            },
            child: SizedBox(
              child: Material(
                shape: const CircleBorder(),
                child: Container(
                  height: 50,
                  width: 180,
                  decoration: BoxDecoration(
                    color: Color(0xff59e7ba),
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                  child: ClipRRect(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          Icon(
                            Icons.add,
                            size: 40,
                            color: Colors.black,
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 10),
                            child: Text(
                              "Add Offer",
                              style: TextStyle(
                                //set your fonts
                                //fontFamily: "Font2",
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

【讨论】：

你可以像这样改变你的字体和颜色。

【解决方案8】：

Theme(
        data: ThemeData(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: InkWell(
          onTap: () {},
          child: Container(
            height: 50,
            width: 180,
            decoration: BoxDecoration(
              color: Color(0xff59e7ba),
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(25.0),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(
                  Icons.add,
                  size: 40,
                  color: Colors.black,
                ),
                Padding(
                  padding: EdgeInsets.only(left: 10),
                  child: Text(
                    "Add Offer",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )
              ],
            ),
          ),
        ), // Set your button here
      )

【讨论】：