I want to make the buttons small, but the padding on the buttons gets in the way. I tried to use padding, but it doesn't work. help me please

I want a button like this:

But it turns out like this:

My code:

                       Container(
                                height: 20,
                                decoration: const BoxDecoration(
                                  color: AppColors.mainRed,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(30)),
                                ),
                                child: Row(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.center,
                                  children: [
                                    IconButton(
                                      style: ButtonStyle(
                                          alignment: Alignment.centerLeft),
                                      padding: EdgeInsets.all(0),
                                      onPressed: () {},
                                      icon: const Icon(Icons.remove,
                                          size: 12, color: Colors.white),
                                    ),
                                    const Text("1",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontFamily: "Actor",
                                            color: Colors.white)),
                                    IconButton(
                                      style: ButtonStyle(
                                          alignment: Alignment.centerLeft),
                                      padding: EdgeInsets.all(0),
                                      onPressed: () {},
                                      icon: const Icon(Icons.add,
                                          size: 12, color: Colors.white),
                                    ),
                                  ],
                                ),
                              )

CodePudding user response：

You need to use SizedBox on button not the main container, like this:

Container(
        decoration: const BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.all(Radius.circular(30)),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 20,
              width: 20,
              child: IconButton(
                padding: EdgeInsets.zero,
                onPressed: () {},
                icon:
                    const Icon(Icons.remove, size: 12, color: Colors.white),
              ),
            ),
            const Text("1",
                style: TextStyle(
                    fontSize: 13,
                    fontFamily: "Actor",
                    color: Colors.white)),
            SizedBox(
              height: 20,
              width: 20,
              child: IconButton(
                padding: EdgeInsets.zero,
                onPressed: () {},
                icon: const Icon(Icons.add, size: 12, color: Colors.white),
              ),
            ),
          ],
        ),
      )

CodePudding user response：

You can use the SizedBox widget to set the size of your buttons. The SizedBox widget takes a width and a height as parameters, so you can set the exact size of your buttons. You can also use the Container widget to set the width and height of the buttons, as well as any other styling you may want to add.