flutter problem : How to make country image in circular? - flutter

Question

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

Answer 1

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