Flutter is a cross-platform, open-source SDK for developing user interfaces and apps. It is designed to allow developers to create consistent applications for a range of platforms, from web to mobile and desktop, with only a single codebase. And because of its ease of use, flexibility and stability, it is increasingly being used as the first choice for web apps alone.
Platform-agnostic SDKs are not a new idea. Various forms of middleware and code abstraction have long been sought to try and mitigate the complexities of multi-platform development. However, the benefits of a singular codebase have often been offset by poorer performance and functionality. With the release of Flutter, however, that logic was turned on its head. Since 2020, Flutter has seen a rapid rise in take-up for web development, and the trend looks set to continue.
In this article, we’ll explore Flutter’s power and versatility as a primary tool for web development, plus take a look at how it can be used to leverage multi-platform development too.
From mobile native apps to multi-platform development
Flutter was created by Google and first released to the coding community in 2018. Its original aim was to simplify the development of cross-platform mobile apps for Google’s own Android and Apple’s iOS.
The generic codebase concept is simple enough. Developers code apps using a single SDK, which is then seamlessly processed and packaged for each client platform. From a developer’s point of view, coding is simplified as OS or hardware-level dependencies are abstracted out and managed automatically by Flutter. And from the end user’s perspective, they simply encounter a unified app experience, whichever platform they choose.
The middleware concept has long been used by games companies, with graphics, sound and physics engines handling low-level implementations on different gaming platforms. And indeed the idea of ‘write once, run everywhere’ (WORE) has an even longer history: the phrase was coined by Sun Microsystems back in 1995 to publicise their Java programming language. For mobile, unified SDKs also have a longer history than Flutter. For example, Titanium SDK, first released in 2008 and PhoneGap (later rebranded as Apache Cordova) from 2009 were early contenders. However, while convenient, for many developers, these earlier platforms usually had significant drawbacks in terms of performance and functionality.
Flutter’s introduction in 2018 was a game-changer. Flutter apps allow developers to code in Dart, Google’s dedicated client development language. That means developers need no knowledge of Swift or Java, the native languages for iOS and Android development respectively (though Google has recently shifted focus to Kotlin for Android development). Where Flutter gets really exciting though is its support for web and even desktop development too. Coders can deploy single-sourced Flutter apps to mobile and web environments with responsive UIs, and share assets across them all. They can also easily integrate shared functionality across different platforms, using tools like Flutter’s Webview widget.
Since its initial release, Flutter has gained popularity for direct web development. Flutter web apps benefit from high performance and flexibility and cross-compatibility with mobile apps means that expansion is always a possibility.
How Flutter SDK for Web works
Flutter’s ease of set-up and quick learning curve make it ideal for showcasing MVPs (Minimal Viable Products). The excellent web performance of Flutter apps provides the right platform for market testing, customer feedback and investor interest in new projects.
For experienced web app developers, Flutter provides a fast and efficient framework, shortening development time, plus improving stability and web performance. Flutter web apps easily integrate with standard front-end tools: HTML, CSS and JavaScript. That means that web development teams transitioning to Flutter apps can retain their investment in other third-party frameworks like AngularJS and VueJS.
If you like IDEs, it’s also likely that your favourite will support Flutter app development. That way you can avoid learning costs for transitioning to new working environments. Visual Studio Code, Android Studio and IntelliJ IDEA all support web app development with Flutter and Dart plugins.
Build better Web Apps
To get started with Flutter, you’ll first need to install the Flutter SDK. For debugging and visualisation you’ll need the Chrome browser. If you like IDEs, you’ll find Flutter app plugins, but you’re also welcome to develop using a simple text editor if you prefer.
Creating a Flutter app requires only a single command. Enter the following in your terminal, substituting the name of your app:
<code>$ flutter create new_app</code>Code language: HTML, XML (xml)If you’re adding Flutter to an existing project, just run the same command but reference the project root, from within that directory:
<code>$ flutter create .</code>Code language: HTML, XML (xml)You can then enter your project directory and start your server:
<code>$ cd new_app
$ flutter run -d chrome</code>Code language: HTML, XML (xml)You may also do all this through your IDE if you prefer. You can then get started writing your first app. Here’s a useful Flutter step through to get started.
Benefits of choosing Flutter SDK for web development
Flutter web apps offer a range of benefits. They are fast to set up and deploy, as well as easy to code. Compared with some cross-platform SDKs, Flutter also offers excellent web performance. For example, platforms like React Native and Cordova basically function as mobile apps with a bridging layer for web delivery. This works, but performance is slower. Flutter is different because it generates native code for its host environments, meaning both better mobile and web performance.
Another performance benefit is given by Flutter’s hot reload functionality. Flutter uses the Skia rendering engine, which allows re-compiling on the go without any additional software or restarts. It makes it much faster to build, make updates and fix bugs without interruption.
Flutter also features an extensive range of widgets, useful for many outputs. In the Flutter widget catalog, you can find extensive resources for asset management, images and icons, plus animations for impressive UI effects. There are widgets to handle basic functionality too, plus accessibility and asynchronous patterns to improve your network interactivity.
Write once use it everywhere
For Flutter apps, the web browser is just another target device, like Android or iOS. That means it’s easy to get started without the overhead of learning extra technologies for each platform. Plus, if you’ve already developed a mobile app, Flutter is the ideal way to extend your user experience to web apps without extra coding. And Flutter makes it easy to use shared network resources across different platforms without needing to add environment-detection methods to your unitary codebase.
Flutter also offers a great deal of cross-compatibility between web and mobile devices. A great example is Flutter’s Webview widget. The Webview widget is provided as a plugin and brings embedded browser functionality to your Android and iOS apps. Webview is based on Apple’s WebKit, which is primarily used in their Safari browser. It can now offer much standard browser functionality, using the straightforward Webview API.
Recommendations for Flutter SKD
When exciting new technologies come up, it’s sometimes tempting to overestimate their scope of application. While Flutter is excellent for cross-platform web and mobile apps, it may not be suitable for everything. So it’s worth asking what are the best use-cases for Flutter.
Flutter SDK is ideal for single-page web applications, where functionality can be conceived on a similar model to desktop or mobile apps. However, it’s less suitable for multi-page documentation sites or websites with a lot of static content. Flutter’s web performance is impressive, but if your server is delivering a lot of static content, it’s likely the overheads are not worthwhile.
The most obvious advantage of Flutter is, of course, where you have existing iOS or Android apps but little web presence. Where previously you would have needed to draft in coders expert in web development frameworks, with Flutter you can simply add in a new deployment target and you’re away. That means there’s a strong business case for Flutter web apps.
Finally, the other recommendation for Flutter apps from a business and marketing point of view is its value for MVPs. Even if you end up not using Flutter SDK for your final app, it does offer fast and efficient prototyping for proof of concept and market testing. And if you do decide to proceed with Flutter, you’ll have all the benefits of a single codebase and multi-platform extensibility.
