Flickering screen of returning Widget, flutter-bloc pattern

Question

I'm new to flutter, I just followed the firebase login flutter-bloc tutorial to do the same operation for my app,

Everything goes well, except the first screen loading.

home: BlocBuilder<AuthBloc, AuthState>(
    builder: (context, state) {
      if (state is Uninitialized) { <=== return regardless of the state
        return WelcomeScreen();
      } else if (state is Unauthenticated) { <=== return regardless of the state
        return LoginScreen(userRepository: _userRepository);
      } else if (state is Authenticated) {
        return HomeScreen( <=== return regardless of the state
          user: state.user,
          homeRepository: _homeRepository,
          userRepository: _userRepository,
        );
      }
      return WelcomeScreen();
    },

flutter-bloc main.dart

The if condition return every screen regardless of the state, if state condition met, It should break the condition and return only one widget. But it's not the case here, it returns every screen weird.

Thanks

Answer 1

A likely cause on why the screen flickers is that a new screen is being returned by BlocBuilder() . Per docs, BlocBuilder rebuilds in response to new states. To prevent unnecessary rebuilds you're not expecting, you may consider using BlocListener as it's guaranteed to be called only once for each state change unlike the builder in BlocBuilder .