Flutter Bloc Search Textfield reloads on every state change

Question

I've developed a search screen using bloc patter to filter local list data. Here my problem is every-time I search filter the list the search box too get reloaded due to event change. Any solutions to fix such issue.

@override
Widget build(BuildContext context) {
    return BlocProvider<Bloc>(
            create: (context) => Bloc(),
            child: Scaffold(
                   appBar: AppBar(leading:leading),
                   body: BlocBuilder(
                       bloc: _bloc,
    builder: (context, BlocState state) {
        return Column(
                   children: [
                       TextFormField(controller:controller,
                        onChanged: (filterKey) {
                         _bloc.add(Search(state.listData,filterKey));
                        },
                       ),
                       ListView.builder(....),
                   ],
               );
           },
        ),
     ),
  );
}

you dont need to wrap the whole column in a bloc builder you can wrap bloc builder on each of the widgets — Daniel Aidoo, Mar 06 '23 at 08:38
check this link hope helpful. [Do function after search](https://stackoverflow.com/a/61157504/12614737) — Mohammad Hosein Ghabasefidi, Mar 06 '23 at 08:48

Daniel Aidoo · Answer 1 · 2023-03-06T08:53:44.453

0

class SamplePage extends StatelessWidget {
 const SamplePage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return BlocProvider(
    create: (context) => SampleBloc(),
    child: const _SampleView(),
  );
}
}

class _SampleView extends StatefulWidget {
  const _SampleView({Key? key}) : super(key: key);

  @override
  State<_SampleView> createState() => _SampleViewState();
}

class _SampleViewState extends State<_SampleView> {
  final TextEditingController controller = TextEditingController()
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(leading: leading),
      body: Column(
        children: [
          TextFormField(
            controller: controller,
            onChanged: (filterKey) {
                context.read<SampleBloc>().add(Search(context.watch<SampleBloc>().state.listData,filterKey));
            },
          ),
          BlocBuilder<SampleBloc, SampleState>(
              builder: (context,state){
            return ListView.builder(....),;
          }),
        ],
      )
    );
  }
}

edited Mar 06 '23 at 08:53

answered Mar 06 '23 at 08:46

Daniel Aidoo

134
1
6

the textfield doesnt need to be part of the bloc builder – Daniel Aidoo Mar 06 '23 at 08:48
ooooh ok, i didnt see that, let me update – Daniel Aidoo Mar 06 '23 at 08:51
is it ok for you now? you can also use bloc listener or even move your onChange callback into the bloc so that whenever there is a change in the controller, update is made in the bloc and the result will be given to listView – Daniel Aidoo Mar 06 '23 at 08:54
I tried your code snipet but seems not updating. Can you help me out ? – Joel Mar 06 '23 at 09:21

score 0 · Answer 2 · answered Mar 06 '23 at 09:37

You can possibly try wrapping TextFormField inside StatefulBuilder like:

@override
Widget build(BuildContext context) {
  return BlocProvider<Bloc>(
    create: (context) => Bloc(),
    child: Scaffold(
      appBar: AppBar(leading: leading),
      body: BlocBuilder(
        bloc: _bloc,
        builder: (context, BlocState state) {
          return Column(
            children: [
              StatefulBuilder(
                builder: (context, StateSetter setState) {
                  return TextFormField(
                    controller: controller,
                    onChanged: (filterKey) {
                      _bloc.add(Search(state.listData, filterKey));
                    },
                  );
                },
              ),
              Expanded(
                child: ListView.builder(
                  //...
                ),
              ),
            ],
          );
        },
      ),
    ),
  );
}

Flutter Bloc Search Textfield reloads on every state change

2 Answers2