dart 如何在没有材质按钮的情况下为图标添加宽度- Flutter

nvbavucw  于 2022-12-20  发布在  Flutter
关注(0)|答案(8)|浏览(136)

我想在我的应用中显示粗体图标,但我不想使用材质图标,因为当我按下它时,它会显示飞溅效果,我不想这样。有什么方法可以在Flutter中使图标变宽吗?
我的图标:-x1c 0d1x
我想要的结果:-

下面是我的代码:-

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

nwlqm0z11#

尝试使用font_awesome_flutter
示例代码:

FaIcon(
  FontAwesomeIcons.plus,
),
o2rvlv0m

o2rvlv0m2#

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

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,
  ),
)
2nc8po8w

2nc8po8w3#

如果只需移除飞溅/涟漪即可达到效果,则可以将ThemeData.splashColor设置为透明。

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

否则,如果你的意思是“宽度”的图标是“粗体”或“重量”。Here's a workaround for that

brgchamk

brgchamk4#

您可以使用自定义图标,只需在线下载添加**' + '**图标并将其粘贴到您的资产文件夹中。
现在像这样使用这个图标--

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

现在您可以根据需要设置宽度。
如果你想去掉飞溅效果

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

dkqlctbz5#

简单地你可以设置这飞溅颜色为透明

2guxujil

2guxujil6#

你可以使用,容器和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() {}
hgc7kmma

hgc7kmma7#

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,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

6qqygrtg

6qqygrtg8#

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
      )

相关问题