Flutter customize dropdown + TextFormField - flutter

Question

How do I achieve the following look for a Row which consists of a dropdown and a TextFormField?
I am able to customize the TextFormField using the following code:
final phoneNumberBox = DecoratedBox(
decoration: const BoxDecoration(color: Color(0x2B8E8E93),
borderRadius:BorderRadius.only(
topRight: const Radius.circular(32),
bottomRight: const Radius.circular(32))),
child: phoneNumber,
);
final phoneNumber =
TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
controller: _phoneNumberController,
// validator: Validator.validateField,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: new BorderRadius.only(
topRight: const Radius.circular(32),
bottomRight: const Radius.circular(32))),
),
);
However I cant figure out how to change the DropDown

Answer 1

far from perfect, but as an option
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(body: Content()),
);
}
}
class Content extends StatefulWidget {
#override
_ContentState createState() => _ContentState();
}
class _ContentState extends State<Content> {
final List<String> _items = ['+1', '+42', '+666', '+17', '+228'];
TextEditingController _phoneNumberController = TextEditingController();
String _value;
#override
void initState() {
super.initState();
_value = _items.first;
}
#override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 32),
height: 56,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28),
color: Colors.grey[200],
),
child: Row(
children: <Widget>[
DropdownButtonHideUnderline(
child: Container(
padding: const EdgeInsets.fromLTRB(32, 8, 16, 8),
child: DropdownButton<String>(
value: _value,
items: _items.map((value) {
return DropdownMenuItem<String>(child: Text(value), value: value);
}).toList(),
onChanged: _onDropDownChanged,
),
),
),
Container(width: 1, color: Colors.grey[300]),
Expanded(
child: TextFormField(
keyboardType: TextInputType.phone,
autofocus: false,
controller: _phoneNumberController,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(16, 16, 8, 16),
border: InputBorder.none,
suffixIcon: Padding(
child: Icon(Icons.cancel, color: Colors.grey[400]),
padding: const EdgeInsets.only(right: 16),
),
),
),
),
],
),
),
);
}
void _onDropDownChanged(String value) {
setState(() {
_value = value;
});
}
}