I have a countries list which shows the time for the countries. Please let me know how to add the search bar.You can see the WorldTime list in the code. So it's displaying the countries name with the image. The code is as follows.
Choose_Location.dart
class Chooselocation extends StatefulWidget {
@override
_ChooseLocationState createState() => _ChooseLocationState();
}
class _ChooseLocationState extends State<Chooselocation> {
List<WorldTime> locations =[
WorldTime(url:'Europe/London', location: 'London', flag: 'England.png'),
WorldTime(url:'Europe/Berlin', location: 'Berlin', flag: 'Germany.jpg'),
WorldTime(url:'Africa/Cairo', location: 'Cairo', flag: 'Egypt.jpg'),
WorldTime(url:'Africa/Nairobi', location: 'Nairobi', flag: 'Kenya.jpg'),
WorldTime(url:'Asia/Jakarta', location: 'Seoul', flag: 'Indonesia.jpg'),
WorldTime(url:'Asia/Qatar', location: 'Qatar', flag: 'Qatar.png'),
WorldTime(url:'Africa/Khartoum', location: 'Sudan', flag: 'Sudan.jpg'),
WorldTime(url:'Asia/Karachi', location: 'Pakistan', flag: 'Pakistan.png'),
WorldTime(url:'America/New_York', location: 'USA', flag: 'USA.jpg'),
];
void updatetime(index) async{
WorldTime instance = locations[index];
await instance.getTime();
// mnavigate to home screen
Navigator.pop(context,{
'location':instance.location,
'flag':instance.flag,
'time':instance.time,
'isDaytime':instance.isDaytime,
});
}
@override
Widget build(BuildContext context) {
print('Build state function');
return Scaffold(
backgroundColor: Colors.blueGrey[200],
appBar: AppBar(
title:Text('Choose a Location'),
centerTitle:true,
elevation:0,
),
body: ListView.builder(
itemCount:locations.length,
itemBuilder: (context,index){
return Padding(
padding: const EdgeInsets.symmetric(vertical:1.0, horizontal: 4.0),
child: Card(child: ListTile(
onTap: (){
updatetime(index);
print(locations[index].location);
},
title:Text(locations[index].location),
leading: CircleAvatar(
backgroundImage: AssetImage('assets/${locations[index].flag}')),
),
),
);
}
),
);
}
}
You can see the image of the UI below.
In my case, i don't have
WorldTime
model class, so i usedList<String>
for filter functionality. You can use your model class for filter your list.Output of above code would be :
Hope this may help you :)