Flutter web - 1 环境搭建

最新推荐文章于 2025-03-26 14:11:06 发布
最新推荐文章于 2025-03-26 14:11:06 发布
阅读量486 收藏 9
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Flutter Web 文章标签： flutter 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35886767/article/details/141228395

编辑器

安装 vscode

Download Visual Studio Code

安装插件

在这里插入图片描述

在这里插入图片描述

SDK

使用 fvm 管理 Flutter SDK

fvm 安装教程

检查环境

flutter doctor

创建项目

使用的 Flutter 版本

在这里插入图片描述

在要创建项目的文件夹下运行

flutter create my_flutter_web

可以删除其他平台文件，只保留 web文件夹

在这里插入图片描述

如果没有 web文件夹，可能是 Flutter 版本太低，运行以下命令开启 web 支持

flutter config --enable-web
flutter create .

运行项目

flutter run -d chrome --web-renderer canvaskit

-d为指定设备名，也可把 chrome替换成 edge。

--web-renderer可选参数值：canvaskit、html 或 auto。

  • canvaskit - 始终使用 CanvasKit 渲染器。

  • html - 始终使用 HTML 渲染器。

  • auto（默认）- 自动选择渲染器。移动端浏览器选择使用 HTML，桌面端浏览器选择使用 CanvasKit。

使用 Flutter run -h可查看命令参数帮助

打包项目

flutter build web

打包产物在 build/web

