Buttons in Flutter

Question

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

Answer 1

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