本文指导读者如何使用Flutter运行和部署第一个Web应用。在Android和iOS开发取得长足发展之后，Flutter进入了一个新的阶段，即Web开发。Google发布了Flutter1.5，支持Web应用程序开发。配置Flutter进行web开发要使用web包，输入命令flutterupgrade更新到Flutter1.5.4。打开终端输入flutterupgrade输入flutter–version查看版本图1：将Flutter升级到最新版本Flutterweb开发也可以使用AndroidStudio3.0或更高版本，但在本教程中我们使用VisualStudioCode。使用FlutterWeb创建一个新项目打开VisualStudioCode，然后按Shift+Ctrl+P开始一个新项目。输入flutter并选择“NewWebProject”。图2：在VSC中启动一个新的Flatter项目现在，为项目命名。我将其命名为open_source_for_you。图3：为项目命名在VSC中打开一个终端窗口并输入以下命令：flutterpackagespubglobalactivatewebdevflutterpackagesupgrade现在，使用以下命令在本地主机上运行该网站，IP地址为127.0.0.1。flutterpackagespubglobalrunwebdevserve打开任意浏览器输入http://127.0.0.1:8080/。图4：在端口8080上运行的Flutter演示应用程序在项目目录中有一个包含index.html的web文件夹。dart文件被编译成JavaScript文件，并使用以下代码包含在HTML文件中：编码和修改演示页面让我们创建一个在网页上打印“欢迎使用OSFY”的简单应用程序。现在打开位于lib文件夹main.dart（默认名称）中的Dart文件（参见图5）。图5：main.dart文件的位置我们现在可以删除MaterialApp属性中的调试标志，如下所示：debugShowCheckedModeBanner:false现在，向Dart添加更多内容类似于在Dart中编写Flutter。为此，我们可以声明一个名为MyClass的类，它扩展了StatelessWidget。我们使用Center小部件使元素居中。我们还可以添加一个Padding小部件来添加填充。使用以下代码获取图5中所示的输出。使用刷新按钮查看更改。classMyClassextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:
