Question 75866 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Bloc Search Textfield reloads on every state change

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(....),
                   ],
               );
           },
        ),
     ),
  );
}
Tags:

2

Answers


  1. 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(....),;
          }),
        ],
      )
    );
  }
}
    Login or Signup to reply.
  2. 0

    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(
                  //...
                ),
              ),
            ],
          );
        },
      ),
    ),
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search