'How to add width to icon without Materialbutton - Flutter

I want to show bold icon in my app but I don't want to use material icon because when I tap on it it show splash effect and I don't want that so is there any way to add width to icons in flutter?

My icon:-

My desire result:-

Here is my code:-

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

Solution 1:^[1]

You can use icons inside the text widget and assign font size, font weight, font family and package also this makes your icon bold

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

Solution 2:^[2]

If you can achieve the effect by simply removing the splash/ripple, you can set ThemeData.splashColor to transparent.

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

Otherwise, if what you meant on "width" of the icon is "boldness" or "weight". Here's a workaround for that.

Solution 3:^[3]

You can use custom icon just download the add ' + ' icon online and paste it in your assets folder.

Now use that icon like this --

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

Now you can set the width according to your need.

And if you want to get rid of that splash effect just set

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

Solution 4:^[4]

simply you can set the splash color to transparent

Solution 5:^[5]

You can use, Container and RichText combo. As shown below.

 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() {}

Solution 6:^[6]

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

Solution 7:^[7]

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
      )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pylyp Dukhov
Solution 2	Omatt
Solution 3	Vishal Agrawal
Solution 4	Omar Alshyokh
Solution 5	GOKU
Solution 6
Solution 7	M Karimi

'How to add width to icon without Materialbutton - Flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]