How to create searchable ListView in popup flutter? - flutter

Question

How it possible to create a listView with Search function in a popup flutter?
I call the listView using API laravel. I want data in the popup will be able to be select or user can search it in popup and then select it. As user select the data and click submit data will be able to post in database.
below is the function that I used to call the data
List _listViewData = List();
#override
initState() {
super.initState();
// when loading your widget for the first time, loads country from db
_countryA();
}
void _countryA() async {
// gets data from db
final countryA = await CallApi().getData('countries');
var resBody = json.decode(countryA.body);
setState(() {
// converts db row data to List<String>, updating state
_listViewData = resBody;
});
}
I just know how to call the data of country using dropdown in an alert button.
I dont want it to be display in dropdown but instead in a list in flutter.
below is function that I called in the dropdown
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Select Country", textAlign:TextAlign.center,),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
content: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: DropdownButton(
items: _listViewData.map((item) {
return new DropdownMenuItem(
child: new Text(item['country']),
value: item['id'].toString(),
);
}).toList(),
onChanged: (newVal) {
setState(() {
_mySelectionAr = newVal;
});
},
value: _mySelectionAr,
),
),
],
),
);
},
);
}
So, the conclusion is that I want it to be display in listview in the flutter popup not a dropdown in a popup. I just cannot figure out how to call all the list data of country in a list in popup include with the search function.

Answer 1

Edit
The most simple way is after folk this github.
You can update file https://github.com/figengungor/country_pickers/blob/master/lib/countries.dart directly
or in
https://github.com/figengungor/country_pickers/blob/master/lib/country_picker_dialog.dart at line 113 change _allCountries to what you need, you can hard code or use your own ready made api but need to follow owner's Country Class.
You can use https://pub.dev/packages/country_pickers directly or reference source code and build your own
for Counties you need does not exist. you can fork this github project and modify directly https://github.com/figengungor/country_pickers/blob/master/lib/countries.dart
It support features you need can use in showDialog and inside is a ListView
also provide search by phone and name
full example code
import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Country Pickers Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
'/': (context) => DemoPage(),
},
);
}
}
class DemoPage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<DemoPage> {
Country _selectedDialogCountry =
CountryPickerUtils.getCountryByPhoneCode('90');
Country _selectedFilteredDialogCountry =
CountryPickerUtils.getCountryByPhoneCode('90');
Country _selectedCupertinoCountry =
CountryPickerUtils.getCountryByIsoCode('tr');
Country _selectedFilteredCupertinoCountry =
CountryPickerUtils.getCountryByIsoCode('DE');
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Country Pickers Demo'),
),
body: ListView(
padding: EdgeInsets.all(8.0),
children: <Widget>[
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('CountryPickerDropdown'),
ListTile(title: _buildCountryPickerDropdown(false)),
],
),
),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('CountryPickerDropdown (filtered)'),
ListTile(title: _buildCountryPickerDropdown(true)),
],
),
),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('CountryPickerDialog'),
ListTile(
onTap: _openCountryPickerDialog,
title: _buildDialogItem(_selectedDialogCountry),
),
],
),
),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('CountryPickerDialog (filtered)'),
ListTile(
onTap: _openFilteredCountryPickerDialog,
title: _buildDialogItem(_selectedFilteredDialogCountry),
),
],
),
),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('CountryPickerCupertino'),
ListTile(
title: _buildCupertinoSelectedItem(_selectedCupertinoCountry),
onTap: _openCupertinoCountryPicker,
),
],
),
),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('CountryPickerCupertino (filtered)'),
ListTile(
title: _buildCupertinoSelectedItem(
_selectedFilteredCupertinoCountry),
onTap: _openFilteredCupertinoCountryPicker,
),
],
),
),
],
),
);
}
_buildCountryPickerDropdown(bool filtered) => Row(
children: <Widget>[
CountryPickerDropdown(
initialValue: 'AR',
itemBuilder: _buildDropdownItem,
itemFilter: filtered
? (c) => ['AR', 'DE', 'GB', 'CN'].contains(c.isoCode)
: null,
onValuePicked: (Country country) {
print("${country.name}");
},
),
SizedBox(
width: 8.0,
),
Expanded(
child: TextField(
decoration: InputDecoration(labelText: "Phone"),
),
)
],
);
Widget _buildDropdownItem(Country country) => Container(
child: Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(
width: 8.0,
),
Text("+${country.phoneCode}(${country.isoCode})"),
],
),
);
Widget _buildDialogItem(Country country) => Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(width: 8.0),
Text("+${country.phoneCode}"),
SizedBox(width: 8.0),
Flexible(child: Text(country.name))
],
);
void _openCountryPickerDialog() => showDialog(
context: context,
builder: (context) => Theme(
data: Theme.of(context).copyWith(primaryColor: Colors.pink),
child: CountryPickerDialog(
titlePadding: EdgeInsets.all(8.0),
searchCursorColor: Colors.pinkAccent,
searchInputDecoration: InputDecoration(hintText: 'Search...'),
isSearchable: true,
title: Text('Select your phone code'),
onValuePicked: (Country country) =>
setState(() => _selectedDialogCountry = country),
itemBuilder: _buildDialogItem)),
);
void _openFilteredCountryPickerDialog() => showDialog(
context: context,
builder: (context) => Theme(
data: Theme.of(context).copyWith(primaryColor: Colors.pink),
child: CountryPickerDialog(
titlePadding: EdgeInsets.all(8.0),
searchCursorColor: Colors.pinkAccent,
searchInputDecoration: InputDecoration(hintText: 'Search...'),
isSearchable: true,
title: Text('Select your phone code'),
onValuePicked: (Country country) =>
setState(() => _selectedFilteredDialogCountry = country),
itemFilter: (c) => ['AR', 'DE', 'GB', 'CN'].contains(c.isoCode),
itemBuilder: _buildDialogItem)),
);
void _openCupertinoCountryPicker() => showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return CountryPickerCupertino(
backgroundColor: Colors.black,
itemBuilder: _buildCupertinoItem,
pickerSheetHeight: 300.0,
pickerItemHeight: 75,
initialCountry: _selectedCupertinoCountry,
onValuePicked: (Country country) =>
setState(() => _selectedCupertinoCountry = country),
);
});
void _openFilteredCupertinoCountryPicker() => showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return CountryPickerCupertino(
backgroundColor: Colors.white,
pickerSheetHeight: 200.0,
initialCountry: _selectedFilteredCupertinoCountry,
onValuePicked: (Country country) =>
setState(() => _selectedFilteredCupertinoCountry = country),
itemFilter: (c) => ['AR', 'DE', 'GB', 'CN'].contains(c.isoCode),
);
});
Widget _buildCupertinoSelectedItem(Country country) {
return Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(width: 8.0),
Text("+${country.phoneCode}"),
SizedBox(width: 8.0),
Flexible(child: Text(country.name))
],
);
}
Widget _buildCupertinoItem(Country country) {
return DefaultTextStyle(
style:
const TextStyle(
color: CupertinoColors.white,
fontSize: 16.0,
),
child: Row(
children: <Widget>[
SizedBox(width: 8.0),
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(width: 8.0),
Text("+${country.phoneCode}"),
SizedBox(width: 8.0),
Flexible(child: Text(country.name))
],
),
);
}
}