flutter web开发环境配置

Posted Jadyli1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter web开发环境配置相关的知识,希望对你有一定的参考价值。

flutter web开发环境配置

首先确认你的 flutter 环境配置好了: flutter环境准备

建议使用 VS Code 开发。

web 环境配置

1 chrome支持

flutter 默认在 stable 版本的分支,如果要支持终端直接运行打开 chrome,需要切到 master 分支。

flutter channel master

2. 启用 web 配置

flutter config --enable-web

VS Code 配置

Code -> Preferences -> Extensions,分别搜索安装Flutter、Dart。

新建Web项目

在 VS Code 中,菜单 -> View -> Command Palette, 输入 flutter, 选择 Flutter: New Web Project

Alt + F12, 在 VS Code 里打开终端,输入:

flutter create .

更新依赖:

flutter pub upgrade

运行:

flutter run -d chrome

即可在 chrome 中打开 flutter 网页。

1.9预览版有时存在网页空白的问题。遇到空白问题,可以换成用 webdev 开发,直接通过终端启动 web 服务器,在浏览器输入: 127.0.0.1:8080 访问。

激活 webdev 开发环境

github: https://github.com/dart-lang/webdev

flutter pub global activate webdev

在 .bash_profile 里添加(用户名换成你自己的):

export PATH="$PATH:/Users/jady/flutter/.pub-cache/bin"

启动服务器

webdev serve

以上是关于flutter web开发环境配置的主要内容,如果未能解决你的问题,请参考以下文章

Flutter开发环境配置

Flutter开发环境配置

Flutter开发环境配置(MAC版)

vscode flutter 环境搭建

Mac环境下的flutter配置及安装

配置Flutter开发环境