How to create a search field in Flutter? - flutter

Question

I am using the flutter_riverpod package. I'm using it for a search field and it's showing an error when searching for something. I asked a question about the error but couldn't fix it. Is there any other way to create a search field in Flutter using the flutter_riverpod package?
Here is some code:
User interface code:
TextFormField(
…
onChanged: (search) => controller.updateSearch(search),
onSaved: (search) {
search == null ? null : controller.updateSearch(search);
},
),
itemBuilder: (context, index) {
if (mounted) {
return name.contains(state.search) ? ListTile(title: Text(name)) : Container();
}
return Container();
},
Controller code:
class Controller extends StateNotifier<State> {
Controller() : super(State());
void updateSearch(String search) => state = state.copyWith(search: search);
}
final controllerProvider = StateNotifierProvider.autoDispose< Controller, State>((ref) {
return Controller();
});
State code:
class State {
State({this.search = "", this.value = const AsyncValue.data(null)});
final String search;
final AsyncValue<void> value;
bool get isLoading => value.isLoading;
State copyWith({String? search, AsyncValue<void>? value}) {
return State(search: search ?? this.search, value: value ?? this.value);
}
}
Is there something wrong with the code above? If yes, what is the way to create the seach field using the flutter_riverpod package? If not, why am I getting the error message (go to this question to see the error message)?
If I can't create a search field using the flutter_riverpod package in Flutter, how can I create a search field (I hope maybe without using any package and without using setState function)?
Feel free to comment if you need more information!
How to fix this error? I would appreciate any help. Thank you in advance!
Update:
We can discuss in this room.

Answer 1

this may not answer directly the question but it may give another variation on how to restructure the code.
To track the loading state, from the controller:
class Controller extends StateNotifier<AsyncValue<void>> {
Controller({required this.repository}) : super(AsyncData(null));
//this depends on where your search api is located at.
//for this example i use repository because it is mostly where its is.
final SeachRepository repository
Future<void> submitSearch(String search) async {
state = const AsyncLoading();
//`.guard` is used to handle possible errors from your API so no need
// to use `try/catch`
state = await AsyncValue.guard(()=> repository.submitSearch(search));
}
}
final controllerProvider = StateNotifierProvider.autoDispose< Controller, AsyncValue<void>>((ref) {
return Controller();
});
You can use your controller from your UI like this:
final controller = ref.watch(controllerProvider.notifier);
TextFormField(
…
onChanged: (search) => ref.read(searchValueProvider.notifier).state = search,
onSaved: (search) {
search == null ? null : controller.submitSearch(search);
},
),
And for the loading state:
//your loading state
final state = ref.watch(controllerProvider);
//to handle passible error:
ref.listen<AsyncValue>(controllerProvider, (_, state)=> showAlertDialog(context));
itemBuilder: (context, index) {
if (mounted) {
return name.contains(state.search) ? ListTile(title: Text(name)) : Container();
}
return state.isLoading ? CircularProgressIndicator() : Container();
},
for the search variable, you can store it in a StateProvider for easy access:
final searchValueProvider = StateProvider.autodispose((ref)=> '');

Answer 2

Try the following code:
class FooSearchRiverpod extends ConsumerWidget {
final controller = StreamController<String>();
late final provider = obtainProvider(controller);
#override
Widget build(BuildContext context, WidgetRef ref) {
AsyncValue<List<String>> list = ref.watch(provider);
return Column(
children: [
TextField(
onChanged: controller.add,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.search), hintText: 'search...'),
),
Expanded(
child: list.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Card(elevation: 4, child: Text(err.toString())),
),
),
data: (list) => AnimatedSwitcher(
duration: const Duration(milliseconds: 400),
child: ListView.builder(
itemCount: list.length,
itemBuilder: (ctx, i) => ListTile(
key: UniqueKey(),
title: Text(list[i]),
onTap: () => debugPrint('onTtap: ${list[i]}'),
),
),
),
),
),
],
);
}
obtainProvider(StreamController<String> controller) {
return StreamProvider.autoDispose<List<String>>((ref) => controller.stream
.debounce(const Duration(milliseconds: 1000))
.asyncMap(_getAPI));
}
final list = ['foo', 'foo 2', 'bar', 'bar 2', 'spam'];
Future<List<String>> _getAPI(String query) async {
debugPrint('_getAPI: |$query|');
if (query.isEmpty) return [];
return list.where((s) => s.contains(query)).toList();
}
}