Drive to a Great Way with Flutter
Who wants to create greatness application with both code practices and unit tests? It’s time to come, let’s show how to build a better app with test-driven development principles together. Of course, we need a superpower as we’ll develop a great way.
That’s time has come, so let’s show what we do in this article. I want to show how to build these features with clean code practices.
Mmission: Our customers want to build login features. These features must be had these requirements:
- User email should comply with standard email regex.
- Password should longer be six characters.
- Service returns the correct response, then goes to cache this.
- If the user has already login to the application entered, the user could show a home view.
- The user just login 5 minutes from the self token, if the user session will expire due to time, the user has to return to the login screen and also should clean cached information.
Ttechnical detail: We should use reqres.io for these features. We can use hive, shared, secure storage, etc. Users can start splash screen then if you have token or user information, should navigate home screen for the show this information, otherwise user should go to login screen for giving information to own self.
User interface: Our customer just wants a basic login screen but if the keyboard is opened, the customer want to show the field top as a mini logo. The home screen has to contain user profile, full name, and logout button and finally, a splash screen created from Lottie animations for a better feels to app start
We might be understood what to do for these features. Let’s visualize our business.
That’s pretty enough for our business. Let’s start to coding with business knowledge thus we can understand testable code, clean design etc.
Many developers have been mistakes before the writing code, so you should be better to understand your features with requirements.
Design to Screens
We have three pages login, splash, and welcome page. I was finding design in the uplabs for this project, so I’ll try to draw this screen in my project.
Firstly, I always start folder structure when I got a new project. That’s my basic structure for a sample etc. project.
Then We’ll see how to develop a UI screen. I’ve used kartal package owned by me for can develop better coding (like a padding practice, dynamic height, etc.).
This page has a very important point, for example: Yep This is quite easily understandable that’s a demo project, but I don't prefer to directly write static string-like signing buttons so I was creating a custom keys class for use instead of a static string file.
- Text(“Sigin”) X
Text(_LoginKeys.signin.rawValue) ok
And then you should make a constant class like this. It has an advantage over the directly static declaration.
I made (file)private usage on purpose for can not access other files. It just related of part class.
Another point, I need special text styles, but I’ve not written again static style etc. I’ve looked at the material type system page as I tried to find the right styles, then I implemented the right styles from themes.
- ❌ TextStyle(fontSize:35)
✅ Theme.of(context).textStyle.headline1
Splash Page
This page main point of many projects so many projects checking the app status, force updates or user credentials in this here, so we require some animations while the user keeps this page. I’m using Lottie for every project, it can increment user feel on the splash page.
Then I told about using more effective enumeration, so I used this usage on this page.
Our design is a bit ready. Let’s implement business code, testing, and service request on these pages.
Business Implementation
We need to implement our rules so firstly going to create a login request model after trying to implement validation for email and password and finally going to create caching test.
Step one: Write user service with interface
Step two: Keep user data using hive solutions.
Step three: Does it has any credential from the logged user?
Step four: Fetch user data after-show write the log
Step last: Keep drinking coffee and relaxing ☕️
Don’t forget, send to commit before the test!
Step One (Services)
I need to implement reqres io services about login. Generally, every service has been created for two types. So first one is the request model then we need to respond model for reading returned data. After using this knowledge, I’m going to implement a login request model and login response or user token model.
I’m using the vexana library for network requests. This package was owned by me using dio infrastructure.
Normally I’ve been preferred json_serializable package but I’m using json_to_dart website like a basic project.
Sometimes, I have seen unnecessary code from model layers, for example this class just needs to toJson options and I can’t implement JSON parser code. If you use JSON serializable package, you might be looking JSON annotation (create factory etc.)
Our model is ready, now we need to service the layer. So I’m creating the ILoginService interface that includes service functions, API path, and network instance.
This interface has a pretty coding point. The first one I never use directly network instance in my service classes. I’ve added an interface that just uses has access to functions. That is another point; If I have more parameters, I have to create a model. Finally, I added a network path in this interface instead of static usage.(Probably you can make a enumeration with extension for this usage)
And let’s write to test code for login service.
Step Two (Caching)
And We’re here to cache time. Right now We’ve fetched data from the service, then these steps need to keep data from locally. We have many options for data to keep on the phone. (shared, secure, sqlflite) I’m using hive solutions recently project. When asking for me, Why I choose ‘hive’ instead of the other?
- Hive is pretty fast, safety and written in pure dart language.(We can use it everywhere ios, mac, web, android, etc.)
- It’s a safety solution while starting the first time(You can change security layers if you want)
- It gives a generic model, keep with hive_gen.
I’m not a hive fan :) , I feel the power of my production project after my love started this time. More detail https://pub.dev/packages/hive
Let’s make a model with hive code gen. It needs the hive type annotation for every class(This value should be unique, so I prefer to make a constant class).
You can be careful to add new members to this class because it requires a unique number. You must increment the HiveField value for a new instance. Furthermore, you might be seen login_response_model.g.dart file on the project if everything going to be good. We need to adaptor initialize to generic use.
Hive.registerAdapter(UserResponseModelAdapter());
So this code must be called before using hive cache. (You can call splash features or before run-app) I’m creating app initialize code when app without starting.
Yep, We’re ready to use the model. Let’s implement a manager for controlling whole hive models. That’s interface provides to basically our models.
Yeep, That’s done. Let’s try caching layer in our test case.
If you tried to use non-flutter apps, need to custom specific init code after we’re getting to be able hive powers.
And Oscar goes to hive code :). Everything is working right now.
Step three:(Credential Check)
We’ve implemented the main features. This time needs to check what we have after navigating to a related view. If an app has a credential from locally, the app goes to home view otherwise it’ll navigate login view.
That’s basic business but I was creating the ILoginViewModel layer for testable code. (I can’t prefer to directly call hive or another package in the function, always call it parameter from the package)
Another mission has been done! Let’s go the other.
Step four: (Login)
This time we need to log in with a test account. Generally, I’m using a new widget for every validation operation so this time I created a custom email field end password field in this view because we just have a single screen.
Another point, We need to login view design for users. It views basically need to implement validation after the form error and the login button just doesn't work while sending a request to the server.(You can see detail about view to the upper page.)
This code will be made the request after if it is successful, I’ll keep credential in phone locally with the hive. And finally, go to the welcome page when return token by the server.
And We’re ready for basic but much more technical. Time to coffee for every reader. Let’s take it when finished this article ☕️
And finally, that’s done for all. Probably I can add bloc principles or localization or etc. But I want to show basically things for a new project.
You can read the full project to below repository.
Have a good read, Each clean code be with you!
See u next articles 🍀
