Flutter for Web
Naveen Jujaray
Posted on August 10, 2020
What is Flutter Web?
A connected P
rogressive W
eb A
pplication built with Flutter
Web
support for Flutter
enables existing mobile-based applications to be packaged as a PWA
for reach to a broader variety of devices, or to provide a companion web
experience to an existing app.
In addition to mobile apps, Flutter supports the generation of web content rendered using standards-based web technologies: HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.
Flutter Solves The Backend & Frontend Problem
Flutter’s reactive
framework brushes aside the need to get references to the widgets. On the other hand, it facilitates a single language to structure backend. That’s why Flutter is the best
app development framework
in the 21st century
to be used by Android developers
.
How to activate Flutter Web ?
if you want to install flutter check this
article.
Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:
$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web
Once web is enabled, the flutter devices
command outputs a Chrome
device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.
flutter devices
2 connected device:
Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129
Create and run
To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp
with the name of your project:
$ flutter create myapp
$ cd myapp
To serve your app from localhost
in Chrome, enter the following from the top of the package:
$ flutter run -d chrome
A release build uses dart2js
(instead of the development compiler
) to produce a single JavaScript file main.dart.js
. You can create a release build using release mode (flutter run --release
) or by using flutter build web
. This populates a build/web
directory with built files, including an assets directory, which need to be served together.
Add web support to an existing app
To add web support to an existing project, run the following command in a terminal from the root project directory:
$ flutter create .
Hosting
Check out this page to know more about hosting Flutter Web.
Posted on August 10, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024