Flutter For Web 创建和运行Web应用程序

Flutter 汇总请看这里

Flutter于2017年5月在Google I / O上首次使用Alpha工具包发布,并于2018年在Google I / O上发布,最终通过未来的新产品HummingBird达到1.0版,并于2019年5月7日在Google IO 2019上,谷歌终于宣布推出Flutter for Web预览版。

Flutter的创建旨在为开发人员提供快速的开发框架,并为用户提供出色的参与和快速体验。Flutter for Web是Flutter的代码兼容实现,使用基于标准的Web技术(HTML,CSS和JavaScript)呈现。借助Flutter for Web,可以将Dart编写的现有Flutter代码编译为可嵌入到浏览器中并部署到任何Web服务器的客户端。可以使用Flutter的所有功能,并且不需要浏览器插件。

安装

升级Flutter至指定版本

为了开发web,需要Flutter 1.5及以上版本,它支持使用Flutter来定位web,包括将Dart编译成JavaScript。使用Flutter SDKflutter_web预览,确保已经通过flutter upgrade升级Flutter至v1.5.4

$ flutter upgrade

安装Flutter for web构建工具

要安装该webdev软件包,该软件包提供了Flutter for web的构建工具,请运行以下命令:

$ flutter packages pub global activate webdev

配置环境变量

$ touch ~/.bash_profile; open ~/.bash_profile

将使用TextEdit打开文件,确保对PATH中的所有组件都有引用并保存。

确保配置了$HOME/.pub-cache/bin环境变量,然后可以直接在
终端上使用webdev命令。

flutter sdk:
export PATH=$PATH:[Path to your flutter directory]/flutter/bin

dart sdk:
export PATH=$PATH:[Path to your flutter directory]
/flutter/bin/cache/dart-sdk/bin

webdev:
mac: export PATH=$PATH:$HOME/.pub-cache/bin
windows: %USERPROFILE%\AppData\Roaming\Pub\Cache\bin
linux: $HOME/flutter/.pub-cache/bin

如果在配置webdev直接运行时遇到问题,请尝试:
flutter packages pub global run webdev [command]。

准备 IDE

完成环境设置后,需要一个IDE 为Web开发。选择您喜欢的IDE,然后按照
下面的逐步说明进行操作:

Visual Studio Code

Visual Studio Code通过Flutter v3.0版本支持Flutter Web开发。

  • 安装 Flutter SDK
  • 配置 VS Code
    • VS Code,下载安装最新稳定版本
    • 安装Flutter和Dart插件
      • 启动VS Code。
      • 调用View > Command Palette….
      • 键入“install”,然后选择Extensions: Install Extensions。
      • 在Extensions搜索字段中输入“ flutter”,在列表中选择Flutter,然后单击Install。这还将安装所需的Dart插件。
    • 使用Flutter Doctor验证
      • 调用 View > Command Palette….
      • 键入“ doctor”,然后选择Flutter: Run Flutter Doctor.
      • 查看“输出” 窗格中的输出是否有问题。
  • 配置VS Code指向本地Flutter SDK
  • 从VS Code 运行命令 Flutter: New Web Project
  • 创建项目后,按F5或“ Debug-> Start Debugging” 运行您的应用
  • VS Code将使用webdev命令行工具来构建和运行您的应用程序;应打开一个新的Chrome窗口,显示正在运行的应用
IntelliJ
  • 安装 Flutter SDK

  • 配置IntelliJ或Android Studio

    • 安装Android Studio
      Android Studio为Flutter提供了完整的集成IDE体
      • Android Studio版本3.0或更高版本
    • 或者,您也可以使用IntelliJ:
      • IntelliJ IDEA社区 2017.1版或更高版本
      • IntelliJ IDEA Ultimate版本2017.1或更高版本
    • 安装Flutter和Dart插件
      • 启动Android Studio。
      • 打开插件首选项(在macOS上为Preferences > Plugins , 在Windows和Linux上为File > Settings > Plugins)。
      • 选择Marketplace,选择Flutter插件,然后单击 Install。
      • 当提示您安装Dart插件时,单击“ 是”。
      • 出现提示时,单击重新启动。
  • 配置IntelliJ或Android Studio以指向本地Flutter SDK

  • 创建一个新的Dart项目;请注意,对于Flutter for Web应用,您要从Dart项目向导而不是Flutter项目向导开始

  • 从Dart项目向导中,为应用程序模板选择“ Flutter for web”选项

  • 创建项目;pub get将自动运行

  • 创建项目后,点击run主工具栏上的按钮

  • IntelliJ将使用webdev命令行工具来构建和运行您的应用程序;打开一个新的Chrome窗口,显示正在运行的应用

