5 Tools/Packages For Better Flutter Development
Flutter is a great environment for developing mobile apps, but there are ways to make it even easier. In this regard, I have some package recommendations that can help you to speed up, simplify, and strengthen your project.
1.Need to parse JSON and create model classes quickly?(json_serializable)
When I first started working with APIs in Flutter, JSON parsing was a major challenge for me, and I’m sure many beginners find it confusing as well. While the internal dart:convert library can be used for simple parsing techniques, it is only recommended if you are just getting started with Flutter or if you are working on a small project. However, it’s important to understand the fundamentals of JSON parsing in Flutter. If you are proficient with it or working on a larger project, consider using code generator libraries such as json_serializable.
To determine the structure of the JSON, check whether the JSON string contains a List of Maps or a Map (key-value pairs). If it starts with curly braces, it’s a Map. If it starts with a square bracket, it’s a List of Maps.
{
"id":"2023",
"name":"Flutter",
"color" : "Blue"
}class LittleBird{
String id;
String name;
String color;
Student({
this.id,
this.name,
this.color
});}factory LittleBird.fromJson(Map<String, dynamic> parsedJson){
return LittleBird(
id: parsedJson['id'],
name: parsedJson['name'],
color: parsedJson ['color']
);
}To simply deserialize your json, we are developing a factory function here called LittleBird.fromJson.
I am a bit of a newbie; could you explain what deserialization is?
Sure. Let’s start by discussing serialization and deserialization. Deserialization is the opposite of serialization and simply refers to writing data (which may be in an object) as a string. It reconstructs the object model using the raw data. The deserialization component will receive the most of our attention in this essay. We are deserializing the student’s json string in this initial section. json
You can find online converters. The easiest and most successful of JSON to Dartwas developed by Javier Lecuona.
2.Need more distributed, better-quality logs?(Logger)
Debugging and logging can be a significant challenge when developing Flutter apps, especially when it comes to filtering your logs based on the severity of the issue. It can be difficult to differentiate between a simple debug message and a critical exception log, as they may look similar in appearance.
To address this issue and improve logging in your Flutter apps, I recommend using the Logger package by Simon Leier. This package draws inspiration from Java’s logging levels and allows you to add custom levels to your logs, making it easier to filter and analyze them. With Logger, you can ensure that your logs are clear and easily understandable, helping you to identify and resolve issues more efficiently.
logger.v("Verbose log");
logger.d("Debug log");
logger.i("Info log");
logger.w("Warning log");
logger.e("Error log");
logger.wtf("What a terrible failure log");
3.Need mock data?(Faker)
There are currently no or very few APIs available from the backend. Hardcoded strings are put into the app?
Use faker by Jesper Hkansson to generate fake data for your apps if you are also battling with code that is full with hardcoded values since your backend is not ready with their APIs or you simply don’t have any API but still want your UI to make sense.
If your app is facing the issue of having hardcoded strings due to the lack of APIs available from the backend, I suggest using the Faker package by Jesper Hkansson to generate fake data for your application. This is especially useful when your backend is not yet ready with their APIs, or if you don’t have any API but still want your UI to make sense.
Faker is a powerful tool that draws inspiration from the Python and Ruby packages, faker and ffaker. It can generate a wide range of fake data, including fake dates, human names, and even random URLs. By using Faker, you can easily replace hardcoded values in your code with realistic fake data, making it easier to develop and test your app without the need for a backend API.
Just make an item this simple.
var faker = new Faker();and begin employing the faker object as in the following instances.
faker.date.month();
faker.conference.name();
faker.company.position();
faker.lorem.sentences(8);
faker.internet.httpsUrl();
faker.currency.name();
faker.sport.name()Additionally, there are many more categories of data included in this package, making it an excellent replacement for hardcoded numbers that become difficult to replace as a project grows in complexity.
4.Need to test for mobile responsiveness?(device_preview)
Designing a mobile app that looks great on all Android devices can be a daunting task for Android developers due to the wide variety of sizes and shapes that Android devices come in. The same goes for iOS developers dealing with Apple’s diverse range of iPhone screen sizes, as well as the need to support iPad and tablet devices. To simplify this process and ensure that your app looks great on all devices, I recommend using Flutter’s built-in layout widgets such as Row, Column, and Expanded. These widgets provide a flexible and responsive layout system that adapts to different screen sizes and orientations.
Another great tool for creating responsive UIs in Flutter is the MediaQuery widget, which allows you to query the device for its size and orientation, and adjust the layout accordingly. Additionally, the AspectRatio widget can be used to maintain the aspect ratio of widgets, such as images, regardless of the device screen size. By utilizing these built-in widgets and tools in Flutter, you can design a responsive UI that looks great on all Android and iOS devices, without having to create separate XMLs for each screen size and shape.
Flutter Device Preview by Alois Daniel is a useful tool that allows you to preview your app’s user interface on different devices without having to download a large number of simulators or emulators, or purchase multiple phones. With this tool, you can directly preview your app on different-sized devices from the emulator or device that is currently running your app. This will save you and your team a lot of time and effort in testing your app’s user interface on different devices.
5.Need to create different builds of your app Flavor)
It is used to create different environments for your application, such as production and development. Production is used for the version of our application that we will release to Google Play or the App Store as a product. Development refers to the environment in which we will make constant changes and improvements. From now on, I will refer to these two environments as PROD and DEV. Through flavors, you can easily make the DEV and PROD versions of your application run simultaneously on the same device.
In short, we can say that to separate our application into different environments and to use different databases easily.
Setup flavors
You can provide various start main methods, each of which has a configurable flavor.
So, for example, you can create a main_dev.dart file for your development environment:
void main() {
Flavor.create(
Environment.dev,
color: Colors.green,
name: 'PREVIEW',
properties: {
Keys.apiUrl: 'https://dev.project.com/api',
logLevelKey: 100,
},
);
setupApp();
}And a main_beta.dart file for your production environment:
void main() {
Flavor.create(
Environment.beta,
color: Colors.yellow,
name: 'BETA',
properties: {
Keys.apiUrl: 'https://beta.project.com/api',
logLevelKey: 5,
},
);
setupApp();
}Each of these files will point to another main.dart file:
void setupApp() {
final logLevel = Flavor.I.getInt(logLevelKey);
print('LogLevel set for this flavor: $logLevel');
runApp(FlavorApp());
}
launch.json
In Visual Code you can define following to use the different flavors:
{
"version": "0.2.0",
"configurations": [
{
"name": "DEV",
"request": "launch",
"type": "dart",
"program": "example/lib/main_dev.dart",
// "args": [
// "--flavor",
// "dev"
// ]
},
{
"name": "BETA",
"request": "launch",
"type": "dart",
"program": "example/lib/main_beta.dart",
// "args": [
// "--flavor",
// "beta"
// ]
}
]
}Now, we can run your application in parallel on the same device as Dev and Prod.
To run your application in the development environment, you can use the following code:
flutter run — flavor dev
And to run it in the production environment, use the following code:
flutter run — flavor prod
