Bloc: BlocBuilder not listen to state change

Created on 18 Sep 2020  路  7Comments  路  Source: felangel/bloc

I tried to use flutter firebase login with bloc which implements social sign in. but BlocBuilder not listening state change even it shows me the state change using blocdelegate. BlocBuilder listens to the initial state to display splash screen. but don't listen to login and logout events to display homepage and welcome screen respectively. please help me

auth_bloc.dart

`import 'package:bloc/bloc.dart';
import 'package:bekloh_user/bloc/authbloc/auth_event.dart';
import 'package:bekloh_user/bloc/authbloc/auth_state.dart';
import 'package:bekloh_user/services/auth_service.dart';
import 'package:flutter/foundation.dart';

class AuthenticationBloc extends Bloc {
final UserRepository _userRepository;

AuthenticationBloc({@required UserRepository userRepository}) : assert(userRepository != null), _userRepository = userRepository, super(null);

AuthenticationState get initialState => Uninitialized();

@override
Stream mapEventToState(AuthenticationEvent event) async* {
if (event is AppStarted) {
yield* _mapAppStartedToState();
} else if (event is LoggedIn) {
yield Authenticated('dd');
} else if (event is LoggedOut) {
yield* _mapLoggedOutToState();
}
}

Stream _mapAppStartedToState() async* {
yield Uninitialized();
}

Stream _mapLoggedInToState() async* {
// print('hello');
yield Authenticated("hello");

}

Stream _mapLoggedOutToState() async* {
yield Unauthenticated();
//_userRepository.signOut();
}
}
`

auth_state.dart
`import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';

//@immutable
abstract class AuthenticationState extends Equatable {
const AuthenticationState();
@override
// TODO: implement props
List get props => [];
}

class Uninitialized extends AuthenticationState {
@override
String toString() => 'Uninitialized';

}

class Authenticated extends AuthenticationState {
final String displayName;

Authenticated(this.displayName) ;

@override
String toString() => 'Authenticated ';

@override
List get props => [displayName];

}

class Unauthenticated extends AuthenticationState {
@override
String toString() => 'Unauthenticated';

}
`

auth_event.dart
`import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';

//@immutable
abstract class AuthenticationEvent extends Equatable {
AuthenticationEvent();
@override
// TODO: implement props
List get props => [];
}

class AppStarted extends AuthenticationEvent {
@override
String toString() => 'AppStarted';

}

class LoggedIn extends AuthenticationEvent {
@override
String toString() => 'LoggedIn';

}

class LoggedOut extends AuthenticationEvent {
@override
String toString() => 'LoggedOut';

}
main.dart import 'package:bekloh_user/bloc/authbloc/authentication.dart';
import 'package:bekloh_user/bloc/authbloc/auth_bloc.dart';
import 'package:bekloh_user/bloc/simple_bloc_delegate.dart';
import 'package:bekloh_user/router/app_router.dart';
import 'package:bekloh_user/screen/home_screen.dart';
import 'package:bekloh_user/screen/login_screen.dart';
import 'package:bekloh_user/screen/register_screen.dart';
import 'package:bekloh_user/screen/splash_screen.dart';
import 'package:bekloh_user/screen/welcome_screen.dart';
import 'package:bekloh_user/services/auth_service.dart';
import 'package:bekloh_user/utilities/constants.dart';
import "package:flutter/material.dart";
import 'package:flutter_bloc/flutter_bloc.dart';

void main(){
Bloc.observer = SimpleBlocDelegate();
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
``
class _MyAppState extends State {
final UserRepository _userRepository = UserRepository();
AuthenticationBloc _authenticationBloc;
@override
void initState() {
super.initState();
_authenticationBloc = AuthenticationBloc(userRepository: _userRepository);
_authenticationBloc.add(AppStarted());
}

@override
void didUpdateWidget(oldWidget) {
super.didUpdateWidget(oldWidget);
}

@override
Widget build(BuildContext context) {
return BlocProvider(
create: (BuildContext context) => _authenticationBloc,
child: Builder(
builder: (BuildContext context){
return MaterialApp(
debugShowCheckedModeBanner: false,
//initialRoute: BlocProvider.of(context) == Uninitialized ? splashscreenRoute : loginScreenRoute,
// initialRoute: registerRoute,
onGenerateRoute: Router.generateRoute,
home: BlocBuilder(
cubit: _authenticationBloc,
builder: (context, state) {
if (state is Authenticated) {
return HomeScreen();
}
else if (state is Uninitialized) {
return SplashScreen();
}
else if (state is Unauthenticated) {
return WelcomeScreen();
}
return Container();
},
),
);
},

  )
);

}
@override
void dispose() {
// _authenticationBloc.close();
super.dispose();
}
}
`

question
Source
picture ezra126

Most helpful comment

thank you, bro. I fix some of the issues. u made my day!!!

picture ezra126 on 18 Sep 2020
👍2

All 7 comments

Hi @ezra126 馃憢

Please be aware that sharing code like this is extremely hard for anyone to read and reason about, not to mention that it is incomplete. I would kindly ask you to create a repo containing a minimal reproduction of the issue you're facing and share the link to it.
That way it would be a lot easier for anyone to help you, thanks! 馃憤

narcodico picture narcodico on 18 Sep 2020

Hi @RollyPeres
thnx for the suggestion here is the code ---> https://github.com/ezra126/bekloh_user on branch "authentication"

ezra126 picture ezra126 on 18 Sep 2020

I took a look at your repo. Your BlocBuilder cannot fire because you're not even adding events to the bloc. What I see is you tossed everything in the UI layer, but you're doing making use of the bloc at all.
Data sources like FirebaseAuth and GoogleSignIn should be used within a repository, and that repository should be injected into your AuthBloc where you would actually make the proper calls to sign in/out your user.
You would then add events to the bloc and convert those into states.

Please have a look at the existing firebase login example to have a better understanding how to build your auth flow.

Hope that sets you on the right path 馃憤

narcodico picture narcodico on 18 Sep 2020

ooh excuse me @RollyPeres I pushed other branches to Github. here is the right code for the issue just look out --->https://github.com/ezra126/bekloh_user/tree/authentication and I looked at firebase login example and understand the concept but haven't worked for me. again @RollyPeres thank in advance

ezra126 picture ezra126 on 18 Sep 2020

I've addressed your issue in this PR.
There's still an error cause by the code in the splash screen I would assume but didn't have the time to look into it.
You should move your connectivity code into the bloc, the splash screen should be a simple page without any logic.

narcodico picture narcodico on 18 Sep 2020
❤1

thank you, bro. I fix some of the issues. u made my day!!!

ezra126 picture ezra126 on 18 Sep 2020
👍2

The error is caused by using navigation to route on splash screen which found in connectivity code that's why it taints the bloc logic. I think I shouldn't have used navigation on the screen that corresponds to the state.

ezra126 picture ezra126 on 18 Sep 2020
🚀1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

krusek picture krusek  路  3Comments
RobPFarley picture RobPFarley  路  3Comments
rsnider19 picture rsnider19  路  3Comments
komapeb picture komapeb  路  3Comments
craiglabenz picture craiglabenz  路  3Comments