Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use Flutter to develop simple Web applications", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Flutter to develop simple Web applications.

Configure Flutter for Web development

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

Open the terminal

Enter flutter upgrade

Enter flutter-version to check the version

Figure 1: upgrade Flutter to the latest version

You can also use Android Studio 3.0 or later for Flutter Web development, but in this tutorial, we use Visual Studio Code.

Create a new project using Flutter Web

Open Visual Studio Code and press Shift+Ctrl+P to start a new project. Enter flutter and select "New Web Project".

Figure 2: start a new Flatter project in VSC

Now, name the project. I named it open_source_for_you.

Figure 3: naming the project

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

Flutter packages pub global activate webdevflutter packages upgrade

Now, use the following command to run the Web site on localhost, the IP address is 127.0.0.1.

Flutter packages pub global run webdev serve

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

Figure 4: Flutter demo application running on port 8080

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

Encode and modify the presentation page

Let's create a simple application that prints "Welcome to OSFY" on a web page.

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

The location of the figure 5:main.dart file

We can now remove the debug tag from the properties of the MaterialApp, as shown below:

DebugShowCheckedModeBanner: false

Now, adding more to Dart is very similar to writing Flutter in Dart. To do this, we can declare a class called MyClass, which inherits from StatelessWidget.

We use the Center widget to center the element. 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 the changes.

Class MyClass extends StatelessWidget {@ override Widget build (BuildContext context) {return Scaffold (body: Center (child: Column (mainAxisAlignment: MainAxisAlignment.center, children: [Padding (padding: EdgeInsets.all), child: Text ('Welcome to OSFY', style: TextStyle (fontSize: 24.0, fontWeight: FontWeight.bold)) ),) }}

Output of figure 6:MyClass

Let's add a picture from the Internet. I have chosen a "Open Source for You" logo from a magazine website. We use Image.network.

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

The final output is shown in figure 7.

Figure 7: final output

At this point, I believe you have a deeper understanding of "how to use Flutter to develop simple Web applications". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.