5 Efficient Flutter Development Tools
1. Do you need better, more concise logging
When you're developing a Flutter app, unintelligible logs are a big problem because there's no quick way to filter your logs based on the severity of the problem. Throwing an exception or logging a simple debug message? They all look the same.
If your Flutter app needs a better logging system, the Logger package is definitely a good thing.
It is inspired by Java graded logs and allows you to add levels to your logs.
Log levels, currently:
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");
For some reason, another special
logger.wtf("WTF logs??")
DDnGHx.png
Not only that, but you can also shake your device to view the logs on the screen. (PS: need to import the logger_flutter package)
2. The API is not ready from the backend, or there is no API at all? The application hardcodes the data on its own?
If you're still struggling with coding, all hardcoding data yourself because the backend doesn't have their API ready or doesn't have any API at all, if you still want the UI to make sense, you can use the faker package - Jesper Hakansson generates a meaningful data.
Inspired by the Python package faker and the Ruby package ffaker, this package can provide various types of data, from fake people's names to fake dates, and even random fake URLs.
Just create a simple object like this -
var faker = new Faker();
Here is an example using faker object
faker.date.month();
faker.conference.name();
faker.company.position();
faker.lorem.sentences(8);
faker.internet.httpsUrl();
faker.currency.name();
faker.sport.name()
There are more kinds of data available under this package, which is a good replacement for hard-coded data yourself, which is difficult to replace when the project becomes more complex.
3. When the data structure returned by the API is complex, you need to quickly build a model?
Although I already shared this article on parsing complex JSON in 2018, it is still very popular today.
It's worth mentioning that this post is a good theoretical review of Dart parsing json, but I don't recommend manual parsing when building real complex projects.
Why not recommend?
. Manual operation will definitely take a long time.
.and you are more prone to making mistakes.
I'd prefer to use a converter tool or a parser, it only takes seconds compared to manual parsing.
When it comes to JSON serialization, you can find some recommended methods in the Flutter documentation.
Of course, one of the recommendations is a code generation library that will generate coding boilerplate for you. But this still requires some initial setup, which I don't like.
So, my tool of choice has always been quicktype.io. An online tool maintained by a group of open source developers.
Just go to the website and select Dart as the output language.
Paste the JSON on the left and the Dart model classes and JSON serialization logic will be created on the right shortly.
Add this class to your flutter project and you're good to go.
4. Preview your app from a running emulator/device
As an android developer it would take days just to create xml for different screen sizes because android devices come in different shapes and sizes and importantly you need to have your app on different devices Consistent performance. It's no different for iOS developers, and Apple's iPhones come in a variety of screen sizes. Sometimes, we also have to support tablet or iPad devices.
Does this mean that I need to download a lot of emulators or buy different phones for my team to test our app's UI on different devices?
Last year, at Flutter interactive 2019, Zoey Fan and Chris Sells talked about Flutter Octopus, where you can debug your app on multiple platforms and devices simultaneously.
This is useful for observing how your app performs on different devices. But do you really set up so many devices just to check the responsiveness of the UI?
i don't think so
To our rescue is Alois Daniel's Flutter Device Preview. Super useful tool that allows you to preview applications in devices of different sizes from a single running emulator/device.
Easily preview apps on different screen sizes and platforms, from regular phone sizes to tablets and even watch screen sizes. This is a good way to check your application for overflow. Not only that, but there are other cool features
★ Change the orientation of your app and preview your app's responsiveness in different orientations.
★Update configuration such as text scaling factor, applied theme, region
★ Capable of taking screenshots for you to share with your team.
All this without affecting the state of the application!
device_preview package address
5. Use the test version to learn, use the stable version to work
If you build your app in Flutter, there is a good chance that you will use a stable version of Flutter to develop and deploy your app. Who would risk developing a client project on an experimental flutter version, right?
However, you are an experimenting developer, you create projects outside of your client or company projects, and you are eager to try out new beta versions and try out new features.
But this means that uninstalling the current stable version and then installing the beta version takes a lot of time to download the new version of the resources.
And when you get back to working on a client project, you will have to uninstall the beta version and reinstall the stable version.
So, another tool to save you — Flutter Version Manager by Leo Farias.
You can use this tool to manage multiple flutter versions without having to download them every time you switch. This is just a one-time setup, you download all versions at once like this -
fvm install beta
or the specified version
fvm install
Switch between versions with just one command, like this
fvm use stable
You can specify a flutter version for each of your projects.
cd Documents/FlutterProjects/ExperimentalProject
fvm use beta
or
cd Documents/FlutterProjects/ClientProject
fvm use stable
The only thing that changes after you install fvm is that all your commands are slightly modified.
Like flutter doctor , becomes fvm flutter doctor
It's easy to remember.
When you're developing a Flutter app, unintelligible logs are a big problem because there's no quick way to filter your logs based on the severity of the problem. Throwing an exception or logging a simple debug message? They all look the same.
If your Flutter app needs a better logging system, the Logger package is definitely a good thing.
It is inspired by Java graded logs and allows you to add levels to your logs.
Log levels, currently:
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");
For some reason, another special
logger.wtf("WTF logs??")
DDnGHx.png
Not only that, but you can also shake your device to view the logs on the screen. (PS: need to import the logger_flutter package)
2. The API is not ready from the backend, or there is no API at all? The application hardcodes the data on its own?
If you're still struggling with coding, all hardcoding data yourself because the backend doesn't have their API ready or doesn't have any API at all, if you still want the UI to make sense, you can use the faker package - Jesper Hakansson generates a meaningful data.
Inspired by the Python package faker and the Ruby package ffaker, this package can provide various types of data, from fake people's names to fake dates, and even random fake URLs.
Just create a simple object like this -
var faker = new Faker();
Here is an example using faker object
faker.date.month();
faker.conference.name();
faker.company.position();
faker.lorem.sentences(8);
faker.internet.httpsUrl();
faker.currency.name();
faker.sport.name()
There are more kinds of data available under this package, which is a good replacement for hard-coded data yourself, which is difficult to replace when the project becomes more complex.
3. When the data structure returned by the API is complex, you need to quickly build a model?
Although I already shared this article on parsing complex JSON in 2018, it is still very popular today.
It's worth mentioning that this post is a good theoretical review of Dart parsing json, but I don't recommend manual parsing when building real complex projects.
Why not recommend?
. Manual operation will definitely take a long time.
.and you are more prone to making mistakes.
I'd prefer to use a converter tool or a parser, it only takes seconds compared to manual parsing.
When it comes to JSON serialization, you can find some recommended methods in the Flutter documentation.
Of course, one of the recommendations is a code generation library that will generate coding boilerplate for you. But this still requires some initial setup, which I don't like.
So, my tool of choice has always been quicktype.io. An online tool maintained by a group of open source developers.
Just go to the website and select Dart as the output language.
Paste the JSON on the left and the Dart model classes and JSON serialization logic will be created on the right shortly.
Add this class to your flutter project and you're good to go.
4. Preview your app from a running emulator/device
As an android developer it would take days just to create xml for different screen sizes because android devices come in different shapes and sizes and importantly you need to have your app on different devices Consistent performance. It's no different for iOS developers, and Apple's iPhones come in a variety of screen sizes. Sometimes, we also have to support tablet or iPad devices.
Does this mean that I need to download a lot of emulators or buy different phones for my team to test our app's UI on different devices?
Last year, at Flutter interactive 2019, Zoey Fan and Chris Sells talked about Flutter Octopus, where you can debug your app on multiple platforms and devices simultaneously.
This is useful for observing how your app performs on different devices. But do you really set up so many devices just to check the responsiveness of the UI?
i don't think so
To our rescue is Alois Daniel's Flutter Device Preview. Super useful tool that allows you to preview applications in devices of different sizes from a single running emulator/device.
Easily preview apps on different screen sizes and platforms, from regular phone sizes to tablets and even watch screen sizes. This is a good way to check your application for overflow. Not only that, but there are other cool features
★ Change the orientation of your app and preview your app's responsiveness in different orientations.
★Update configuration such as text scaling factor, applied theme, region
★ Capable of taking screenshots for you to share with your team.
All this without affecting the state of the application!
device_preview package address
5. Use the test version to learn, use the stable version to work
If you build your app in Flutter, there is a good chance that you will use a stable version of Flutter to develop and deploy your app. Who would risk developing a client project on an experimental flutter version, right?
However, you are an experimenting developer, you create projects outside of your client or company projects, and you are eager to try out new beta versions and try out new features.
But this means that uninstalling the current stable version and then installing the beta version takes a lot of time to download the new version of the resources.
And when you get back to working on a client project, you will have to uninstall the beta version and reinstall the stable version.
So, another tool to save you — Flutter Version Manager by Leo Farias.
You can use this tool to manage multiple flutter versions without having to download them every time you switch. This is just a one-time setup, you download all versions at once like this -
fvm install beta
or the specified version
fvm install
Switch between versions with just one command, like this
fvm use stable
You can specify a flutter version for each of your projects.
cd Documents/FlutterProjects/ExperimentalProject
fvm use beta
or
cd Documents/FlutterProjects/ClientProject
fvm use stable
The only thing that changes after you install fvm is that all your commands are slightly modified.
Like flutter doctor , becomes fvm flutter doctor
It's easy to remember.
Related Articles
-
A detailed explanation of Hadoop core architecture HDFS
Knowledge Base Team
-
What Does IOT Mean
Knowledge Base Team
-
6 Optional Technologies for Data Storage
Knowledge Base Team
-
What Is Blockchain Technology
Knowledge Base Team
Explore More Special Offers
-
Short Message Service(SMS) & Mail Service
50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00