Question 233348 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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

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.

Tags:

2

Answers


  1. 0

    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: () {},
                        ),
                      ],
                    ),
                  ),
                ),
              );```
    Login or Signup to reply.
  2. 0

    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,
            ),
        ),
    ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search