How to configure workflows for your Flutter projects?

When we develop mobile applications, we use many tools that help us improve our code and speed up the process. Each technology has a set of solutions that help us ensure that our work runs as efficiently as possible.

Flutter allows us to quickly produce a given product for both iOS and Android platforms. It’s Flutter that we choose when we care about time. However, it doesn’t mean that it involves poor code quality.

We have many great solutions available to help us create excellent quality code and, at the same time, make sure that the work and deployment go very smoothly.

And choosing the proper workflow is a critical decision that will allow us to configure and create the Flutter project better. If we work in a group, we should ensure that all settings are the same, and then our work will run perfectly.

Plugins you need for your Flutter IDE

If you’re developing mobile apps in Flutter using Visual Studio Code, here’s a list of plugins that will speed up your code work and eliminate bugs or help with documentation.

• Flutter – an essential plugin for mobile app development. We can’t imagine not using it 🙂 This set of tools adapts the IDE to work with Flutter.
• Pubspec Assist – the ability to very quickly add new dependencies to our Flutter project without leaving the IDE. All we have to do is type what plugin we are interested in, and it will automatically be added to our pubspec.yaml file.
• Mintlify Doc Writer – a code documentation tool that works with the Dart programming language. Just select a part of the code, e.g., a particular method and the artificial intelligence will create a comment above it telling us what the method does and listing the parameters it takes – magic! 🪄
• BloC – if you are using BloC, this plugin will make creating new blocs or cubits much more efficient. All we have to do is right-click in the appropriate place in our tree of files and directories and select the appropriate command, which will create a new bloc or cubit. Then all we need to do is provide a name.
• Bonus: Thunder Client – are you familiar with software like Postman? If you’ve ever worked with APIs, you probably have. Thunder is a lightweight and easy-to-use client for making queries to APIs built into Visual Studio Code.

Codemagic – a CI/CD that supports Flutter SDK well

Writing tests, checking them, and deploying them to Google Play and App Store takes time. What if you could automate it properly?

Imagine this scenario: you write code and tests and then upload the code to a remote repository. The tests are automatically executed at that point, and the Flutter project is built and uploaded to the store. At the very end, you just get a message if everything goes without a problem. Sound good? Then let’s get to know Codemagic better!

Among the significant advantages of this service is that the free version allows quite a lot, and we can wait to decide on the paid version. Another thing is that the applications are built on machines with the Apple M1 processor – that is, on the latest chips that more and more developers have in their laptops.

After creating an account, we just need to add our application and link it to a repository, e.g., on GitHub. Then we need to choose under what circumstances our Flutter build will be tested. Interestingly, we can set that failed tests will not interrupt the process. After a correct build, We can immediately send our application to Google servers as well as Apple adding it to the store. This requires proper configuration, which takes little time. We will receive an appropriate notification about the whole process at the very end.

Codemagic also allows you to write your scripts, so if you know a few commands in the terminal – you will manage!

Forms in the Flutter application

When creating a more advanced form in our Flutter app, we may run into several problems, such as validation or converting the entire state so that it is ready to be sent to, for example, our API. Some packages help simplify this process. Some allow extensive customization, while others enable us to instantly implement the solution without worrying about the UI.

One of my favourite packages is flutter_form_builder – a package that has ready-made elements necessary to create even a complex form and, at the same time, allows you to influence their appearance in an accessible way.

The basic configuration requires creating a variable of type GlobalKey, declaring the corresponding FormBuilder widget (which takes the key as a parameter), and assigning its children to the related widgets we are interested in. All children of a FormBuilder widget have a name attribute, which is the key, and their value is the value. Therefore, by executing the appropriate metdo on our GlobalKey, a JSON will be returned, which is ready to be sent to our API.

We can also influence the validation performed when the saveAndValidate() method is called. To add a condition, all we need to do is use the validator’s argument for a given field and pass in an array how that field should be validated, e.g., the area should not be empty and should be a number.

Streamline your Flutter workflow

The Flutter framework is an excellent tool for mobile applications. Many solutions are available to ensure our work runs efficiently. Forms can be simplified with packages such as flutter_form_builder, and a state management solution such as Provider or BloC can help manage data. If you’re looking for more app efficiency tips, check out this article by Tomasz on Clean Architecture in Flutter.