Dive into Flutter for Web

A Series on Building Web Apps with Flutter

As the world of web development embraces cross-platform solutions, Flutter has emerged as a compelling option. This framework, renowned for its mobile app development prowess, offers a unique approach to building web applications. However, like any technology, Flutter for the Web has its advantages and disadvantages. In this article, we’ll delve into both sides of the coin, providing you with a comprehensive understanding of what Flutter offers for web development.

Pros and cons
The most obvious advantage of Flutter for web development is the ability to write a single codebase that runs on both mobile platforms and the web offering time and effort. This, combined with the framework’s flexibility in building responsive UIs, has been my greatest benefit. It streamlined my workflow and reduced maintenance effort. Initially, I focused primarily on designing UIs for the web, which translated seamlessly to mobile platforms with minimal additional effort. This approach is particularly valuable in today’s world of diverse mobile screen sizes and capabilities.
However, Url paths in Flutter have a hash fragment “#” in the link which is weird looking, however, this is used by .. to … and can be easily removed by using setPathUrlStrategy(); on top of app call runApp(MyApp());, which is provided by url_strategy package.

*challenge of using flavors in Flutter Web Development
*
In mobile development, flavors (known as schemes in iOS and flavors in Android) have been game-changers in managing various environments (development, testing, staging, and production). They ensure a smooth user experience, reliable performance, and top-notch accessibility – all crucial aspects that fall under non-functional requirements, which can be challenging to test and define during the requirements-gathering stage.

However, implementing flavors directly in Flutter web development presents a unique hurdle. The Flutter team is still exploring how to best integrate flavors with the web platform. This lack of support can lead to:

Environmental Challenges like switching between end-points, keys, or configurations can be cumbersome when managing different environments. The dynamics of changing environments during development can be tricky to manage.

Here are some alternative approaches to consider for managing environments in Flutter web development:

Multiple index.html Files: This approach involves creating separate index.html files for each environment. While manageable for smaller projects, it can become unwieldy for larger applications.

Global Variable with String.fromEnvironment: This clever solution, championed by my senior developer, utilizes the String.fromEnvironment function to read an environment variable set during build time (e.g., flutter run –dart-define=flavor=flavorName). While effective, it adds extra build steps with a whole base code to process this process.

Server-Side Environment Variables: Store sensitive information like API keys securely on the server-side using environment variables. These variables can be injected into the app during deployment based on the chosen environment.

Conditional Logic: Implement conditional statements within your code to adapt the app’s behavior based on a pre-defined environment variable. This allows for dynamic behavior based on the environment.

The best approach ultimately depends on the complexity and specific requirements of your project. Choose the solution that helps you build a robust and functional Flutter web application.