Build run first web application using flutter for web

Build Run First Web Application
Using Flutter For Web

Ever since Google released its first stable version in December
2018, Flutter has been the talk of the town. Since then, it is used
to build amazing functional applications that ensure seamless
performance. The intriguing characteristics and features of Flutter
have helped developers to experiment with building complex
applications using Flutter. During its initial days, Flutter app
developers just concentrated to build cross-platform mobile apps
for Android and iOS. However, web and desktop applications are
on the plate to be announced later.
Before flutter web development was implemented, the project is
recognized as HummingBird. And since the release of Flutter Web
preview on 7th May 2019, the flutter app development company
has been using it to build highly interactive, graphic-rich, and
engaging applications.

Being a Google’s brainchild, this open-source toolkit leverages
immense support in building a highly intuitive, responsive yet
incredible experience. Big labeled brands like Alibaba, eBay, and
The New York Times have already started reaping benefits of
this impactful framework.
With such an immense response, this article will help you to
understand Flutter architecture. It will also guide you with the
pre-requisites needed to build an app and how you can build
your first flutter app. So, let’s start with your first flutter app
development.

Flutter App Development Architecture
Flutter architecture for web applications is quite different as
compared to the mobile. It makes use of a variety of tools and
libraries to render browser support. The first layer of flutter web
app architecture consists of built-in tools, widgets, and themes.
Using flutter for web apps consists of an engine that generates
dart code and can be easily converted from HTML to CSS using
widgets. Further, the dart compiler displays the JavaScript code
on browsers. And this is how to flutter web app developer’s work
to build cross-platform web and mobile applications.

Few Key Takeaways of Flutter for Web apps
are:
1. The API for web and mobile app is the same; and only a few
features won’t be implemented in the web version.
2. The flutter for the web is slowly growing and the default
interactions are evolving. Hence, flutter for web app
applications provides a feel like a mobile app rather than a
web application.
3. Though Chrome is the only supported browser as of now,
other browsers like Safari, Edge, and Firefox are under a
plan to be implemented for use.
Now that you’ve got an idea about how flutter for web app works,
let’s start with how to build a basic flutter app in the web version.

Pre-Requisites To Build Flutter App:
To create a Flutter app with web support, you need the following
software:
● Flutter open-source Software development kit. If you want
to see the installation instructions, you can see here.
● Chrome browser to debug a web app.
● An IDE that supports the flutter web app. There are multiple
options available. You can install Visual Studio Code,
Android Studio, IntelliJ, IDEA, and install flutter and dart
plugins to enable language support and tools to run, debug,
reload and refactor the web app with an editor.

If you’re still confused and want to build your flutter app, you can
hire a flutter app developer from Concetto Labs. The company
holds 10+ years of experience in serving the industry with
award-winning complex yet interactive mobile and web
experience to 100+ clients across the globe.
Contact us now to discuss your flutter app idea

How to Build and Run the First Web App
Using Flutter?

Let’s create a new project with web support.
Setup
To setup flutter webview, run the below commands to use the
latest Flutter SDK from the beta channel along with enabling
web support:
The flutter channel beta
flutter upgrade
flutter config –enable-web

Once the web enables, the flutter device will command outputs a
chrome device that opens the chrome browser with your app
running and a web server will provide the URL that serves your
app.
flutter devices
2 connected device:
Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome
81.0.4044.129
After enabling the web support, you can restart your IDE. Now
you can see the chrome and web server in the device pulldown.

Create and run
Creating a new flutter project with web support is nothing
different than creating a new flutter project for other platforms.
Once you’ve configured your development environment for web
support, you can create and run a web app wither in IDE or from
the command-line interface.

IDE
Once you’ve configured your environment to support web apps,
make sure to restart the IDE if it’s already in the running mode.
All you need to do is just create a new app in your IDE and it will
automatically create an Android, iOS, and Web version of your
application. From the device pulldown, you need to select the
chrome web and run your app to see if it’s launched in the
chrome or not.

Command-line
To create a new app that also includes web support along with
mobile support. You need to run the below commands eliminating
“myapp” with your project name.
flutter create my-app
cd myapp
To serve your app from the localhost in the Chrome, enter the
following command from the top of your package:
flutter run -d chrome
This command will launch the app using a development compiler in
the chrome browser.

Build
Now use the below command to generate a release build
flutter build web
The release build will make use of dart2js instead of the
development compiler to product the main JavaScript file
main.dart.js. Now you can create a release build using release
mode or either by using flutter build web. This will accumulate a
build directory with built files and will include an assets directory
that needs to be served together.
Also Read: Flutter on Web Browsers Finally – A Walkthrough
From Mobile to Desktop!

Adding Web Support to an Existing Application
If you’ve already created a project and want to extend it by
adding web support, you can run the following command from the
terminal from the root project directory.
flutter create

We hope that you’ve successfully built your first demo web app
using flutter with the help of this guide. However, if you still find
any confusion or query, you can hire our flutter experts that will
guide you with a detailed step to launch your first flutter demo
app.
You can even hire flutter developers from Concetto labs to
complete the on-going project.
Let’s schedule call
Wrapping up:

Global Network
USA
4811 N Harding Ave,
Chicago IL 60625
P: +1 (903) 200-8801
CANADA
1445 Rennie St Oshawa,
Ontario, L1K 0N9,CANADA
P: (416) 272-0981
INDIA
609/610,City Center Science
City Road
Ahmedabad - 380060
P: +919586777575
UK
6 Hastings Avenue
Ilford , IG6 1DZ
P: +44 (798) 560 0352

Web & Mobile App Development Company
https://www.concettolabs.com

Build run first web application using flutter for web

More Related Content

What's hot (20)

Similar to Build run first web application using flutter for web (20)

More from Concetto Labs (20)

Recently uploaded (20)

Build run first web application using flutter for web