Flutter基础篇（9）-- 手把手教你用Flutter实现Web页面编写

AWeiLoveAndroid

发布于 2019-10-23 07:35:00

3.2K00

代码可运行

文章被收录于专栏：Flutter入门到实战Flutter入门到实战

运行总次数：0

代码可运行

本文版权归作者AWeiLoveAndroid所有，未经授权，严禁私自转载。转载请声明原文链接和作者信息。

前面一篇文章介绍了Flutter for Web，这里就详细的讲解一下如何使用Flutter实现Web页面的编写。让大家10分钟之内快熟上手实践。

一、环境要求

（1）Flutter 版本最低要求1.5.4（使用flutter doctor -v查看Flutter版本，如果版本太低，请使用flutter upgrade升级到最新版本）。关于Flutter的详细安装，请查看我的博客 Flutter从配置安装到填坑指南详解
（2）安装webdev工具

使用命令行进行安装 flutter packages pub global activate webdev

webdev命令会下载以下这些包：

args 1.5.1
async 2.2.0
browser_launcher 0.1.2
build_daemon 0.6.0
built_collection 4.2.1
built_value 6.5.0
charcode 1.1.2
codemirror 0.5.4+5.45.0
collection 1.14.11
convert 2.1.1
crypto 2.0.6
devtools 0.0.19 (0.1.0 available)
devtools_server 0.1.2
dwds 0.3.2
fixnum 0.10.9
http 0.12.0+2
http_multi_server 2.0.6
http_parser 3.1.3
intl 0.15.8
io 0.3.3
js 0.6.1+1
json_annotation 2.3.0
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
mime 0.9.6+2
octicons_css 0.0.1
package_config 1.0.5
package_resolver 1.0.10
path 1.6.2
pedantic 1.7.0
platform_detect 1.3.5
plotly_js 0.0.1
polymer_css 0.0.1
pool 1.4.0
primer_css 0.0.2
pub_semver 1.4.2
pubspec_parse 0.1.4
quiver 2.0.3
rxdart 0.21.0 (0.22.0 available)
shelf 0.7.5
shelf_proxy 0.1.0+6
shelf_static 0.2.8
shelf_web_socket 0.2.3
source_maps 0.10.8
source_span 1.5.5
split 0.0.2
sse 2.0.2
stack_trace 1.9.3
stream_channel 2.0.0
stream_transform 0.0.19
string_scanner 1.0.4
term_glyph 1.1.0
typed_data 1.1.6
uuid 2.0.1
vm_service_lib 3.15.1+1 (3.15.1+2 available)
watcher 0.9.7+10
web_socket_channel 1.0.12
webdev 2.0.4
webkit_inspection_protocol 0.4.0
yaml 2.1.15

如果出错，提示让你安装stagehand，请输入命令： flutter packages pub global activate stagehand

Stagehand命令会下载以下这些包：

args 1.5.1
async 2.2.0
charcode 1.1.2
collection 1.14.11
http 0.12.0+2
http_parser 3.1.3
meta 1.1.7
path 1.6.2
pedantic 1.7.0
source_span 1.5.5
stagehand 3.3.0
string_scanner 1.0.4
term_glyph 1.1.0
typed_data 1.1.6
usage 3.4.1

二、运行官方hello_world示例代码

（1）下载flutter_web源码

打开git客户端，输入 git clone https://github.com/flutter/flutter_web.git，或者在其它git下载工具中输入git目录。

（2）使用命令行进入`examples/hello_world/`目录。

例如存放路径在F:/flutter_web，命令行输入cd F:/flutter_web/examples/hello_world/即可。

（3）安装webdev和stagehand

使用命令行进行安装 flutter packages pub global activate webdev

使用命令行进行安装stagehand，请输入命令： flutter packages pub global activate stagehand

【注意】如果直接输入这两下命令行会出错，错误提示如下（必须创建Flutter web项目之后，然后打开命令行才有效）：

Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

（4）在本地构建并运行示例代码

使用命令webdev serve，然后等待构建完成，第一次运行会比较慢，打开Chrome浏览器，输入http://localhost:8080，回车即可。

运行结果如下图所示：

（5）如果某些包出现错误，请在命令行输入`flutter packages upgrade`来更新一些依赖的包。

三、修改hello world，尝试动手写一个小功能

这里我们做一个路由跳转，以及写一个Dialog的功能。下面看看我们的示例代码如下：

