Flutter combo box item in list view - flutter

Question

I'm trying to make a combobox and when I select an item, I want it to be added in a listview when a button is pressed.
I tried multiple solutions, but none seems to work, as far as I did, I could make a input field and add the items manually, but I can't do it with a combobox ( without letting the user write them manually ).
Here is what I did:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:searchable_dropdown/searchable_dropdown.dart';
class LocationTab extends StatefulWidget {
#override
_LocationTabState createState() => _LocationTabState();
}
class _LocationTabState extends State<LocationTab> {
List<String> mylist = List();
List<ParentCategoryComboBox> _visibility =
ParentCategoryComboBox.getParentCategory();
List<DropdownMenuItem<ParentCategoryComboBox>> _dropdownMenuItems;
List<PlatformReachComboBox> _platformReach =
PlatformReachComboBox.getPlatformReach();
List<DropdownMenuItem<PlatformReachComboBox>> _dropdownPlatformReach;
PlatformReachComboBox _selectedPlatformReach;
ParentCategoryComboBox _selectedVisibility;
#override
void initState() {
_dropdownMenuItems = buildDropDownMenuItems(_visibility);
_selectedVisibility = _dropdownMenuItems[0].value;
_dropdownPlatformReach =
buildDropdownMenuItemsPlatformReach(_platformReach);
_selectedPlatformReach = _dropdownPlatformReach[0].value;
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.vertical,
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"Select visibility:",
style: TextStyle(
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
],
),
DropdownButton(
icon: Icon(
Icons.visibility,
color: Colors.black45,
),
isExpanded: true,
value: _selectedVisibility,
items: _dropdownMenuItems,
onChanged: (ParentCategoryComboBox selectedVisibility) {
setState(() {
_selectedVisibility = selectedVisibility;
});
},
),
SizedBox(
height: 35,
),
Container(
padding: new EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
borderRadius: BorderRadius.circular((10))),
child: Column(
children: <Widget>[
SizedBox(
height: 10,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Select platform reach:",
style: TextStyle(
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
SizedBox(
height: 20,
),
Row(
children: <Widget>[
Expanded(
child: SearchableDropdown(
isExpanded: true,
value: _selectedPlatformReach,
items: _dropdownPlatformReach,
isCaseSensitiveSearch: false,
onChanged:
(PlatformReachComboBox selectedPlatformReach) {
setState(() {
_selectedPlatformReach = selectedPlatformReach;
});
},
),
flex: 2,
),
Expanded(
child: Container(
height: 50.0,
width: 80,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.blue,
color: Colors.deepPurpleAccent,
elevation: 0.0,
child: GestureDetector(
onTap: () {
setState(() {
mylist.add(_selectedPlatformReach.toString());
});
},
child: Center(
child: Text(
'ADD',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
flex: 0,
),
],
),
SizedBox(
height: 10,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Added:",
style: TextStyle(
color: Colors.indigoAccent,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
SizedBox(
height: 10,
),
ListView.builder(
padding: EdgeInsets.only(left: 10),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: mylist.length,
itemBuilder: (BuildContext ctxt, int Index) {
return Text(
mylist[Index]
);
},
),
// ListView.builder(
// padding: EdgeInsets.only(left: 10),
// scrollDirection: Axis.vertical,
// shrinkWrap: true,
// itemCount: _platformReach.length,
// itemBuilder: (BuildContext ctxt, int Index) {
// return Text(
// "Galati"
// );
//// return DropdownButton(
//// value: _selectedPlatformReach.toString(),
//// items: _dropdownPlatformReach,
//// onChanged: (value) {
//// _selectedPlatformReach = value;
//// setState(() {});
//// },
//// hint: Text('Select drowdown'),
//// );
//// return new Text(_dropdownPlatformReach[Index].value);
// },
// ),
],
),
),
],
),
),
);
}
}
Mock data class:
import 'package:flutter/material.dart';
class PlatformReachComboBox {
String name;
String hint;
PlatformReachComboBox(this.name, this.hint);
static List<PlatformReachComboBox> getPlatformReach() {
return <PlatformReachComboBox>[
PlatformReachComboBox('Jud Galati', '(RO, [Galati] County)'),
PlatformReachComboBox('Jud Braila', '(RO, [Braila] County)'),
PlatformReachComboBox('Jud Prahova', '(RO, [Ploiesti] County)'),
PlatformReachComboBox('Jud Maramures', '(RO, [Baia Mare] County)'),
];
}
}
List<DropdownMenuItem<PlatformReachComboBox>>
buildDropdownMenuItemsPlatformReach(List platforms) {
List<DropdownMenuItem<PlatformReachComboBox>> items = List();
for (PlatformReachComboBox platform in platforms) {
items.add(
DropdownMenuItem(
value: platform,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
platform.name,
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.start,
),
Text(
platform.hint,
style:
TextStyle(fontWeight: FontWeight.normal, color: Colors.grey),
textAlign: TextAlign.end,
)
],
),
),
);
}
return items;
}
And this is where I encounter the problem, I don't know what to return in ListView for me pressing the button, and then the item to be added in there:
ListView.builder(
padding: EdgeInsets.only(left: 10),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _platformReach.length,
itemBuilder: (BuildContext ctxt, int Index) {
return Text(
"Galati"
);
},
),

Answer 1

please try this way ... define a list
List<String> mylist = List();
and use it below
ListView.builder(
padding: EdgeInsets.only(left: 10),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: mylist.length,
itemBuilder: (BuildContext ctxt, int Index) {
return Text(
mylist[Index]
);
},
),
and After button Clicked
setState(() {
mylist.add(_selectedVisibility.name);
});