This article guides you on how to run and deploy your first Web application using Flutter.

Flutter has come a long way in Android and iOS development and is now entering a new phase of Web development. Google has released Flutter 1.5, which also supports Web application development.

Configure Flutter for Web development

To use the Web package, enter the command flutter upgrade to update FLUTTER 1.5.4.

  • Open a terminal
  • The inputflutter upgrade
  • The inputFlutter versionCheck the version

It is also possible to use Android Studio 3.0 or later for Flutter Web development, but in this tutorial we will use Visual Studio Code.

Create a new project using Flutter Web

Open Visual Studio Code, then press Shift+Ctrl+P to start a new project. Enter FLUTTER and select “New Web Project”.

Now, name the project. I’ll call it open_source_for_you.

Open a terminal window in the VSC and enter the following command:

flutter packages pub global activate webdev
flutter packages upgrade
Copy the code

Now run the site on localhost with the following command at IP address 127.0.0.1.

flutter packages pub global run webdev serve
Copy the code

Open any browser and type http://127.0.0.1:8080/.

There is a Web folder in the project directory that contains index.html. The DART file is compiled into a JavaScript file and included in an HTML file using the following code:

<script defer src="main.dart.js" type="application/javascript"></script>
Copy the code

Code and modify the demo page

Let’s create a simple application that prints “Welcome to OSFY” on a web page.

Now open the Dart file, which is in the lib folder main.dart (the default name) (see Figure 5).

Now we can remove the debug tag in the MaterialApp properties as follows:

debugShowCheckedModeBanner: false
Copy the code

Now, adding more to Dart is similar to writing Flutter with Dart. To do this, we can declare a class named MyClass that inherits the StatelessWidget.

We use the Center widget to locate elements to the Center. We can also add Padding widgets to add Padding. Use the following code to get the output shown in Figure 5. Use the refresh button to view changes.

class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(20.0),
              child: Text(
                'Welcome to OSFY', style: TextStyle(fontSize: 24.0, fontWeight: fontweight.bold),),],),); }}Copy the code

Let’s add an image from the Internet, I’ve selected an “Open Source for You” logo from a magazine website. We use Image.net Work.

Image.network(
  'https://opensourceforu.com/wp-content/uploads/2014/03/OSFY-Logo.jpg',
  height: 100,
  width: 150
),
Copy the code

The final output is shown in Figure 7.

Via: opensourceforu.com/2019/11/dev…

Jis Joe Mathew By Jis Joe Mathew by Jis Joe Mathew

This article is originally compiled by LCTT and released in Linux China