（1）修改`examples/hello_world/lib/main.dart`代码如下所示：

import 'package:flutter_web/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Flutter for Web使用',
    theme: new ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: new DialogWidgetsDemo(),
  ));
}

class DialogWidgetsDemo extends StatefulWidget {
  @override
  _DialogWidgetsDemoState createState() => _DialogWidgetsDemoState();
}

class _DialogWidgetsDemoState extends State<DialogWidgetsDemo> {
@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        title: new Text('各种弹窗&提示控件用法'),
      ),
      body: 
       new RaisedButton(
        child: buildButton('SimpleDialog的使用'),
        onPressed: (){
          showDialogs(context);
        },
      ), 
    );
  }

  Widget buildButton(var text) {
    return new Text(
      text,
      style: new TextStyle(
        color: Colors.blueAccent,
        fontSize: 16.0,
      ),
    );
  }

  void showDialogs(BuildContext context){
    showDialog<Null>(
      context: context,
      builder: (BuildContext context){
        return new SimpleDialog(
          // 标题内容
          title: new Text('SimpleDialog示例1'),
          // children里面是dialog的内容 可以自定义
          children: <Widget>[
            buildButton('item1'),
            buildButton('item2'),
            buildButton('item3'),
            buildButton('item4'),
            buildButton('item5'),
          ],
        );
      }
    );
  }
}

（2）然后命令行运行`webdev serve`，我们看看运行结果如下图所示：

点击之前的截图如下：

点击按钮之后：

点击按钮之后

其实我们直接把main.dart放到Flutter工程里面也是可以直接运行在手机上面的。

四、引入flutter_web库到我们项目中

前面我们是以flutter_web的示例代码为例讲解，实际开发中我们不可能把整个项目下载下来去做修改，我们需要引入这个库。最方便的方式是使用git方式引入，需要在项目的pubspec.yaml中作如下修改：

environment:
  sdk: '>=2.2.0 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  # Enables the `pub run build_runner` command
  build_runner: ^1.4.0
  # Includes the JavaScript compilers
  build_web_compilers: ^2.0.0

# flutter_web packages are not published to pub.dartlang.org
# These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

五、使用开发工具创建Flutter Web项目

（1）VSCode

Visual Studio Code支持使用

安装 Flutter v3.0以上扩展包进行Flutter Web开发。（VSCode如果版本太低，建议升级VSCode）

Ctrl+Shift+P打开命名窗口，输入Flutter，选择Flutter: New Web Project创建项目，然后选择项目创建的路径即可自动生成项目。

输入项目名称：

输入项目名称

【注意】如果你未按照上文中的命令安装Stagehand，这时候可能会提示Stagehand未安装，点击Activate Stagehand即可。

然后会自动执行pub get命令，下载所需要的包，如下图所示：

所有依赖包如下所示：

analyzer 0.36.3
archive 2.0.8
args 1.5.1
async 2.2.0
bazel_worker 0.1.20
build 1.1.4
build_config 0.4.0
build_daemon 0.6.0
build_modules 2.1.2
build_resolvers 1.0.4
build_runner 1.4.0
build_runner_core 3.0.5
build_web_compilers 2.0.0
built_collection 4.2.1
built_value 6.5.0
charcode 1.1.2
code_builder 3.2.0
collection 1.14.11
convert 2.1.1
crypto 2.0.6
csslib 0.16.0
dart_style 1.2.7
fixnum 0.10.9
front_end 0.1.18
glob 1.1.7
graphs 0.2.0
html 0.14.0+2
http 0.12.0+2
http_multi_server 2.0.6
http_parser 3.1.3
intl 0.15.8
io 0.3.3
js 0.6.1+1
json_annotation 2.3.0
kernel 0.3.18
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
mime 0.9.6+2
package_config 1.0.5
package_resolver 1.0.10
path 1.6.2
pedantic 1.7.0
pool 1.4.0
protobuf 0.13.11
pub_semver 1.4.2
pubspec_parse 0.1.4
quiver 2.0.3
scratch_space 0.0.3+2
shelf 0.7.5
shelf_web_socket 0.2.3
source_maps 0.10.8
source_span 1.5.5
stack_trace 1.9.3
stream_channel 2.0.0
stream_transform 0.0.19
string_scanner 1.0.4
term_glyph 1.1.0
timing 0.1.1+1
typed_data 1.1.6
vector_math 2.0.8
watcher 0.9.7+10
web_socket_channel 1.0.12
yaml 2.1.15

