flutter problem : How to make country image in circular?

Issue

I want to make a flag in circular. I am using "country_calling_code_picker: ^2.0.0" plugin and i got a image that image i want in circular. when I am trying to make in circular then its not becoming.

this is my code.

Row(
                          children: [
                            Expanded(
                              flex: 0,
                              child: Container(
                                decoration:  BoxDecoration(
                                      color: whiteColor.withOpacity(0.4),
                                    border: Border(
                                  bottom: BorderSide(
                                    color:greyColor,
                                    width: 1.7,
                                  ),
                                )

                                ),
                                child: InkWell(onTap: (){
                                  _onPressedShowBottomSheet();
                                },
                                  child: Row(
                                    children: [
                                      Image.asset(
                                        country.flag,
                                        package: countryCodePackageName,
                                        width: 40,
                                        height: 50,
                                      ),SizedBox(width: 5,),
                                      Icon(Icons.arrow_drop_down_sharp,size: 30,color: greyColor,)
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(
                              width: 15,
                            ),
                            Expanded(
                              flex: 3,
                              child: Container(   decoration: BoxDecoration(
                                  color: whiteColor.withOpacity(0.4),
                              ),
                                child: TextFormField(
                                  cursorColor: Theme.of(context).cursorColor,
                                  decoration: const InputDecoration(

                                    hintText: "Enter Number",
                                    enabledBorder: UnderlineInputBorder(
                                      borderSide:
                                          BorderSide(color:greyColor,width: 1.7),
                                    ),   contentPadding: EdgeInsets.only(left: 12,right: 12),
                                    focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: greyColor,width: 1.7),
                                  ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),

I want to make like this my flag

But this is becoming like this

Solution

You can wrap your image in a ClipRRect.

Row(
            children: [
              Expanded(
                flex: 0,
                child: Container(
                  decoration: BoxDecoration(
                      color: whiteColor.withOpacity(0.4),
                      border: Border(
                        bottom: BorderSide(
                          color: greyColor,
                          width: 1.7,
                        ),
                      )

                  ),
                  child: InkWell(onTap: () {
                    _onPressedShowBottomSheet();
                  },
                    child: Row(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(100),
                          Image.asset(
                            country.flag,
                            package: countryCodePackageName,
                            width: 40,
                            height: 50,
                          ),
                        ),

                        SizedBox(width: 5,),
                        Icon(Icons.arrow_drop_down_sharp, size: 30,
                          color: greyColor,)
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(
                width: 15,
              ),
              Expanded(
                flex: 3,
                child: Container(decoration: BoxDecoration(
                  color: whiteColor.withOpacity(0.4),
                ),
                  child: TextFormField(
                    cursorColor: Theme
                        .of(context)
                        .cursorColor,
                    decoration: const InputDecoration(

                      hintText: "Enter Number",
                      enabledBorder: UnderlineInputBorder(
                        borderSide:
                        BorderSide(color: greyColor, width: 1.7),
                      ), contentPadding: EdgeInsets.only(left: 12, right: 12),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: greyColor, width: 1.7),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),

Answered By – JideGuru

Answer Checked By – Mary Flores (FlutterFixes Volunteer)