Bloc: [Request] Bloc Library Udemy Course

[leenorshn]

Can you please make a course on udemy for helping peoples to user in more ways your librairy philosophy in thier apps? it can help more. you can take more cases as possible to help peoples integrate flutter_bloc and bloc in thier apps. from app 's state, auth, list load and sorting, likes or views systems, input falidations, steps, graphql , rest api, grpc, testing, logging and match more ....
we can paye you for your course because you will help us many more. please help us any more. thanks a lot for what you done

[felangel]

Hi @leenorshn 👋
Thanks for opening an issue!

I'm not sure what making a udemy course entails and I worry it will be extremely time consuming when there are many videos that cover the topic already.

Some great videos to take a look at are:

• Bloc Library: Basics and Beyond 🚀 - Talk given at Flutter Europe about the basics of the bloc library, by Felix Angelov.
• Flutter Bloc Library Tutorial - Introduction to the Bloc Library, by Reso Coder.
• Flutter Youtube Search - How to build a Youtube Search app which interacts with an API using the bloc and flutter_bloc packages, by Reso Coder.
• Flutter Bloc - AUTOMATIC LOOKUP - v0.20 (and Up), Updated Tutorial - Updated Tutorial on the Flutter Bloc Package, by Reso Coder.
• Dynamic Theming with flutter_bloc - Tutorial on how to use the flutter_bloc package to implement dynamic theming, by Reso Coder.
• Persist Bloc State in Flutter - Tutorial on how to use the hydrated_bloc package to automatically persist app state, by Reso Coder.
• State Management Foundation - Introduction to state management using the flutter_bloc package, by Techie Blossom.
• Flutter Football Player Search - How to build a Football Player Search app which interacts with an API using the bloc and flutter_bloc packages, by Techie Blossom.
• Learning the Flutter Bloc Package - Learning the flutter_bloc package live, by Robert Brunhage
• Bloc Test Tutorial - Tutorial on how to unit test blocs using the bloc_test package, by Reso Coder.

Please upvote the issue if you would like me to produce video content as well as comment explaining which topics would be most beneficial 👍

[mikededo]

Hey @leenorshn!

When I started learning flutter bloc, I was really confused and I did not know how to use it. However, I focused on developing small projects where I would use the bloc pattern. After practising many cases, it gets easier and easier.
Now, it is easier to use multiple blocs which help me to create a very powerful state management for more complex apps.

I would strongly recommend any begginer in flutter bloc to start learning _reactive programmin_, specially Dart's Streams (which are incredible) and once everything is clearer, start developing different projects in which to use the flutter bloc package. Also, you can use the examples in the bloclibrary.dev!

[Gh05ts]

@mikededo Hi since you are someone who just learned it recently I'm hoping you can help me with this query it is a slightly long question but it will help me immensely because I've been stuck with progress for a while now.

In our app we have a authentication bloc, then we have a LoginBloc which gets the AuthBloc through BlocProvider and now I'm trying to implement a forgot password function in log in, for that I'm making another bloc FogotPasswordBloc.

The previous work was not done by me so I'm having some confusion about changing blocs and states between pages, so here is my question:

How are you handling navigation with blocs?

For me I tried to have a normal flat button that is using blocListener:

Navigator.push(context, MaterialPageRoute(builder: (context) =>ResetPasswordScreen(_emailController.text)));

On forgot password page I have a blocBuilder with bloc as ForgotPasswordBloc, but the app is still logging the messages from my last page's blocBuilder.

I have added _loginBloc.close() on LoginBloc page's dispose method.

[mikededo]

Could you please share a repo or an example so it is easier for me to take a look?

[Gh05ts]

Hi Mike thanks for the quick reply appreciate it, I can't share the repo directly it's not my work, I just work on it (NDA), but I can try to explain to you what I'm trying to achieve, if you can explain in words that could be enough, or in case you have some personal work that you can share, I can try to write some small code examples to try to help explain, in case you have some confusion about what I'm asking.

