How to display the value chosen? - flutter

Question

The value that I chose from the DropdownMenuItem (eg: Malaysia (+06) ), the chosen value will be displayed, however, when I navigate back or proceed to other interfaces, it will disappear.
Problem:
How to make the chosen value maintained at the dropdown button box?
Is it any solution to solve the problem?
Below is my code segment inside showModalBottomSheet:
String _selectedCountryCode;
List jsonResult = List();
loadJsonData() async {
String data = await rootBundle.loadString('assets/country_code.json');
jsonResult = json.decode(data);
print(jsonResult);
}
#override
void initState() {
super.initState();
loadJsonData();
phoneController = TextEditingController();
}
Widget Part
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
TextButton(
onPressed: () {
_showModalPhoneWidget();
},
child: Text(
"Request OTP", style: TextStyle(
color: const Color(0xff002aff),
fontSize: 15,
),
),)
],
)
_showModalPhoneWidget method part
_showModalPhoneWidget() {
showModalBottomSheet(
backgroundColor: Colors.green,
context: context,
isDismissible: true,
//transitionAnimationController: Duration(milliseconds: 400),
builder: (context) {
return StatefulBuilder(
builder: (context, setStateSTB) => ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0)),
child: Container(
height: 250,
color: Colors.white,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text(
"Update Phone",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.only(top: 20.0, left: 10.0),
child: Row(
children: <Widget>[
Text(
"Tel No",
style:
TextStyle(color: Colors.black, fontSize: 15.0),
),
Text(
"*",
style: TextStyle(color: Colors.red, fontSize: 15.0),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0),
height: 50.0,
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: const Color(0xffededed))),
child: Stack(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 5.0, left: 5.0),
height: 40.0,
width: 100.0,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: false,
child: DropdownButton(
// child: DropdownButton<Map<String, String>>(
isExpanded: true,
value: _selectedCountryCode,
selectedItemBuilder: (BuildContext context)
{
return jsonResult.map<Widget>((element) {
return Text("${element['dial_code']}", textAlign: TextAlign.center);
}).toList();
},
items: jsonResult.map((element) {
return DropdownMenuItem(
child: Text("${element['name']} (${element['dial_code']})", overflow: TextOverflow.clip, maxLines: 1,),
value: element['dial_code'],
);
}).toList(),
onChanged: (val) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
//* to change on dialog
setStateSTB(() {
_selectedCountryCode = val;
prefs.setString('_selectedCountryCode', _selectedCountryCode);
print('select code: $_selectedCountryCode' );
});
//* to change on StateLevel
setState(() {
_selectedCountryCode = val;
prefs.setString('_selectedCountryCode', _selectedCountryCode);
});
},
),
),
),
),
// if(_isEditingText)
Container(
width: 120,
height: 40,
child: TextField(
controller: phoneController,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
], // Only numbers can be entered
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Tel No. Ex:0133333333',
),
onSubmitted: (newPhoneNo) {
setState(() {
initialText = newPhoneNo;
_isEditingText = false;
});
},
),
),
Container(
height: 40,
width: 100,
child: InkWell(
onTap: () {
setState(() {
_isEditingText = true;
});
},
),
),
],
)
],
),
),
Container(
margin: EdgeInsets.all(20.0),
child: ButtonTheme(
minWidth: double.infinity,
height: 50,
child: OutlineButton(
child: Text("Continue",
style: TextStyle(color: Colors.amber, fontSize: 16)),
borderSide: BorderSide(
color: Colors.amber,
),
highlightElevation: 10.0,
onPressed: () {
},
),
),
),
],
),
),
),
);
});
}
and this is my local JSON data:
[
{
"name": "Malaysia",
"dial_code": "+60",
"code": "MY"
},
{
"name": "Afghanistan",
"dial_code": "+93",
"code": "AF"
},
{
"name": "Aland Islands",
"dial_code": "+358",
"code": "AX"
},
{
"name": "Albania",
"dial_code": "+355",
"code": "AL"
},
{
"name": "Algeria",
"dial_code": "+213",
"code": "DZ"
},
{
"name": "AmericanSamoa",
"dial_code": "+1684",
"code": "AS"
},
{
"name": "Andorra",
"dial_code": "+376",
"code": "AD"
},
{
"name": "Angola",
"dial_code": "+244",
"code": "AO"
},
{
"name": "Anguilla",
"dial_code": "+1264",
"code": "AI"
},
{
"name": "Antarctica",
"dial_code": "+672",
"code": "AQ"
},
{
"name": "Antigua and Barbuda",
"dial_code": "+1268",
"code": "AG"
},
{
"name": "Argentina",
"dial_code": "+54",
"code": "AR"
},
{
"name": "Armenia",
"dial_code": "+374",
"code": "AM"
},
{
"name": "Aruba",
"dial_code": "+297",
"code": "AW"
},
{
"name": "Australia",
"dial_code": "+61",
"code": "AU"
},
{
"name": "Austria",
"dial_code": "+43",
"code": "AT"
},
{
"name": "Azerbaijan",
"dial_code": "+994",
"code": "AZ"
},
{
"name": "Bahamas",
"dial_code": "+1242",
"code": "BS"
},
{
"name": "Bahrain",
"dial_code": "+973",
"code": "BH"
},
{
"name": "Bangladesh",
"dial_code": "+880",
"code": "BD"
},
{
"name": "Barbados",
"dial_code": "+1246",
"code": "BB"
},
{
"name": "Belarus",
"dial_code": "+375",
"code": "BY"
},
{
"name": "Belgium",
"dial_code": "+32",
"code": "BE"
},
]

