正文

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

admin
admin V管理员 /0 评论 /210 阅读
0111
此篇文章发布距今已超过617天，您需要注意文章的内容或图片是否可用！

声明：本文是作者AWeiLoveAndroid原创，版权归作者AWeiLoveAndroid所有，侵权必究。如若转发，请注明作者和来源地址！未经授权，严禁私自转载！

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

如果不想看文章，也可以看我的视频讲解：

手把手教你用Flutter实现Web页面编写

一、环境要求

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

（2）安装webdev工具

使用命令行进行安装 flutter packages pub global activate webdev， 如果安装不了，请科学上网再试试看。

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

args .1
async .0
browser_launcher .2
build_daemon .0
built_collection .1
built_value .0
charcode .2
codemirror .4+5.45.0
collection .11
convert .1
crypto .6
devtools .19 .0 available
devtools_server .2
dwds .2
fixnum .9
http .0+2
http_multi_server .6
http_parser .3
intl .8
io .3
js .1+1
json_annotation .0
logging .3+2
matcher .5
meta .7
mime .6+2
octicons_css .1
package_config .5
package_resolver .10
path .2
pedantic .0
platform_detect .5
plotly_js .1
polymer_css .1
pool .0
primer_css .2
pub_semver .2
pubspec_parse .4
quiver .3
rxdart .0 .0 available
shelf .5
shelf_proxy .0+6
shelf_static .8
shelf_web_socket .3
source_maps .8
source_span .5
 .2
sse .2
stack_trace .3
stream_channel .0
stream_transform .19
string_scanner .4
term_glyph .0
typed_data .6
uuid .1
vm_service_lib .1+1 .1+2 available
watcher .7+10
web_socket_channel .12
webdev .4
webkit_inspection_protocol .0
yaml .15

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

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

args .1
async .0
charcode .2
collection .11
http .0+2
http_parser .3
meta .7
path .2
pedantic .0
source_span .5
stagehand .0
string_scanner .4
term_glyph .0
typed_data .6
usage .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  found.
This  should be run from the root of your Flutter project.
Do not run this  from the root of your  clone of Flutter.

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

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

 

 

运行结果如下图所示：

 

 

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

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

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

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

void  
  runAppnew MaterialApp
    title: ,
    theme: new ThemeData
      primarySwatch: Colors.blue,
    ,
    home: new DialogWidgetsDemo,
class DialogWidgetsDemo extends StatefulWidget 
  @override
  _DialogWidgetsDemoState createState  _DialogWidgetsDemoState
class _DialogWidgetsDemoState extends StateDialogWidgetsDemo 
@override
  Widget buildBuildContext context 
     new Scaffold
      appBar: new AppBar
        centerTitle: true,
        title: new Text,
      ,
      body: 
       new RaisedButton
        child: buildButton,
        onPressed: 
          showDialogscontext
        ,
      , 
  Widget buildButtonvar text 
     new Text
      text,
      style: new TextStyle
        color: Colors.blueAccent,
        fontSize: ,
      ,
  void showDialogsBuildContext context
    showDialogNull
      context: context,
      builder: BuildContext context
         new SimpleDialog
          // 标题内容
          title: new Text,
          // children里面是dialog的内容 可以自定义
          children: Widget
            buildButton,
            buildButton,
            buildButton,
            buildButton,
            buildButton,
          ,

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

点击之前的截图如下：

 

 

点击按钮之后：

 

点击按钮之后

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

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

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

environment:
  sdk: 
dependencies:
  flutter_web: any
  flutter_web_ui: any
dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
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 .3
archive .8
args .1
async .0
bazel_worker .20
build .4
build_config .0
build_daemon .0
build_modules .2
build_resolvers .4
build_runner .0
build_runner_core .5
build_web_compilers .0
built_collection .1
built_value .0
charcode .2
code_builder .0
collection .11
convert .1
crypto .6
csslib .0
dart_style .7
fixnum .9
front_end .18
glob .7
graphs .0
html .0+2
http .0+2
http_multi_server .6
http_parser .3
intl .8
io .3
js .1+1
json_annotation .0
kernel .18
logging .3+2
matcher .5
meta .7
mime .6+2
package_config .5
package_resolver .10
path .2
pedantic .0
pool .0
protobuf .11
pub_semver .2
pubspec_parse .4
quiver .3
scratch_space .3+2
shelf .5
shelf_web_socket .3
source_maps .8
source_span .5
stack_trace .3
stream_channel .0
stream_transform .19
string_scanner .4
term_glyph .0
timing .1+1
typed_data .6
vector_math .8
watcher .7+10
web_socket_channel .12
yaml .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项目根目录中的文件启用优化标志 ，其中包含以下内容：

targets:
    builders:
      build_web_compilersentrypoint:
        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

args .1
async .0
charcode .2
collection .11
http .0+2
http_parser .3
meta .7
path .2
pedantic .0
source_span .5
stagehand .0
string_scanner .4
term_glyph .0
typed_data .6
usage .1
0

（2）lib目录

把项目中所有的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

args .1
async .0
charcode .2
collection .11
http .0+2
http_parser .3
meta .7
path .2
pedantic .0
source_span .5
stagehand .0
string_scanner .4
term_glyph .0
typed_data .6
usage .1
1

2.web/main.dart

args .1
async .0
charcode .2
collection .11
http .0+2
http_parser .3
meta .7
path .2
pedantic .0
source_span .5
stagehand .0
string_scanner .4
term_glyph .0
typed_data .6
usage .1
2

3.web/assets (可选)

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

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

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

示例如下：

args .1
async .0
charcode .2
collection .11
http .0+2
http_parser .3
meta .7
path .2
pedantic .0
source_span .5
stagehand .0
string_scanner .4
term_glyph .0
typed_data .6
usage .1
3

 

宙飒zhousa.om