Introduction to Flutter and Flutter on the web

Imagine being able to write code in one language/framework and deploy it on six different platforms, with some of those platforms having completely different setups in terms of both UI and UX. This has been made possible by Flutter in a way that allows developers to respect the norms of each platform, enriching developers with the tools and techniques to develop on each of these platforms with a native feel. A cross-platform development framework has been needed by developers for a long time now, because of the high costs and length of development time for native code on each platform. Many frameworks have tried, but none of them have succeeded in the way that Flutter has. Flutter has worked openly in the community in close connection with developers to resolve their issues and problems. Focusing both on the developer experience as well as the native feel and performance of applications, Flutter has become a great tool for cross-platform application development.

Figure 1.1 – Flutter, a cross-platform UI framework

Imagine developing a mobile application for Android and iOS, and imagine writing the same code without any changes (or with just a few tweaks) and running on the web while maintaining the same amount of functionality, or more. Imagine that same code deploying native desktop apps for Mac, Windows, and Linux. Yes, that’s now possible with Flutter.

From Flutter version 2.0, Flutter web support has become stable. This means we are now able to build Android, iOS, and web apps from a single code base. Flutter’s web support delivers the same experiences on the web as on mobile. Using the same sets of widgets that you use to build a UI for mobile applications, you can now build and deploy web applications. This enables developers to build feature-rich, interactive, and graphics-intense web applications with Flutter.

However, you have to understand that as Flutter is an app-centric UI framework, it is different from traditional web development. We are not writing HTML, CSS, and JavaScript (JS). Instead, we’re developing web apps using the same widgets that we use to develop mobile applications with Flutter. Later on in this chapter, we will see how Flutter is different from traditional web development with HTML, CSS, and JS, and how to take advantage of those differences.

Flutter is a lucrative framework to learn. With its plugins and developer tooling ecosystem, the Flutter framework has become one of the best tools for cross-platform application development in recent years.