HMS Account Kit for Flutter with BLoC
Hello everyone!
In this article, I am going to create an app using Flutter BLoC and HMS Account Kit together. If you are interested, keep reading!
What is BLoC?
BLoC stands for Business Logic Components. Taking advantage of Flutter’s UI reactive model, it can be thought as a simpler and reusable way of managing the states in Flutter applications.
BLoC is a well-known and established library when it comes to state management in Flutter. It promotes good practises such as immutability and it has one of the best ecosystems of supporting packages and documentation built around it.
Why you should use BLoC?
- UI and logic are seperated, and this makes it easier to make changes in the UI without changing logic. It keeps the user interface simple and straightforward.
- You get a better performance from your app.
- It’s easy to test.
- Reusable code.
What is HMS Account?
HMS Account Flutter Plugin provides you with simple, secure, and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with HuaweiIdAuthButton to quickly and securely sign in to your app with their HUAWEI IDs. Currently, more than 1 billion users are using HUAWEI IDs.
To use HMS Account Kit APIs in your project, you need to configure app information in AppGallery Connect. For more information, please click.
Also you can find all the information about integrating HMS Account Flutter Plugin here.
Flutter App
If you are done with configuration, let’s start with creating a new Flutter project.
This is the pubspec.yaml file contains the dependencies we’ll use for this app.
Repository Class
For using HMS Account Kit’s APIs in our project, we’ll create an AccountRepository class which helps us with the authentication.
At first, we should add HMS Account Kit’s signIn and signOut methods to handle authentication.
The kit also has the silentSignIn method which I didn’t use for this app but surely you can add to your own repository class and use.
Next, we need to implement a isAuthenticated method to check whether the user has signed in or signed out.
Up next, we’ll implement thegetAccount method to get the user’s information.
Now we are done with the repository class. Let’s start building our AccountBloc to handle the states of the app in response to the events.
BLoC Structure
I suggest you to install the Bloc plugin for bloc support and helping you to create blocs. It’s both available in VS Code and Android Studio marketplace.
After installing the plugin, you have to restart your IDE to use it.
Next, create a package named “bloc” in your lib folder. Right click it and you will see the features of the Bloc tool you have just installed.
Click New > Bloc Class.
A small window will appear and here, the bloc tool wants a name for the bloc class and asks whether you want to use Equatable.
It is recommended to use Equatable package, it compares objects by overriding == and hashCode for you so you don't have to waste your time writing lots of boilerplate code. For more information about the Equatable package, please refer here.
Once you click OK, three new dart files will be added into the bloc folder.
AccountState Class
In this class, you have to determine what kind of states your app might have and create state classes. I have determined 3 states for this app: Unknown, authenticated and unauthenticated.
This is the final look of the account_state.dart file.
AccountEvent Class
In this class, we will create an event which we will pass as default when the app has just started. Also we will need events for signing in and signing out.
This is the final look of the account_event.dart file.
AccountBloc Class
Since we have got the AccountState and AccountEvent classes, finally we can implement the AccountBloc class to convert our states into our events.
Do not forget that AccountBloc class should have a dependency on AccountRepository class to call the methods come with the HMS Account Kit.
All we have to do, for each event, seperate their “eventToState”s into different Stream methods.
We are using
yield*(yield-each) inmapEventToStateto separate the event handlers into their own functions.yield*inserts all the elements of the subsequence into the sequence currently being constructed, as if we had an individual yield for each element.
Now we have successfully implemented the bloc for our app.
Next, let’s go to the main.dart file to create a simple UI for testing the bloc and HMS Account Kit’s features.
Create an instance of AccountRepository and then inject it into our AccountBloc with UnknownState() in initState. Also add the LaunchEvent()for the first time the app launches.
In home.dart page; we will use the HuaweiIdAuthButton widget which HMS Account Kit provides us for login with Huawei ID, and a RaisedButton to sign out if the user has already signed in.
Looks we’re done with this demo app! These are the screenshots of the project.
You can find the source code in my GitHub page.
Conclusion
This app was developed to inform you about usage of the HMS Account Kit with BLoC. You can download this demo app and add more features according to your own requirements.
Thank you for reading this article. I hope you enjoyed it!