Android Studio

在Android Studio中,没有直接的插件或模板来创建Web项目,而是可以使用Stagehand软件包来帮助您设置Web项目。Stagehand基本上是Dart项目脚手架生成器,受到Web Starter Kit和Yeoman等工具的启发。为了使用Stagehand创建一个Web项目,您需要按照以下说明进行操作:

  • 安装 Flutter SDK
  • 设置您的Android Studio
    • 同IntelliJ
  • 配置Android Studio以指向您的本地Flutter SDK
    现在从终端运行以下命令以安装Stagehand $ pub global activate stagehand
    安装了Stagehand,就可以使用它在所需目录中生成项目框架。例如,以下是如何使用Stagehand创建简单的Web项目:
    $ mkdir flutter_web_project  
    $ cd flutter_web_project  
    $ stagehand web-simple
    
    列出所有项目模板:
    $ stagehand
    - 创建项目后,请在Android Studio中打开该项目,然后在pubspec.yaml文件中添加以下依赖项
    dependencies:
       flutter_web: any
       flutter_web_ui: any
     dev_dependencies:
       # Enables the `pub run build_runner` command
       build_runner: ^1.1.2
       # Includes the JavaScript compilers
       build_web_compilers: ^1.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
    
    运行pub get,将下载所有必需的软件包
    lib在项目的根目录中创建一个文件夹
    现在main.dart在lib文件夹中创建一个文件,并将以下代码粘贴到其中:
    import 'package:flutter_web/material.dart';
    
    void main() => runApp(Text('Hello World', textDirection:
    TextDirection.ltr));
    
    完成后;打开main.dartWeb文件夹中存在的文件,并在其中粘贴以下代码:
    import 'package:fancy_proj/main.dart' as app;
    import 'package:flutter_web_ui/ui.dart' as ui;
    
    main() async {
      await ui.webOnlyInitializePlatform();
      app.main();
    }
    
    完成所有操作后,就可以测试Web项目了。通过在终端中键入以下命令来运行您的应用程序:
    $ webdev serve
    
    [INFO] Generating build script completed, took 331ms
    ...
    [INFO] Building new asset graph completed, took 1.4s
    ...
    [INFO] Running build completed, took 27.9s
    ...
    [INFO] Succeeded after 28.1s with 618 outputs (3233 actions)
    Serving `web` on http://localhost:8080
    
    在Chrome中打开http:// localhost:8080,您应该Hello World在左上角看到红色文本。

获取(无状态)热重载 webdev

要webdev与热重装一起使用,请在项目目录中运行以下命令:

$ webdev serve --auto restart

您会注意到类似flutter packages pub run build_runner serve的输出,现在更改应用程序代码将导致保存时快速刷新应用程序。

注意:该–hot-reload选项并不完美。如果发现
异常行为,则可能需要手动刷新页面。

注意:该–hot-reload选项当前为“无状态”。
重新加载时,应用程序状态将丢失。我们确实希望在Web上提供“有状态的”热重装-还暂时不支持

Stagehand模板

Stagehand有许多可用的模板,下面列出了所有项目模板:

  • console-full -命令行应用程序示例。
  • package-simple -Dart库或应用程序的起点。
  • server-shelf -使用机架软件包构建的Web服务器。
  • web-angular -带有材料设计组件的Web应用程序。
  • web-simple -仅使用核心Dart库的网络应用。
  • web-stagexl -2D动画和游戏的起点。
发布了73 篇原创文章 · 获赞 38 · 访问量 6万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览