When wrapping IconButton with a container it doesn't contain the entire icon, & I have to press on the container in particular so the onPressed works

Question

In the following code and as shown in photo, the container wrapping the IconButton doesn't contain the icon, and for the dialog to be closed I have to click on the container (blue area) but when clicking the icon nothing happens.. what's the problem and how to fix it? thanks already! enter image description here

              Get.dialog(
                Container(
                  alignment: Alignment.center,
                  child: Container(
                    width: screenWidth(1.15),
                    height: screenHeight(1.7),
                    decoration: BoxDecoration(
                      color: AppColors.mainWhiteColor,
                      borderRadius:
                          BorderRadius.all(Radius.circular(screenWidth(70))),
                      border: Border.all(
                        color: AppColors.mainDarkPurple,
                        width: screenWidth(170),
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Column(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Material(
                            child: Container(
                              width: screenWidth(40),
                              height: screenWidth(40),
                              color: AppColors.mainBlueColor,
                              child: IconButton(
                                onPressed: () => Get.back(),
                                icon: Icon(
                                  Icons.close,
                                  size: screenWidth(18),
                                  color: AppColors.mainBlackColor,
                                ),
                              ),
                            ),
                          ),
                        ),
                        SvgPicture.asset(
                          'assets/images/pop-up.svg',
                          width: screenWidth(4),
                        ),
                        SizedBox(
                          height: screenWidth(30),
                        ),
                        Material(
                          child: CustomTextField(
                            hitText: "ارسل شكوى/ مقترح",
                            controller: feedBackNameController,
                            hintColor: Colors.grey,
                            fillColor: Colors.grey.withOpacity(0.1),
                            startPadding: screenWidth(40),
                            endPadding: screenWidth(40),
                            maxline: 8,
                            maxlength: 500,
                            bottomPadding: screenWidth(40),
                          ),
                        ),
                        CustomButton(
                          textSize: screenWidth(25),
                          text: "ارسل",
                          textColor: AppColors.mainWhiteColor,
                          backgroundColor: AppColors.mainDarkPurple,
                          width: screenWidth(1.5),
                          hight: screenWidth(10),
                          onPressed: () {},
                        ),
                      ],
                    ),
                  ),
                ),
              );

I tried SizedBox and BoxConstrainsts, same results and I can't keep the icon with its default size it's bigger than I need.. I also tried to wrap Material with that container instead of wrapping the icon.

score 0 · Answer 1 · answered Aug 18 '23 at 22:24

IconButton Widget has property called iconSize, you need to it instead of size property inside Icon widget

                Container(
                  alignment: Alignment.center,
                  child: Container(
                    width: screenWidth(1.15),
                    height: screenHeight(1.7),
                    decoration: BoxDecoration(
                      color: AppColors.mainWhiteColor,
                      borderRadius:
                          BorderRadius.all(Radius.circular(screenWidth(70))),
                      border: Border.all(
                        color: AppColors.mainDarkPurple,
                        width: screenWidth(170),
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Column(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Material(
                            child: Container(
                              width: screenWidth(40),
                              height: screenWidth(40),
                              color: AppColors.mainBlueColor,
                              child: IconButton(
                                iconSize: screenWidth(18), // ADD IT HERE
                                onPressed: () => Get.back(),
                                icon: Icon(
                                  Icons.close,
                                  // DELETE SIZE FROM HERE
                                  color: AppColors.mainBlackColor,
                                ),
                              ),
                            ),
                          ),
                        ),
                        SvgPicture.asset(
                          'assets/images/pop-up.svg',
                          width: screenWidth(4),
                        ),
                        SizedBox(
                          height: screenWidth(30),
                        ),
                        Material(
                          child: CustomTextField(
                            hitText: "ارسل شكوى/ مقترح",
                            controller: feedBackNameController,
                            hintColor: Colors.grey,
                            fillColor: Colors.grey.withOpacity(0.1),
                            startPadding: screenWidth(40),
                            endPadding: screenWidth(40),
                            maxline: 8,
                            maxlength: 500,
                            bottomPadding: screenWidth(40),
                          ),
                        ),
                        CustomButton(
                          textSize: screenWidth(25),
                          text: "ارسل",
                          textColor: AppColors.mainWhiteColor,
                          backgroundColor: AppColors.mainDarkPurple,
                          width: screenWidth(1.5),
                          hight: screenWidth(10),
                          onPressed: () {},
                        ),
                      ],
                    ),
                  ),
                ),
              );```

score 0 · Accepted Answer · answered Aug 19 '23 at 06:05

try using FittedBox to make the IconButton fit with the Container.

just wrap your IconButton inside FittedBox so the IconButton will fit the size to your Container

remove the size inside Icon because it will just fit with the Container size

Container(
   width: screenWidth(40),
   height: screenWidth(40),
   color: AppColors.mainBlueColor,
   child: FittedBox(
        child: IconButton(
            onPressed: () => Get.back(),
            icon: Icon(
                Icons.close,
                color: AppColors.mainBlackColor,
            ),
        ),
    ),
),

When wrapping IconButton with a container it doesn't contain the entire icon, & I have to press on the container in particular so the onPressed works

2 Answers2