I have this code in Flutter. Why doesn’t listview.builder live re-render with results?
I want to live filter a listview to improve the search. I tried many YT tutorials and online tutorials, but no one got me where i need.
Please help me with this struggle.
I tried this: https://karthikponnam.medium.com/flutter-search-in-listview-1ffa40956685 but no result.
class _UnitsPage extends State<UnitsPage> {
late Future<List<UnitModel>> units;
late Future<List<Speciality>> specialities;
Speciality? _selectedSpeciality;
late List<Speciality> items;
late List<Speciality> originalSpecialities;
final TextEditingController _searchSpeciality = TextEditingController();
late Future<Position> position;
@override
void initState()
{
super.initState();
units = getUnits();
specialities = getSpecialities();
}
@override
void dispose()
{
super.dispose();
_searchSpeciality.dispose();
}
Future<void> _refreshUnits() async
{
if(_selectedSpeciality != null)
{
setState(() {
units = getUnits(specialityId: _selectedSpeciality!.id);
});
}
else{
setState(() {
units = getUnits(specialityId: 0);
});
}
}
@override
Widget build(BuildContext context) {
String selectedSpeciality = 'Selecteaza specialitatea';
if(_selectedSpeciality != null) {
selectedSpeciality = _selectedSpeciality!.name;
}
return Scaffold(
drawer: const Menu(),
appBar: AppBar(
systemOverlayStyle: const SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.light, //<-- For Android SEE HERE (dark icons)
statusBarBrightness: Brightness.light, //<-- For iOS SEE HERE (dark icons)
),
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xff058efc),
Color(0xff74c0fc)
]
)
),
),
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Transform.translate(
offset: const Offset(-20.0, 0.0),
child: const Text('Unități medicale', style: TextStyle(color: Colors.white)
),
),
iconTheme: const IconThemeData(color: Colors.white),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
child: Column(
children: [
FutureBuilder<List<Speciality>>(
future: specialities,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else if (snapshot.hasData) {
items = snapshot.data!;
originalSpecialities = snapshot.data!;
return BootstrapRow(
children: [
BootstrapCol(
child: TextButton(
child: Text(selectedSpeciality),
onPressed: (){
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context){
return FractionallySizedBox(
heightFactor: 0.8,
child: SingleChildScrollView(
child: BootstrapRow(
children: [
BootstrapCol(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 16),
child: TextField(
controller: _searchSpeciality,
onChanged: (search) {
searchSpeciality(search);
},
)
),
),
BootstrapCol(
child: SizedBox(
height: 700,
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context , index){
return ListTile(
tileColor: (_selectedSpeciality != null && _selectedSpeciality!.id == items[index].id) ? const Color(0xff058efc) : null,
textColor: (_selectedSpeciality != null && _selectedSpeciality!.id == items[index].id) ? Colors.white : null,
onTap: (){
setState(() {
_selectedSpeciality = items[index];
});
Navigator.pop(context);
},
title: Text(items[index].name),
);
}
),
)
)
],
),
)
);
}
);
},
)
),
BootstrapCol(
child: ElevatedButton(
onPressed: (){
_refreshUnits();
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
),
child: const Text("Caută")
)
)
]
);
} else {
return const Text('No data available');
}
},
),
Expanded(
child: FutureBuilder<List<UnitModel>>(
future: units,
builder: (context, snapshot) {
switch(snapshot.connectionState)
{
case ConnectionState.none:
case ConnectionState.waiting:
case ConnectionState.active:
{
return const Center(child: CircularProgressIndicator(color: Colors.blue));
}
case ConnectionState.done:
{
return BootstrapRow(
children: [
for(UnitModel unit in snapshot.data!)
BootstrapCol(
xs: 6,
child: UnitWidget(unit: unit)
)
],
);
}
}
},
),
),// This trailing comma makes auto-formatting nicer for build methods.
],
))
);
}
void searchSpeciality(String search)
{
setState(() {
items = originalSpecialities
.where((item) => item.name.toLowerCase().contains(search.toLowerCase()))
.toList();
});
}
}```
New contributor
Alexandru Silasi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.