如何构建一个Flutter网络应用程序

Flutter是一个新兴框架，用于制作精美的跨平台移动应用程序。它允许开发者用一个代码库同时针对iOS和Android平台。这一特点有助于节省大量的时间和资源。

随着Flutter 2 的发布，其受欢迎程度将进一步上升。Flutter框架将在网络开发领域引起涟漪。

简介

新的图标，以及Flutter 2中包含的其他组件，将简化网络应用程序的开发。网络版Flutter最近已从测试版转为稳定版。

这对开发者来说是个好消息，因为他们可以建立高度安全和吸引人的网站。Flutter小部件是基于谷歌的材料设计原则。这意味着，即使是没有经验的Flutter开发者也能设计出高质量的应用程序。

目标

本教程将指导读者如何创建一个简单的Flutter Web应用程序。

前提条件

• 对Dart编程语言有一定了解。
• 您必须熟悉Flutter框架，包括其部件和样式。
• 一个支持Flutter的代码编辑器。本教程使用Visual Studio Code 。
• 谷歌浏览器。
• Flutter SDK。

开始使用

在创建项目之前，我们应该确保已经安装了最新的Flutter版本（2）。打开你的终端，运行flutter doctor 命令。

注意，这个验证过程需要一些时间来完成。

如果Flutter SDK在您的电脑上正确安装，您应该有以下输出。

您可以使用以下命令将Flutter升级到最新版本。

flutter channel stable
flutter upgrade

请注意，flutter channel stable 命令将删除您当前的Flutter版本，并将其替换为更稳定的版本。

如前所述，我们需要谷歌浏览器来测试我们的网络应用。请记住，当您运行flutter doctor 命令时，谷歌浏览器应包含在连接的flutter设备中。

创建项目

我们使用flutter create webapp 命令来建立一个新的项目。该命令下载并包括应用程序中所需要的依赖性。您可以用您想要的项目名称替换webapp 。

我们可以使用下面的命令为webapp创建一个本地主机。

Flutter run -d chrome

上述命令将在Chrome浏览器中启动该应用程序。注意，run 命令中的-d chrome 部分只在有多个连接设备时使用。

你应该在浏览器中看到以下输出。

了解项目结构

在这一步，我们将查看项目中包含的不同文件夹和文件。在Visual Studio Code中打开网络应用。你会注意到以下文件夹；dart_tool, .idea, android, build, ios, lib, test, 和web。我们主要是在lib和web文件夹中工作。

我们所有的编程文件都应该包含在lib中。然后，这些文件将根据所针对的平台进行编译。在我们的例子中，这些文件将被编译并存储在web文件夹中。web 文件夹中的index.html 文件将作为我们应用程序的入口。

设计网页

我们将设计下图所示的网页应用程序。

上面的应用程序有一个navigation bar ，two pages ，和Text widgets 。

让我们在我们的应用程序中包含这些组件。

打开lib 文件夹中的main.dart 文件，进行以下修改。

import 'package:flutter/material.dart';
import './homepage.dart' //import a homepage

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(), //add the homepage to the main application
    );
  }
}

如上所示，你必须导入material 包以使用不同的部件。MyApp 类返回一个MaterialApp ，在main 方法中被调用。

然而，运行上述应用程序将无法工作，因为我们没有创建HomePage 组件。让我们在下一步做这件事。

创建主页

在lib 文件夹中创建一个新文件，并将其命名为homepage.dart 。接下来，在homepage.dart 文件中插入一个有状态的部件，如下图所示。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}

我们需要在_HomePageState 类中添加各个组件。

这些元素是专门在这里添加的。

return Container(
       child: child,
    );

我们需要返回一个Scaffold ，而不是一个container 。一个Scaffold允许我们在网页上包含更多元素。Scaffold的添加方式如下所示。

return Scaffold(
       child: child,
    );

在主页上添加更多的组件

在这一步，我们需要将buttons ，Appbar ，和text 小部件添加到主页中。这将如下所示。

注意，我已经添加了内联评论来解释这些小部件的实现。

import 'package:flutter/material.dart';
import './about.dart'; //importing the AboutPage

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( //adding an Appbar
        title: Text('MyApp'), //the name of the application
        actions: [  // the actions widget allows us to add several navigation items

          Center( //adding the first navigation item and positioning it at the center
            child: OutlinedButton(
              child: Text('Home', style: TextStyle(color: Colors.red)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                );
                Navigator.pop(context);
              },
            ),
          ),

          SizedBox(width: 60), //putting some space between the nav items

          Center(  //adding the second navigation item and positioning it at the center
            child: OutlinedButton(
              child: Text('About', style: TextStyle(color: Colors.white)),
              onPressed: () { //determining what should happen when the navigation item is clicked.
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => AboutPage()),
                );
              },
            ),
          ),
          SizedBox(width: 80)
        ],
      ),
      body:
       Container(
        child: Center(  //adding a text message and positioning it at the center of the web page.
          child: Text(
            'Welcome to MyApp',
            style: TextStyle(fontSize: 50, color: Colors.red), //the text message is red and has a font size of 50.
          ),
        ),
      ),
    );
  }
}

我们使用Navigator ，从一个页面导航到另一个页面，如下图所示。

 Navigator.push(context, MaterialPageRoute(builder: (context) => AboutPage()),);

在上面的代码片段中，我们将从HomePage 导航到AboutPage 。AboutPage 将有一个leading arrow ，这将允许我们回到前一页（HomePage）。

创建 "关于 "页面

在lib 文件夹中创建一个新文件，并将其命名为about.dart 。在这个文件中创建一个stateful widget，就像前面的步骤中演示的那样。我们的AboutPage 将有一个AppBar 和一个Text 部分。

请注意，AboutPage与HomePage几乎相似。因此，你可以按照上一步的指引来完成它。

下面是AboutPage的代码。

import 'package:flutter/material.dart';
import './homepage.dart'; //importing the home widget

class AboutPage extends StatefulWidget {
  AboutPage({Key key}) : super(key: key);

  @override
  _AboutPageState createState() => _AboutPageState();
}

class _AboutPageState extends State<AboutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About'),
        actions: [
          SizedBox(width: 60),
          Center(
            child: OutlinedButton(
                child: Text('About'),
                onPressed: () null),
          ),
          SizedBox(width: 80)
        ],
      ),
      body: Container(
        child: Center(
          child: Text(
            'This is the about page. You can outline your vision, mission, and objectives on this page', //Once again, this text message will be displayed in the center of the page.
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

测试应用程序

如前所述，我们将使用Google Chrome 来测试我们的Flutter应用程序。

在你的代码编辑器里面打开一个终端，运行flutter run -d chrome 命令。-d ，确保我们的目标是正确的平台，在我们的例子中是Chrome 。

如果你仔细地按照步骤操作，该应用程序应该可以在浏览器中编译和运行。

总结

在本教程中，我们使用Flutter创建了一个简单的Web应用程序。因此，你可以利用这些知识，使用这个框架创建更强大的应用程序。如果您没有理解任何概念，请随时回到前面的步骤。