5 Tools/Packages for Productive Flutter Development
Now that I’m also on YouTube, I thought of making a video on the same topic here so now you can choose the type of content you want to consume.
You like reading? Then continue just like you usually do.
You like watching video content instead? Find the YouTube video here.
1. Need better, clean & more distributed logs?
Unreadable logs is a big problem when you are developing Flutter apps because there is no quick way to filter your logs according to the severity of the problem. Throw exceptions or log a simple debug message? They all look the same.
This package Logger — by Simon Leier is definitely a gem, if you need better logging in your Flutter apps.
It definitely inspires from Java’s logging levels, and allows you to add levels to
your logs as well. The levels, currently are —
logger.v("Add more detailed debug messages, "
"can contain sensitive information, never enable it in production");
logger.d("Fine grained information to debug an application");
logger.i("Track the flow of the application");
logger.w("A potential but expected problem");
logger.e("A real failure that may impact the application state");
And for some reason, also a bonus of:
logger.wtf("WTF logs??")
Not only that, you can also shake your device to see the logs on screen.
2. API’s are not ready from backend yet or no API at all? App is loaded with hardcoded strings?
If you are also struggling with code that is filled with hardcoded values because your backend is not ready with their APIs or you just don’t have any API, but you still want your UI to make sense, you can use faker — by Jesper Håkansson to generate fake data for your apps.
Highly inspired by the Python package faker and the Ruby package ffaker, this package can provide various category of data from fake person names to fake dates to even random fake URLs.
Just create a simple object like this —
var faker = new Faker();and start using the faker object like the examples below —
faker.date.month();
faker.conference.name();
faker.company.position();
faker.lorem.sentences(8);
faker.internet.httpsUrl();
faker.currency.name();
faker.sport.name()^ And many more categories of data available under this package, so definitely a great alternative to hardcoded values throughout your project which is hard to replace when the project gets more complex.
3. When API Response is complex and you need quick model classes?
Even though I shared this article on parsing complex JSON back in 2018, which is still quite popular today.
One thing to note about it, it’s a great theory refresher about JSON and parsing in Dart, but I won’t suggest doing manual parsing when you are building actual complex projects.
Reasons?
- It definitely takes a long time to do it manually.
- And you are more prone to mistakes.
Obviously, I would always suggest, that go for converter tools or parsers that do it for you, and it will be done in fraction of seconds compared to manual parsing.
When it comes to JSON serialisation, there are some recommended ways that you will find in the Flutter documentation here.
One is ofcourse, code generation libraries, that will generate the encoding boilerplate for you. But this still requires some initial setup, which I was not a big fan of.
So instead, my go-to tool has always been quicktype.io online tool built by a bunch of open source developers here.
Simply go to the website, and choose Dart as your output language.
Paste your JSON dummy response on the left, and the Dart model classes and JSON serialisation logic will be quickly created on your right.
Add this class to your Flutter project, and you can immediately start consuming them.
4. Preview how responsive your app is, right from your one running emulator/device
As an Android developer, there are days spent on just creating XMLs for different screen sizes, because Android devices comes in different shapes and sizes, and it’s important that your app looks just as fine in the pool of Android devices. The story isn’t that different for iOS developers too, with the varying list of iPhone screen sizes from Apple. And sometimes, we have to support for the tablet or iPad devices as well.
So does that mean, I need to download a crazy variety of simulators or emulators or buy different phones for my team, so we can test our app’s UI on different devices?
Last year, in Flutter Interact 2019, Zoey Fan and Chris Sells talked about the Flutter Octopus where you could debug your app in multiple number of platforms and devices at the same time.
But that’s great mostly for observing performance of your apps in different devices. Would you really setup all that many devices just for checking the responsiveness of your UI?
I thought so too.
Comes to our rescue is Flutter Device Preview by Alois Daniel. A gem of a tool, that lets you preview your apps in different sized devices right from your single running emulator/device.
Easily preview your apps in different screen sizes and platforms, from normal phone size to tablet to even watch heads sizes. Even it’s a great way to check how your app looks with or without notches. Not only that, but there are other cool features like —
★ Change the orientation of your app and preview how responsive your app is in different orientations.
★ Updating configurations like text scale factor, theming of your app, locale
★ Ability to take screenshots for sharing it with your team.
And all this, without affecting the state of the application!
5. Experiment with Beta Flutter version while building projects in stable at the same time
If you are building production apps in Flutter, there is a high chance that you are using the stable Flutter version to develop and deploy your apps. Who would take the risk of developing a client project on an experimental Flutter version, right?
But again, you are an enthusiastic developer, you create projects outside of your client or company projects, and you would really want to try out the new beta version that came out, and experiment with the new features listed.
But that would mean, uninstalling current stable version, and installing the beta version, and spending a good amount of time trying to download resources for the new version again.
And when you are back working on your client project, you will have to uninstall that and reinstall stable again?
Neither could I.
So, another great tool to rescue you is fvm — Flutter Version Manager by Leo Farias.
You can use this tool to manage multiple flutter versions without having to download them everytime you switch. It’s just a one time setup where you download all the versions at once like this —
fvm install beta
or any version fvm install <version>
and just one command to switch between versions like this —
fvm use stable
You can use a different Flutter version for each of your project actually. And that is great when you are experimenting with some projects, but not experimenting with others.
cd Documents/FlutterProjects/ExperimentalProject fvm use beta
or
cd Documents/FlutterProjects/ClientProject fvm use stable
Only thing that changes once you install fvm is that all your commands slightly modifies.
Like instead of flutter doctor , it becomes fvm flutter doctor
Or flutter run becomes fvm flutter run .
But if you ask me, that’s a pretty easy thing to remember.
And that’s all for today!
Looking for the YouTube version of this article? It’s right HERE.
Get your copy of “How to stand out in Flutter developer interviews?” — guide and portfolio tips
Do you recommend any other packages that makes your project development in Flutter easier? Put them in the comments!
Feeling super generous? Buy me a cupcake. 😋
Hello World, I am Pooja Bhaumik. A creative developer and a logical designer. You can find me on Linkedin or stalk me on GitHub or maybe follow me on Twitter?
Have a nice fluttery day!
