As the name implies, developing the first Flutter project was a fluttering experience in some sense.

Flutter is a relatively new technology that allows for the development of high-quality applications that can run on Web, Android and iOS platforms using a single codebase.

My First Project (ZenX)

ZenX is a project tracking tool, an internal Zensark product.

Project tracking is the regular monitoring of project status to assess if the project is making progress in the right direction in order to achieve the agreed objectives and outcomes.

Fluttering moments that I experienced:

Setting-up the Development Environment

The first challenge that I faced was setting-up the development environment for Flutter. While the documentation provided by Flutter is excellent, there are still a few pre-requisites that need to be installed and configured before you can start developing apps. Installing and configuring Android Studio, the Flutter SDK, and the necessary plug-ins took some time.

Learning the Flutter Framework

Flutter uses a unique framework for building user interfaces called “Widgets.” While the concept of widgets is not new, the way Flutter handles them is different from other mobile development frameworks. Understanding how to use Flutter widgets and how to combine them to build complex UIs was one of the tricky aspects of the development process.

Developing a responsive website

I had to test the website on various devices and browsers, to identify and resolve compatibility issues that could impact the user experience.

Creating content that would be readable and visually appealing on different devices was another concern. Also, I had to ensure the layout, typography, and images, were optimized for all devices while maintaining a consistent look and feel.

Data Visualization

Customizing charts and graphs to match the website’s theme was time-consuming. I had to adjust the colors, fonts, and layout to ensure that the charts and graphs blend seamlessly with the website design while optimizing for different screen sizes without compromising data clarity.

Finding the right 3^rd party Libraries

The first step in using third-party libraries is to find the right ones for your app. There are thousands of libraries available in the Flutter ecosystem, and selecting the right ones can be a daunting task. I started by researching libraries that provided specific functionality, such as UI components, network connectivity, and state management. Then I read the documentation and reviews, and evaluated the library’s popularity, active development, and community support.

Also, there was no standardization in the Flutter ecosystem. Unlike other frameworks such as React Native, there is no centralized repository for Flutter libraries. This made it difficult to find high-quality and up-to-date libraries. To overcome this, I relied on recommendations from experienced Flutter developers and online communities such as Reddit, Stack Overflow, and GitHub.

Integrating Libraries into App

Once the libraries were selected, I needed to integrate them into our app. One of the concerns was conflicts between libraries that used the same dependencies leading to compile-time errors and making it difficult to build the app. To solve this, I had to carefully manage the versions of the dependencies used by each library and ensure that they were compatible.

Next step was configuring the libraries to work with our specific use case. Some libraries required additional configuration or customization to work as expected. This required carefully reading the documentation and experimenting with different configurations to figure the optimal set-up.

Ensuring compatibility

Compatibility testing is a critical step in using third-party libraries, as it ensures that the libraries work seamlessly with your app and other libraries.

I had to ensure that the libraries worked properly on different form factors and resolutions. Some libraries did not adapt well to different screen sizes, which resulted in UI elements being cut off or not displaying properly. To overcome this, I had to carefully test the app on different devices and make adjustments to the UI elements as needed.

Lessons Learned

Overall, the experience of using third-party libraries in a Flutter app was positive. I was able to extend the functionality of the app and save development time by using existing libraries.

I learned the importance of selecting high-quality and up-to-date libraries. The libraries that were not actively developed or maintained caused more problems than they solved.

I understood the importance of carefully managing dependencies and ensuring compatibility between libraries. This required me to stay up-to-date with the latest versions of each library and carefully test the app on different devices and platforms.

Using third-party libraries in a Flutter app can be a challenge, but it is also a powerful tool for extending the functionality of your app. By following best practices for selecting, integrating, and testing libraries, you can ensure that your app works seamlessly with the libraries.

Best features:

Hot Reload and Hot Restart

One of the most impressive features of Flutter is the ability to use Hot Reload and Hot Restart. Hot Reload allows you to see the changes you make to your code immediately, without the need to restart the app. This feature was incredibly helpful in speeding up the development process, especially when it came to making small UI tweaks.

Hot Restart, on the other hand, allows you to completely restart the app while retaining its state, making it easier to test different scenarios.

Conclusion

After my first project, I am confident that I can flutter like a butterfly to newer and exciting projects. This project has been crucial in identifying areas for improvement and refining my skills. Handling this project helped me develop a problem-solving mindset and how to break down complex problems into smaller, more manageable parts.