Overview
Hello Flutter People, in this blog we will learn about Flutter Web and that how to develop and deploy your first web app with flutter.
Flutter Introduction
Flutter is Google’s Open Source UI software development toolkit. Flutter can be used for developing applications for Android, IOS, Windows, MAC, Linux as well as Web platforms. The first version of flutter was known as “Sky”, which was developed for Android OS. The Flutter apps are developed using Dart language. Flutter became a favorite among developers in a short time because of the features like fast development, efficient performance, expressive and beautiful UI, native performance as well as many more. Initially, Flutter provided support for mobile apps only. Currently, Flutter is also available for Web applications.
Flutter Web Announcement
In this emerging world of tech, we can’t focus only on individual devices or platforms. We have to provide services and software to users on any platform they need it on. Perhaps for the same reason, Flutter announced Web Support. The Flutter team announced web support in Flutter in Google IO 2019. This announcement was great news for web developers as well as mobile developers. Currently, Flutter Web is still in beta version.
Flutter Web
As soon as we hear the word “Web”, we immediately think of HTML, CSS, JavaScript, etc. Flutter for the web is a code compatible implementation that is rendered using standard web technologies such as CSS, HTML, and JavaScript, while Flutter uses Dart for development.
Now, we will explore the mechanism used by Flutter Web at the time of code execution. You can Compile any Flutter Web application code written in Dart that can run in the browser and be deployed on any web-server. There is no need for a separate browser plugin to run the application. Flutter Web works in following architecture :
Starting from the top, the first layer is simple consisting of the framework in the dart language while the second generates a dart widget and converts it to HTML and CSS. After that in the third layer, the dat2js compiler will compile the code and generate a single JavaScript file. At last, this JavaScript file is loaded in our browser using other built-in files as well as assets directory.
Build Flutter Web app
Pre-requirements:
First of all we need the following ingredients to prepare a flutter web app:
- Flutter supporting platform for the development
- Chrome browser to run the application
Set up:
We need the latest version of the beta of Flutter SDK and we need to enable the web mode. Run the following commands:
$ flutter channel beta $ flutter upgrade $ flutter config --enable-web
We should use the above configuration steps only once. Then for re-checking the status of flutter configuration, we can fire the flutter config command.
Now we have to restart our IDE to reflect flutter web changes. Now you will get options in the available devices list of chrome (web) devices. Or We can also check it by the below-mentioned command which shows us the chrome(web).
$ flutter devices 2 connected devices: Chrome . chrome . web-javascript . Google Chrome 78.0.3904.108 WebServer . web-server . web-javascript . Flutter Tools
Create and Run:
To create a new flutter project for the web as well as mobile support, we have to fire the following command.
$ flutter create myapp $ cd myapp
It will create a new project which is located in myapp directory. For that, we have to change the directory by second command.
To run the project, we can use the following command along with the device name. If there is no device connected, then it will run default to the chrome(web) browser to serve your app from localhost.
$ flutter run -d chrome
Above command will launch our application to the chrome browser from the localhost.
Build:
To prepare the release or debug build, the following command is used.
$ flutter build web
We can also use flutter run –release to generate release build. At the time of the above command execution, build uses dart2js instead of development compiler to generate a single JavaScript file like main.dart.js. After the command execution, we can find build/web directory which contains main.dart.js file, built files as well as needed assets resources which will be served together in server.
Add web support for existing flutter project:
If we have developed our application for only mobile support, there is a way to add web support to the existing application by using the following command:
$ flutter create .
We can find a Web directory inside our project which suggests that web support is set properly. After that run the project to the chrome browser and serve from localhost.
Being in beta, Flutter for web already provides various functionalities such as responsive views, hover effects, hardware keypress events and more. Here is a glimpse of the app I have built using Flutter Web.
Conclusion
So Now, becoming a web developer is very easy because of the Flutter Web. You can easily convert your current mobile app to a web app as well as easily develop it via Flutter framework. Thanks for spending time with Flutter Web. Hope you have taken something valuable from it. 🙂
You may also like
Integrating AI in Your eCommerce App for Personalization
In the ever-evolving digital landscape with the changing preferences, of modern consumers there come...
Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in transforming the patient's journey.
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
