how to custom country code picker layout to fit my design? - flutter

Question

I tried putting it in a container but it does not work I tried also stack but it does not work
I want it like the photo attached
Container(
decoration: BoxDecoration(border: Border.all(
color: Colors.black, width: 1)),
child: CountryCodePicker(
onChanged: (country) {
setState(() {
dialCodeDigits = country.dialCode!;
});
},
initialSelection: 'دولة الإمارات العربية المتحدة',
showCountryOnly: true,
showOnlyCountryWhenClosed: true,
favorite: ['+971', 'UAE', '+966', 'KSA'],
//padding: EdgeInsets.symmetric(horizontal: ),
textStyle: TextStyle(
color: Color(0xff000000),
fontSize: 14,
wordSpacing: 5),
enabled: true,
// alignLeft: false,
flagWidth: 28,
padding: EdgeInsets.symmetric(horizontal: 25),
),
),

Answer 1

You can create a column and add the country picker as the first element and then the phone number section as the second element to the column widget.
Please check this
class _MyWidgetState extends State<MyWidget> {
#override
Widget build(BuildContext context) {
//var check = getIndexFromNestedList(relatives);
return Scaffold(
body: SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.withOpacity(0.2)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
CountryCodePicker(
onChanged: (country) {
setState(() {
//dialCodeDigits = country.dialCode!;
});
},
initialSelection: 'دولة الإمارات العربية المتحدة',
showCountryOnly: true,
showOnlyCountryWhenClosed: true,
favorite: ['+971', 'UAE', '+966', 'KSA'],
//padding: EdgeInsets.symmetric(horizontal: ),
textStyle: TextStyle(
color: Color(0xff000000), fontSize: 14, wordSpacing: 5),
enabled: true,
// alignLeft: false,
flagWidth: 28,
padding: EdgeInsets.symmetric(horizontal: 12),
),
Spacer(),
Icon(Icons.keyboard_arrow_down_outlined)
],
),
Divider(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox(
height: 50,
child: Row(
children: [
SizedBox(
width: 50,
child: Text("+971"),
),
Flexible(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "some hint here"),
))
],
),
),
)
],
),
),
),
);
}
}