使用Flutter开发简单的Web应用

本文指导读者如何使用 Flutter 运行和部署第一个 Web 应用。

Flutter 在 Android 和 iOS 开发方面走了很长一段路之后，已经迈入了一个新的阶段，即 Web 开发。Google 发布了 Flutter 1.5，同时支持 Web 应用开发。

为 Web 开发配置 Flutter

为了使用 Web 包，输入命令 flutter upgrade 更新到 Flutter 1.5.4。

• 打开终端
• 输入 flutter upgrade
• 输入 flutter –version 检查版本

图 1: 升级 Flutter 到最新版

也可以将 Android Studio 3.0 或更高版本用于 Flutter Web 开发，但在本教程中，我们使用 Visual Studio Code。

使用 Flutter Web 创建新项目

打开 Visual Studio Code，然后按 Shift+Ctrl+P 开始一个新项目。输入 flutter 并选择 “New Web Project”。

图 2：在 VSC 中开始一个新的 Flatter 项目

现在，为项目命名。我将其命名为 open_source_for_you。

图 3: 给项目命名

在 VSC 中打开终端窗口，然后输入以下命令：

1. <span class="pln">flutter packages pub </span><span class="kwd">global</span><span class="pln"> activate webdev</span>
2. <span class="pln">flutter packages upgrade</span>

现在，使用以下命令在 localhost 上运行网站，IP 地址是 127.0.0.1。

1. <span class="pln">flutter packages pub </span><span class="kwd">global</span><span class="pln"> run webdev serve</span>

打开任何浏览器，然后输入 http://127.0.0.1:8080/。

图 4：运行于 8080 端口的 Flutter 演示应用

在项目目录中有个 Web 文件夹，其中包含了 index.html。dart 文件被编译成 JavaScript 文件，并使用以下代码包含在 HTML 文件中：

1. <span class="tag"><script</span><span class="pln"> </span><span class="atn">defer</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"main.dart.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"application/javascript"</span><span class="tag">></script></span>

编码和修改演示页面

让我们创建一个简单的应用，它会在网页上打印 “Welcome to OSFY”。

现在打开 Dart 文件，它位于 lib 文件夹 main.dart（默认名）中（参见图 5）。

图 5：main.dart 文件的位置

现在，我们可以在 MaterialApp 的属性中删除调试标记，如下所示：

1. <span class="pln">debugShowCheckedModeBanner</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span>

现在，向 Dart 中添加更多内容与用 Dart 编写 Flutter 很类似。为此，我们可以声明一个名为 MyClass 的类，它继承了 StatelessWidget。

我们使用 Center 部件将元素定位到中心。我们还可以添加 Padding 部件来添加填充。使用以下代码获得图 5 所示的输出。使用刷新按钮查看更改。

1. <span class="kwd">class</span><span class="pln"> </span><span class="typ">MyClass</span><span class="pln"> </span><span class="kwd">extends</span><span class="pln"> </span><span class="typ">StatelessWidget</span><span class="pln"> </span><span class="pun">{</span>
2. <span class="pln"> </span><span class="lit">@override</span>
3. <span class="pln"> </span><span class="typ">Widget</span><span class="pln"> build</span><span class="pun">(</span><span class="typ">BuildContext</span><span class="pln"> context</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
4. <span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Scaffold</span><span class="pun">(</span>
5. <span class="pln"> body</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Center</span><span class="pun">(</span>
6. <span class="pln"> child</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Column</span><span class="pun">(</span>
7. <span class="pln"> mainAxisAlignment</span><span class="pun">:</span><span class="pln"> </span><span class="typ">MainAxisAlignment</span><span class="pun">.</span><span class="pln">center</span><span class="pun">,</span>
8. <span class="pln"> children</span><span class="pun">:</span><span class="pln"> </span><span class="pun"><</span><span class="typ">Widget</span><span class="pun">>[</span>
9. <span class="pln"> </span><span class="typ">Padding</span><span class="pun">(</span>
10. <span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="typ">EdgeInsets</span><span class="pun">.</span><span class="pln">all</span><span class="pun">(</span><span class="lit">20.0</span><span class="pun">),</span>
11. <span class="pln"> child</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Text</span><span class="pun">(</span>
12. <span class="pln"> </span><span class="str">'Welcome to OSFY'</span><span class="pun">,</span>
13. <span class="pln"> style</span><span class="pun">:</span><span class="pln"> </span><span class="typ">TextStyle</span><span class="pun">(</span><span class="pln">fontSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">24.0</span><span class="pun">,</span><span class="pln"> fontWeight</span><span class="pun">:</span><span class="pln"> </span><span class="typ">FontWeight</span><span class="pun">.</span><span class="pln">bold</span><span class="pun">),</span>
14. <span class="pln"> </span><span class="pun">),</span>
15. <span class="pln"> </span><span class="pun">),</span>
16. <span class="pln"> </span><span class="pun">],</span>
17. <span class="pln"> </span><span class="pun">),</span>
18. <span class="pln"> </span><span class="pun">),</span>
19. <span class="pln"> </span><span class="pun">);</span>
20. <span class="pln"> </span><span class="pun">}</span>
21. <span class="pun">}</span>

图 6：MyClass 的输出

让我们从互联网中添加一张图片，我已经从一个杂志网站选择了一张 “Open Source for You” 徽标。我们使用 Image.network。

1. <span class="typ">Image</span><span class="pun">.</span><span class="pln">network</span><span class="pun">(</span>
2. <span class="pln"> </span><span class="str">'https://opensourceforu.com/wp-content/uploads/2014/03/OSFY-Logo.jpg'</span><span class="pun">,</span>
3. <span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span>
4. <span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">150</span>
5. <span class="pun">),</span>

最终输出如图 7 所示。