项目结构如下图所示：

打开Terminal输入webdev serve命令行工具来构建和运行您的应用程序，然后在Chrome浏览器输入localhost:8080回车即可看到示例代码运行的结果，如下图所示：

如果需要调试项目，按F5或Debug - > Start Debugging运行应用程序。

（2）IntelliJ或Android Studio

安装 IntelliJ或Android Studio的Flutter和Dart插件。
IntelliJ中创建Flutter web项目：Create New Project-->Dart-->Flutter Web App-->Next即可。如下图所示：

Android Studio中创建Flutter web项目：创建一个新的Dart项目，请注意，对于Flutter for Web应用程序,选择Dart project。从Dart project中，选择应用程序模板的Flutter for web选项。
创建项目，pub get将自动运行。
创建项目后，点击run主工具栏上的按钮。
IntelliJ将使用webdev命令行工具来构建和运行您的应用程序; 应该会打开一个新的Chrome窗口，显示正在运行的应用。

六、热重载和构建编译

（1）webdev获取（无状态）热重载

要webdev与热重载一起使用，请在项目目录中运行以下命令：

webdev serve --auto restart

【注】无状态的热重载，意味着重新加载时应用程序状态将丢失，如果发现意外行为，则可能需要手动刷新页面。目前官方正在研究有状态的热重载解决方案。

（2）输出静态文件

使用以下命令：

webdev build

这将创建一个build目录index.html，main.dart.js以及使用静态HTTP服务器运行应用程序所需的其余文件。

要优化输出JavaScript，可以使用build.yaml项目根目录中的文件启用优化标志，其中包含以下内容：

# See https://github.com/dart-lang/build/tree/master/build_web_compilers#configuration
targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        generate_for:
        - web/**.dart
        options:
          dart2js_args:
            - --no-source-maps
            - -O4

（3）开发环境版本发布命令行

要启用发布编译命令行，请传入--release或-r。

webdev serve -r
或者
webdev serve --release

七、移动项目向Web项目的迁移

如果您正在使用Git，我们建议您暂时在你的项目存储库中创建Web的分支，便于管理。

（1）修改pubspec.yaml

dependencies:
  ## 替换成 flutter_web
  #flutter:
  #  sdk: flutter
  flutter_web: any

dev_dependencies:
  ## 替换成 flutter_web_test
  #flutter_test:
  #  sdk: flutter
  flutter_web_test: any

  ## 新增Dart web 构建环境
  build_runner: ^1.2.2
  build_web_compilers: ^1.1.0
  test: ^1.3.4

## For the preview, assets are handled differently. Remove or comment
## out this section. See `Assets` below for more details
# flutter:
#   uses-material-design: true
#   assets:
#     - asset/
#
#   fonts:
#   - family: Plaster
#     fonts:
#     - asset: asset/fonts/plaster/Plaster-Regular.ttf

## 从Git上引用flutter_web包
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

（2）lib目录

1. 把项目中所有的package:flutter包换成package:flutter_web包。
2.把项目中所有的dart:ui包换成package:flutter_ui/ui.dart包。

（3）web目录

目前预览版来说，需要创建web/index.html和web/main.dart这两个文件夹。这为您的应用程序提供了一个入口点。通常，您复制粘贴下面的文件即可。

1.web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

2.web/main.dart

import 'package:flutter_web_ui/ui.dart' as ui;

// TODO: change `my_app` to refer to your app package name.
import 'package:my_app/main.dart' as app;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

3.web/assets (可选)

如果应用程序具有assets资产（字体、json文件、音频、图片等），则它们必须位于web/assets目录中。您可能还需要更新源代码中引用这些资产的路径。

4.web/assets/FontManifest.json (可选)

如果应用程序具有自定义字体，则需要将其包含在此文件中。

示例如下：

[
  {
    "family": "Raleway",
    "fonts": [
      {
        "asset": "fonts/Raleway-Regular.ttf"
      },
      {
        "asset": "fonts/Raleway-Italic.ttf",
        "style": "italic"
      }
    ]
  },
  {
    "family": "RobotoMono",
    "fonts": [
      {
        "asset": "fonts/RobotoMono-Regular.ttf"
      },
      {
        "asset": "fonts/RobotoMono-Bold.ttf",
        "weight": 700
      }
    ]
  }
]

【声明】本文首发于我的公众号Flutter那些事，未经授权严禁转载！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.05.10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度