Web Application Using Flutter For Web | Concaetto Labs

Build Run First Web Application Using Flutter For Web

Author image By Shreya Bhankhar  |  Tuesday, August 25, 2020 04:05 PM  |  4 min read

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?

How to Build and Run 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

Wrapping up:

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 ongoing project.

Let’s schedule call

 

Build Run First Web Application Using Flutter For Web

That’s exactly what we do

Contact Us

 

 


Author image

Shreya Bhankhar

Shreya Bhankhar is a Flutter Tech Lead. It's been 5 years since I have working with Mobile Application Development. I love my job and work I do in Flutter Android and Kotlin, I always look for simplest solution for complex issues to ensure easy ness for all.

Why Our Client Love Us?

  • Fast kick-off
  • Agile Ready
  • 98% Client Retention
  • 360-Degree solutions

Our integrity and process focuses largely on providing every customer the best recommendations for their respective business. Our clients become recurring customers because we always go beyond their expectations to deliver the best solutions.

Get In Touch
Mr. Sieva Savko
Customer for over 4 years Mr. Sieva Savko Norway

Concetto Labs have provided us with a tremendous amount of help. Their competence in various IT fields led to a positive outcome while facing different challenges. A lot of value was given by their helpful professional staff. To describe this company in three words: effectiveness, collaboration, trust. I would also like to personally thank Mr. Tejas Patel for his positive, friendly, and highly competent approach. The all-around support provided by him made every task at hand a no-brainer.

Miss. Caroline Jack
Customer for over 4 years Miss. Caroline Jack South Africa

It has been an absolute pleasure working with the Concetto Labs team! We have worked together on a few projects now, all of which have been successful. You can rely on good communication and response times from these guys. And they go above and beyond to ensure that the result is achieved. Because of their great service, they have become an integral part of our business and we will continue to use them going forward.

Mr. Richard Bartlett
Customer for over 3 years Mr. Richard Bartlett United States

Concetto Labs is a group of incredibly talented individuals. They are very responsive and communicate with you each and every step of the process. I worked with Manish Patel throughout the entire process and must say that I have never conducted business with a more honest and professional individual. Together with his team, Manish created www.travcentiverewards.com exactly how we envisioned it to be. Thanks for all of your hard work.

Mr. Conrad Abraham
Customer for over 2 years Mr. Conrad Abraham United States

Concetto Labs team is my go-to for any simple or complex development projects. They have risen to the challenge. Great project management, communication, and super quick turnaround. I’ve done multiple projects with them and don’t plan on changing that.

Mr. Edward Chin
Customer for over 4 years Mr. Edward Chin Canada

Concetto Labs was able to bring my complex idea to life. Throughout the project, Concetto Labs maintained constant communications and was always professional - considering I had no experience in what I wanted to create their welcoming attitude, patience, and knowledge in the field created the perfect environment to work in. I was so impressed with their work that I've kept them on board as my go-to experts. Thanks for the worthwhile experience and the breathtaking product.

Karuna Govind
Karuna Govind CTO & Co Founder (Coupay) London, UK

We started working with Concettolabs due to the influx of work on mobile (Flutter) and frontend (React.js). It's been fantastic working with them. Good, consistent communication and good quality of work means they may be our first choice for many projects to come.

GlobalClients
Good Firms Clutch App Futura Microsoft Associate Mobile App Top Developers Gesia
 

Ahmedabad

303-309, City Center, Science City Road,
Ahmedabad - 380060
 

Broomfield

2355 Prospect LN,
Broomfield CO-80023

Florida

250 N banana River dr,
Merrit Island,Fl 32952
 

Oshawa

1557 Clearbrook Dr,
Oshawa, ON L1K 2P6
 

Ilford

6 Hastings Avenue,
Ilford, IG6 1DZ, UK
 

Bodo

Lille Hunstad 4A,
8019 Bodø