Answer 1

For problem 1 you can have the Map for DropdownMenuItem. While showing only name and dial_code you can set child like
items: jsonResult.map((element) {
return DropdownMenuItem(
child: Text(
"${element['name']} ${element['dial_code']}"),
value: element,
);
}).toList(),
For problem 2 updating state on dialog needs to use StatefulBuilder and use its setstate to update on dialog, prefer renaming this.
return StatefulBuilder(
builder: (context, setStateSTB) => ClipRRect(
......
onChanged: (_selectedCountryCode) {
//* to change on dialog
setStateSTB(() {
_defaultCountryCode = _selectedCountryCode;
});
//* to change on StateLevel
setState(() {
_defaultCountryCode = _selectedCountryCode;
});
},
Update the issue was on loadJsonData()
Future<void> loadJsonData() async {
///
String data = await rootBundle.loadString('assets/country_code.json');
final jsonString = jsonDecode(data) as List;
final item = jsonString.map((e) {
return {
'name': e['name'] as String,
'dial_code': e['dial_code'] as String,
'code': e['code'] as String,
};
}).toList();
setState(() {
jsonResult = item;
});
}
Full snippet
class _TFTState extends State<TFT> {
Map<String, String>? _defaultCountryCode;
late List<Map<String, String>> jsonResult;
#override
void initState() {
super.initState();
loadJsonData();
}
Future<void> loadJsonData() async {
///
String data = await rootBundle.loadString('assets/country_code.json');
final jsonString = jsonDecode(data) as List;
final item = jsonString.map((e) {
return {
'name': e['name'] as String,
'dial_code': e['dial_code'] as String,
'code': e['code'] as String,
};
}).toList();
setState(() {
jsonResult = item;
});
}
final phoneController = TextEditingController();
_showModalPhoneWidget() {
showModalBottomSheet(
backgroundColor: Colors.green,
context: context,
isDismissible: true,
//transitionAnimationController: Duration(milliseconds: 400),
builder: (context) {
return StatefulBuilder(
builder: (context, setStateSTB) => ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0)),
child: Container(
height: 250,
color: Colors.white,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text(
"Update Phone",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.only(top: 20.0, left: 10.0),
child: Row(
children: <Widget>[
Text(
"Tel No",
style:
TextStyle(color: Colors.black, fontSize: 15.0),
),
Text(
"*",
style: TextStyle(color: Colors.red, fontSize: 15.0),
),
],
),
),
Container(
margin:
EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0),
height: 50.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: const Color(0xffededed))),
child: Row(
children: <Widget>[
DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton<Map<String, String>>(
value: _defaultCountryCode,
hint: Text("Hint textOn null"),
items: jsonResult.map((element) {
return DropdownMenuItem(
child: Text(
"${element['name']} ${element['dial_code']}"),
value: element,
);
}).toList(),
onChanged: (_selectedCountryCode) {
//* to change on dialog
setStateSTB(() {
_defaultCountryCode = _selectedCountryCode;
});
//* to change on StateLevel
setState(() {
_defaultCountryCode = _selectedCountryCode;
});
},
),
),
),
Container(
width: 250,
height: 40,
child: TextField(
controller: phoneController,
textAlign: TextAlign.start,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Tel No. Ex:0133333333',
),
),
),
],
),
),
Container(
margin: EdgeInsets.all(20.0),
child: ButtonTheme(
minWidth: double.infinity,
height: 50,
child: OutlineButton(
child: Text("Continue",
style:
TextStyle(color: Colors.amber, fontSize: 16)),
borderSide: BorderSide(
color: Colors.amber,
),
highlightElevation: 10.0,
onPressed: () {},
),
),
),
],
),
),
),
);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
ElevatedButton(
onPressed: () {
// json loaded on initState
print(jsonResult.length);
_showModalPhoneWidget();
},
child: Text("s"),
)
],
),
);
}
}