[[283526]]

本文指導(dǎo)讀者如何使用 Flutter 運(yùn)行和部署第一個(gè) Web 應(yīng)用。

Flutter 在 Android 和 iOS 開(kāi)發(fā)方面走了很長(zhǎng)一段路之后，已經(jīng)邁入了一個(gè)新的階段，即 Web 開(kāi)發(fā)。Google 發(fā)布了 Flutter 1.5，同時(shí)支持 Web 應(yīng)用開(kāi)發(fā)。

為 Web 開(kāi)發(fā)配置 Flutter

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

• 打開(kāi)終端
• 輸入 flutter upgrade
• 輸入 flutter –version 檢查版本

圖 1: 升級(jí) Flutter 到最新版

也可以將 Android Studio 3.0 或更高版本用于 Flutter Web 開(kāi)發(fā)，但在本教程中，我們使用 Visual Studio Code。

使用 Flutter Web 創(chuàng)建新項(xiàng)目

打開(kāi) Visual Studio Code，然后按 Shift+Ctrl+P 開(kāi)始一個(gè)新項(xiàng)目。輸入 flutter 并選擇 “New Web Project”。

圖 2：在 VSC 中開(kāi)始一個(gè)新的 Flatter 項(xiàng)目

現(xiàn)在，為項(xiàng)目命名。我將其命名為 open_source_for_you。

圖 3: 給項(xiàng)目命名

在 VSC 中打開(kāi)終端窗口，然后輸入以下命令：

flutter packages pub global activate webdev
flutter packages upgrade

現(xiàn)在，使用以下命令在 localhost 上運(yùn)行網(wǎng)站，IP 地址是 127.0.0.1。

flutter packages pub global run webdev serve

打開(kāi)任何瀏覽器，然后輸入 http://127.0.0.1:8080/。

圖 4：運(yùn)行于 8080 端口的 Flutter 演示應(yīng)用

在項(xiàng)目目錄中有個(gè) Web 文件夾，其中包含了 index.html。dart 文件被編譯成 JavaScript 文件，并使用以下代碼包含在 HTML 文件中：

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

編碼和修改演示頁(yè)面

讓我們創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用，它會(huì)在網(wǎng)頁(yè)上打印 “Welcome to OSFY”。

現(xiàn)在打開(kāi) Dart 文件，它位于 lib 文件夾 main.dart（默認(rèn)名）中（參見(jiàn)圖 5）。

圖 5：main.dart 文件的位置

現(xiàn)在，我們可以在 MaterialApp 的屬性中刪除調(diào)試標(biāo)記，如下所示：

debugShowCheckedModeBanner: false

現(xiàn)在，向 Dart 中添加更多內(nèi)容與用 Dart 編寫(xiě) Flutter 很類(lèi)似。為此，我們可以聲明一個(gè)名為 MyClass 的類(lèi)，它繼承了 StatelessWidget。

我們使用 Center 部件將元素定位到中心。我們還可以添加 Padding 部件來(lái)添加填充。使用以下代碼獲得圖 5 所示的輸出。使用刷新按鈕查看更改。

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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

圖 6：MyClass 的輸出

讓我們從互聯(lián)網(wǎng)中添加一張圖片，我已經(jīng)從一個(gè)雜志網(wǎng)站選擇了一張 “Open Source for You” 徽標(biāo)。我們使用 Image.network。

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

最終輸出如圖 7 所示。

圖 7：最終輸出