Flutter开发之——构建Web应用，安卓开发面试问题回答技巧
m0_60707538的博客
03-19 645
如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。GitHub地址PS：我GitHub中有大量高阶Android学习视频资料和面试资料包~查询，修正不足。[外链图片转存中…(img-01sdNoby-1710837310071)]GitHub地址PS：我GitHub中有大量高阶Android学习视频资料和面试资料包~欢迎大家一起交流讨论啊~
Flutter 1.5 Web开发环境搭建
新缸中之脑
05-21 908
最新的Flutter 1.5.4已经支持Web开发，这个教程将介绍如何在Linux、windows和Mac下 安装Flutter web开发环境：安装Flutter SDK和Flutter Web构建工具，并利用Flutter Web 演示代码来验证开发环境搭建成功。 要快速掌握软件开发技能，推荐汇智网的在线互动编程课程 1、安装Flutter SDK 首先安装最新版的Flutter SDK，...
Flutter web环境搭建
Litwak
09-22 673
在国内环境， 搭建Flutter web环境费了很大力气，以下就详细解答搭建过程。 第一步： 下载beta版 https://flutter.cn/docs/development/tools/sdk/releases版本列表里找到beta channel最新版。 我这里用的是1.22.0-12.1.pre。 大约700MB。解压到安装目录， 推荐放到 C:/src/flutter 第二步： 设置 Path 环境变量C:/src/flutter/bin 设置 dart_pub, flutter..
吐血教程：搭建Flutter开发环境
最新发布
2501_91087985的博客
03-26 1540
Flutter 1.9的发布标志着跨平台开发的进一步成熟，尤其是Flutter web的支持，使得开发者能够使用同一套代码为移动端、桌面端和网页端开发应用。通过本文的详细教程，你可以轻松搭建Flutter开发环境，并编写你的第一个Flutter程序。同时，借助Appuploader，iOS应用的发布流程也将变得更加简单高效。
flutter创建一个web应用
keny-大成的博客
03-23 502
创建一个支持 web 的新项目 注意： 当前，你需要 master 或者 dev 渠道的的 Flutter SDK 来获取 Web 支持：这里我们假定你已经安装了 Flutter 命令行工具，运行下面的命令需要安装 master 渠道最新的 SDK 噢： 你可以通过以下步骤创建一个支持 web 的新项目 通过执行下面命令，更新一下支持flutter 可以支持web $ flutter ...
flutter 环境搭建-flutter环境搭建,很不错的学习笔记
07-05
### Flutter 环境搭建详解 #### Flutter 概述与特性 Flutter 是一款由谷歌公司推出的开源 UI 框架，旨在实现跨平台的应用开发，能够高效地在 iOS 和 Android 设备上构建出高质量的原生应用。其核心优势在于跨平台...
Flutter开发-环境搭建
deathgoy的博客
09-22 3529
搭建Flutter开发环境1.安装Flutter SDK2.配置环境变量镜像windowmac3.运行flutter doctor4.Flutter for web 1.安装Flutter SDK 使用git命令行 git clone -b beta https://github.com/flutter/flutter.git 2.配置环境变量 镜像 由于在国内访问Flutter有时可能会受到...
1.Flutter开发工具准备与开发环境搭建
qq_39234709的博客
09-26 6753
https://developer.android.google.cn/studio/run/managing-avds#createavd
【flutter】搭建Android本地web服务项目-源码
04-24
这是一个flutter项目，用AndroidStudio开发工具创建，主要用于实现Android APP运行本地web服务站点的功能，仅支持部署静态网页托管，在WIFI局域网内访问，相关学习文章请访问...
Flutter基础 -- Flutter容器布局
原来45的博客
06-05 1633
MaterialAPP 脚手架 Scaffold 线性布局 Column Row 盒模型 Box Model 容器 Container 弹性布局 Flex 层叠布局 Stack 流式布局 Wrap 对齐定位 Align
Flutter开发之——构建Web应用，前端开发有效连接
03-28 774
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
Flutter Web（一）新建项目和登录页
想到哪记到哪
03-30 1515
flutter开发环境搭建略 如果是新搭建好的环境，需要开启web支持和windows支持 flutter config --enable-windows-desktop flutter config --enable-web 创建项目名为spore，英文翻译为孢子，希望可以”做大做强“（无名之辈的发音）吧，毕竟谁不好大喜功呢！ flutter create spore cd spore web运行查看 flutter run -d Chrome windows运行查看 flutter run -d Wi
flutter制作博客展示平台，现已支持 Web、macOS 应用、Android 和 iOS
2401_84150046的博客
05-11 907
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Flutter开发之——构建Web应用
我的博客
01-19 1576
一 概述 之前介绍过使用Flutter构建移动应用，本文介绍使用Flutter构建Web应用 配置flutter sdk以支持Web 在新项目中开启Flutter Web 创建一个支持Web运行的新应用 向已有的应用添加Web支持 二 配置flutter 工具以支持Web 在创建支持Web的Flutter应用前，你需要安装下面的应用： Flutter SDK(安装并添加到环境path变量中) 浏览器(谷歌、Edge)，调试Web应用时，需要浏览器支持 三 在新项目中开启Flutter Web 3.
flutter web 配置环境及运行(windows)
weixin_30332241的博客
07-15 546
此下 操作 都是基于 windows 一， 将镜像添加到 用户环境变量中 　　由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中： export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=http...
使用Flutter构建响应式Web应用
EipGemms的博客
10-08 243
Flutter是一种跨平台的应用程序开发框架，它可以让开发者使用单一的代码库构建高性能的移动应用、Web应用和桌面应用。本文将介绍如何使用Flutter构建一个简单的响应式Web应用，并提供相应的源代码。
Flutter Create 命令行使用技巧
会煮咖啡的猫咪
10-16 931
原文Flutter Create 命令行使用技巧我之前一直在抱怨 flutter create 创建项目后一堆多余代码，原来是我没仔细看文档。也有群友问我如何创建项目的时候指定 ios android 的开发语言，今天就一起来说下如何解决。flutter-create-命令行。
使用Flutter 创建web项目
Hn的网站都别抢
08-01 1083
环境： android studio flutter beta 版本 （使用 flutter channel 可查看版本） dart 如果要创建 web 项目 Flutter已经从 flutter_web 与 flutter 整合在一起。 关于创建 flutter web app 可以参考链接： https://flutter.dev/docs/get-started/web 步骤： ·下载flutter sdk（假设已经配置好了，若没有配置好则参考：https://flutterc..
Flutter 创建Web 应用
K_Hello的博客
03-04 1321
Flutter 创建Web 应用 文章目录创建新的Web项目开启 Web 支持创建项目对已有的应用添加 Web 支持1.开启Web支持（如上）2.创建web 目录3.运行应用在浏览器中使用 build 命令 From:flutter.cn 运行环境如下(仅供参考)： distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip dependencies { classpath 'com.android
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值