[#]: author: (Jis Joe Mathew https://opensourceforu.com/author/jis-joe/)
Developing a Simple Web Application Using Flutter
======
[![][1]][2]
_This article guides readers on how to run and deploy their first Web application using Flutter._
Flutter has moved to a new stage, the Web, after having travelled a long way in Android and iOS development. Flutter 1.5 has been released by Google, along with support for Web application development.
**Configuring Flutter for the Web**
In order to use the Web package, enter the _flutter upgrade_ command to update to Flutter version 1.5.4.
* Open a terminal
* Type flutter upgrade
* Check the version by typing _flutter –version_
![Figure 1: Upgrading Flutter to the latest version][3]
![Figure 2: Starting a new Flutter Web project in VSC][4]
One can also use Android Studio 3.0 or later versions for Flutter Web development, but we will use Visual Studio Code for this tutorial.
**Creating a new project with Flutter Web**
Open Visual Studio Code and press _Shift+Ctrl+P_ to start a new project. Type flutter and select _New Web Project_.
Now, name the project. I have named it _open_source_for_you_.
Open the terminal window in VSC, and type in the following commands:
```
flutter packages pub global activate webdev
flutter packages upgrade
```
Now use the following command to run the website, on localhost, with the IP address 127.0.0.1
```
flutter packages pub global run webdev serve
```
Open any browser and type, _<http://127.0.0.1:8080/>_
There is a Web folder inside the project directory which contains an _index.html_ file. The _dart_ file is compiled into a JavaScript file and is included in the HTML file using the following code:
Let’s create a simple application, which will print ‘Welcome to OSFY’ on the Web page.
Let’s now open the Dart file, which is located in the _lib_ folder _main.dart_ (the default name) (see Figure 5).
We can now remove the debug tag using the property of _MaterialApp_, as follows:
```
debugShowCheckedModeBanner: false
```
![Figure 3: Naming the project][5]
![Figure 4: The Flutter demo application running on port 8080][6]
![Figure 5: Location of main.dart file][7]
Now, adding more into the Dart file is very similar to writing code in Flutter in Dart. For that, we can declare a class titled _MyClass_, which extends the _StatelessWidget_.
We use a _Center_ widget to position elements to the centre. We can also add a _Padding_ widget to add padding. Use the following code to obtain the output shown in Figure 5. Use the Refresh button to view the changes.
The author is assistant professor of computer science and engineering at Amal Jyoti College, Kanirapally, Kerala. He can be contacted at [jisjoemathew@gmail.com][12].
