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 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.
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 :
Build Flutter Web app
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
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).
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.
To prepare the release or debug build, the following command is used.
$ flutter build web
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.
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. 🙂