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

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/2893f2b52eee
转载请标明出处:https://www.jianshu.com/p/2893f2b52eee
本文出自 AWeiLoveAndroid的博客


Flutter系列博文链接 ↓:

工具安装:

Flutter基础篇:

Flutter进阶篇:

Dart语法系列博文链接 ↓:

Dart语法基础篇:

Dart语法进阶篇:


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

如果不想看文章,也可以看我的视频讲解:手把手教你用Flutter实现Web页面编写


一、环境要求

  • (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支持使用

  • 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.htmlmain.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.htmlweb/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那些事,未经授权严禁转载!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242

推荐阅读更多精彩内容