TextField focus/unfocus forces my BloC to be recreated

Question

I have the following setup:

class PagesContainer extends StatelessWidget{
final PageController _pCont = PageController();
  @override
  Widget build(BuildContext context) {

    return BlocProvider(
      bloc:ExampleBloc(),
          child: PageView(
          // physics: NeverScrollableScrollPhysics(),
          controller: _pCont,
          children: [
            Screen1(),
            Screen2(),
          ]),
    );
  }}

class ExampleBloc extends Bloc{
ExampleBloc(){
  print('Bloc is initialized');
}

  @override
  void dispose() {
    // TODO: implement dispose
  }

}


class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<ExampleBloc>(context);
    return Scaffold(
      body: TextField()
    );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container();
  }
}

The problem is whenever I click to focus/unfocus the TextField in Screen1 the whole widget tree is re-rendered causing my ExampleBloc to be recreated and I can see print('Bloc is initialized'); executed again and again on each focus/unfocus event. How can I prevent this recreation of the bloc from happening?

Same story as this one: https://stackoverflow.com/questions/52249578/how-to-deal-with-unwanted-widget-build — Rémi Rousselet, Oct 16 '18 at 14:28
Can you elaborate more on how to make changes to my code to be aligned with your answer? — Shady Aziza, Oct 16 '18 at 14:40
PagesContainer should be stateful. And you should create your `ExampleBloc` in the initState and store it in your state — Rémi Rousselet, Oct 16 '18 at 14:42
BTW I found the article create on which you took the `BlocBuilder` from and blamed the author for you! That `bloc` field is confusing. I suggest switching to a builder callback — Rémi Rousselet, Oct 17 '18 at 13:12
I will try that it sounds better, and why do not you make your own tutorial on bloc :p — Shady Aziza, Oct 17 '18 at 14:28
In the mean time, I made a small helper to entirely replace your `BlocProvider` :https://github.com/rrousselGit/provider — Rémi Rousselet, Oct 19 '18 at 12:28

score 0 · Accepted Answer · answered Oct 16 '18 at 14:45

With the help of Rémi, this change to PageContainer solved my problem:

Reference answer can be found here for more elaboration

class PagesContainerState extends State<PagesContainer> {
  ExampleBloc _bloc;

final PageController _pCont = PageController();
@override
  void initState() {
    _bloc=ExampleBloc();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {

    return BlocProvider(
      bloc:_bloc,
          child: PageView(
          // physics: NeverScrollableScrollPhysics(),
          controller: _pCont,
          children: [
            Screen1(),
            Screen2(),
          ]),
    );
  }}

TextField focus/unfocus forces my BloC to be recreated

1 Answers1