How to add dropdownMenu for Phone Number - flutter

Question

I want to add dropdownMenu like picture below:
But I still do not know how to do it.
Here is my code:
SizedBox(
width: 400,
height: 60,
child: TextField(
style: body1(color: ColorName.neutralTextPrimary),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ColorName.neutralTextSecondary,
),
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: ColorName.neutralTextSecondary,
),
),
hintText: 'Phone Number',
hintStyle: body1(color: ColorName.neutralTextSecondary),
),
),
),

Answer 1

use this package
it's customizable you can add your own decoration
https://pub.dev/packages/intl_phone_field

Answer 2

You can use row inside a container with DropdownMenu
static const List<String> codes = ['+62', '+82', '+1'];
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12), border: Border.all()),
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(4),
child: DropdownButton(
icon: const Icon(
Icons.expand_more,
),
value: _selectedIndex,
items: codes
.map((e) => DropdownMenuItem(
value: codes.indexOf(e),
child: Text(e),
))
.toList(),
onChanged: (v) {
_selectedIndex = v ?? 0;
setState(() {});
}),
),
const Padding(
padding: EdgeInsets.all(2),
child: Divider(
color: Colors.black,
thickness: 2,
),
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
))
],
),
),
),
),