We have an authBloc which is basically helps with keeping the user logged in or out, so in the main.dart we have something like this

class _MyAppState extends State<MyApp> {
  Widget build(context) {
    return BlocProvider<authBloc>(
      create: (context) => authBloc,
      child: MaterialApp(
        home: BlocBuilder(
          bloc: authBloc,
          builder: (context, state) {
            if(state is a)
              return A();
            else if(state is b)
               return B();
          }
    }
}

where A(), B(), C() are things like choice(login, signup, skip), login, signup, splash, home and such other pages.

Now the part that is confusing me is that one of those return pages is a loginPage(), now on this page how should I go to the forgot password page?

Is it better to repeat this patter down there?

1)
For example instead of loginPage() I should send to loginPageController(), which would be something like this:

class _LoginControllerState extends State<LoginController> {
  Widget build(context) {
    return BlocProvider<LoginControllerBloc>(
      create: (context) => LoginControllerBloc,
      child: MaterialApp(
        home: BlocListener<LoginControllerBloc, LoginControllerState>(
          bloc: LoginControllerBloc,
          listener (context, state) {
            if(state is a)
              return LoginPage();
            else if(state is b)
               return forgotPasswordEnterDetailsPage();
            else if(state is c)
               return forgotPasswordEnterOTPPage();
        }
    }
}

and repeat this BlocProvider nesting strategy everytime I need to group different pages which fall under one category?
and each page having their own respective bloc to handle multiple events and when I need to move to the next page I will add an event to the LoginControllerBloc which I can get because it's provided. Is there any alternative approach that is better? I can think of one but I'm not sure if it's better.

Or should I do something like this going straight to LoginPage()

2)

class _LoginPageState extends State<LoginPage> {
  Widget builld(context) {
     BlocListener<LoginBloc, LoginState> {
        listener: (context, state) {
             if(state is NextPage)
               Navigator.push(context, MaterialRoute(builder: (context) => ForgotPasswordScreen()));
           }
         child: layout of the page and a button that will yield NextPage State.
      }
   }
}

I think first might be the better approach in this case of login/ signup as moving forward requires logic of getting get and post results from apis but I'm not entirely sure about it overall and I can't seem to find any good resource to help me with dealing with navigation better, example by @felangel is very simple (simple to understand, but too simple to relate in slightly complex situations, but they are good I looked them up again and after spending some time of my own this is what I naturally came up with and he suggested similar to begin with, wasted my time basically :( ), but I need to be more sure before I go all in with it, I think first one will result in loss of previous page state completely and you have to make event just for allowing user to go back where as using 2nd we get to preserve state and maybe in general better when no logic is required to change navigation pages.

I think in signup the last guy just used a single bloc for all signup pages and used a listener in SignUpControllerPage(), and then is using the same bloc to go from one page to another but it renders each page as a singer event to move to next page which is very limiting, now I'm in the process of trying to change that but I can't seem to figure out the best way to tackle this problem, I'm leaning towards using a higher level bloc for navigating between all sign up pages with BlocProvider, and then each page using a separate bloc for logic. _I think I answered my own question while asking xD_ but still input would be appreciated.

One issue with I have with 2) approach is that when I got from loginPage() to forgotPasswordPage() to resetting the password I have to switch back to AuthBlockBuilder page and now that is behind 3 routes and I have to pop 3 routes, is that kind of approach alright or should I look to do something else?

[mikededo]

The first one looks like a good alternative. However, if you have inputs in the LoginScreen, you will have to find a way (if you want, and I would recommend it - for user experience) to keep the state of them.
The user writes the email & password and it is declined. Goes to the recovery (or whatever) screen to get the password. When it gets back to the other page, they would still have the email in the input, without having to type it again.
As I say, this is just to improve user experience and avoid making the user repeat themselves!