Flutter 创建Web 应用

最新推荐文章于 2025-09-12 15:03:32 发布
原创 最新推荐文章于 2025-09-12 15:03:32 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用Flutter创建Web应用，包括配置开发环境、创建新项目、为现有项目添加Web支持等步骤。文中还提供了详细的命令行操作指南及注意事项。

Flutter 创建Web 应用

文章目录


From:
flutter.cn
bilibili.com

运行环境如下(仅供参考)：

distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip

dependencies {
    classpath 'com.android.tools.build:gradle:3.5.0'
}

Flutter version 2.0.0

创建新的Web项目

开启 Web 支持
 flutter config --enable-web
创建项目
flutter create yourapp

“yourapp”为你的项目名

对已有的应用添加 Web 支持

1.开启Web支持（如上）
flutter config --enable-web

输出log：

Setting “enable-web” value to “true”.

You may need to restart any open editors for them to read new settings.

重启AndroidStudio

2.创建web 目录
flutter create .

会在项目目录下创建web 目录

3.运行应用在浏览器中
//谷歌浏览器中运行
flutter run -d chrome

如果没有其他连接的设备，那么 -d chrome 是可选的

Notice：我在flutter version 2.0.0中 运行命令行并不能运行成功

然后在Device下拉菜单中(device selected)，选择 Chrome (web)，然后点击运行，应用就会在 Chrome 中打开

使用 build 命令

运行下面命令以生成发行版构建

flutter build web
flutter创建web应用全部命令
weixin_39553363的博客
03-23 612
1.切换频道 $ flutter channel beta 2.更新到最新版本 $ flutter upgrade 3.启用网络 $ flutter config --enable-web 4.检查设备 $ flutter devices 5.创建web项目 $ flutter create myapp 6.进入项目目录 $ cd myapp 7.在浏览器上预览效果 $ flut...
使用Flutter构建响应式Web应用
EipGemms的博客
10-08 295
Flutter是一种跨平台的应用程序开发框架，它可以让开发者使用单一的代码库构建高性能的移动应用、Web应用和桌面应用。本文将介绍如何使用Flutter构建一个简单的响应式Web应用，并提供相应的源代码。
flutter Web打包
坚果的博客
09-28 6266
1. 创建web文件夹 输入下面的命令创建web文件 flutter create . 然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图 2. 打包web版本 我们知道要给android手机用,需要打包apk出来, 要给iPhone手机用,需要打包ipa出来;同样的道理要给浏览器用,也需要打包web相关代码. flutter build web --web-renderer html flutter build web flutter build web
用flutter构建web应用程序
keny-大成的博客
05-31 421
用flatter构建 为web支持配置颤振工具。 使用web支持创建新项目。 使用web支持运行新项目。 使用web支持构建应用程序。 向现有项目添加web支持。 web应用程序
Flutter Web实战：登录页面开发全流程
最新发布
weixin_42591908的博客
09-12 1368
Flutter Web是Google推出的Flutter框架在Web平台的延伸，它使得开发者能够使用同一套Dart代码库，同时构建高性能、高保真的Web应用。其核心优势在于“一次编写，多端运行”的跨平台能力，极大提升了开发效率并降低了维护成本。相较于移动端Flutter应用，Flutter Web在渲染机制、性能优化和浏览器兼容性方面有所不同，但也保持了高度一致的API与开发体验。本章将为读者奠定扎实的理论基础，帮助理解后续章节中涉及的登录页面构建与优化实践。
Flutter开发之——构建Web应用
我的博客
01-19 1691
一 概述 之前介绍过使用Flutter构建移动应用，本文介绍使用Flutter构建Web应用 配置flutter sdk以支持Web 在新项目中开启Flutter Web 创建一个支持Web运行的新应用 向已有的应用添加Web支持 二 配置flutter 工具以支持Web 在创建支持Web的Flutter应用前，你需要安装下面的应用： Flutter SDK(安装并添加到环境path变量中) 浏览器(谷歌、Edge)，调试Web应用时，需要浏览器支持 三 在新项目中开启Flutter Web 3.
flutter创建一个web应用
keny-大成的博客
03-23 585
创建一个支持 web 的新项目 注意： 当前，你需要 master 或者 dev 渠道的的 Flutter SDK 来获取 Web 支持：这里我们假定你已经安装了 Flutter 命令行工具，运行下面的命令需要安装 master 渠道最新的 SDK 噢： 你可以通过以下步骤创建一个支持 web 的新项目 通过执行下面命令，更新一下支持flutter 可以支持web $ flutter ...
flutter制作博客展示平台，现已支持 Web、macOS 应用、Android 和 iOS
坚果的博客
09-28 770
Flutter Blog Theme using Flutter | Web, macOS, Android, iOS Flutter 最近发布了 Flutter V2.5.1，其性能得到了很大提升，支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外，我们创建了一个具有自定义悬停动画的动画网络菜单。 最后，您将学习如何使用 Flutter 制作响应式应用程序。 预
使用Flutter 创建web项目
Hn的网站都别抢
08-01 1098
环境： 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 For Web 创建和运行Web应用程序
rd_w_csdn的博客
01-16 3287
本文介绍了如何创建Flutter for Web的应用程序
flutter-web-demo：by由Flutter和Dart支持的自适应Web应用程序
02-03
Flutter Web Demo是一个基于Flutter框架和Dart编程语言的项目，旨在展示如何构建可自适应的Web应用程序。这个项目强调了Flutter对于跨平台开发的强大能力，不仅限于原生移动应用，还包括Web平台。以下是关于这个项目...
mayurkagathara.github.io:在Github上部署Flutter和其他Web应用程序
03-14
在GitHub上部署Flutter和其他Web应用程序是一项常见的开发任务，特别是对于那些希望分享、展示或测试自己作品的开发者来说。本文将深入探讨如何利用GitHub Pages服务来托管Flutter应用以及基于JavaScript的Web项目。...
flutterwebdemo基于FlutterDart开发响应式Web应用的示例
08-10
flutter-web-demo ：基于 Flutter/Dart 开发响应式 Web 应用的示例
web-demo:Flutter 2.0 Web演示
03-04
web_demo Flutter 2.0快速重建的一个站点样例 在线预览： : 更多精彩，请关注官方微信公众号：Oldbirds 安装 git clone 安装fvm工具： 运行 $ cd web-demo $ fvm install $ fvm flutter run -d Chrome
Flutter完整开发实战详解 PDF
09-29
Flutter完整开发实战详解 前⾔ ⼀、Dart语⾔和Flutter基础 ⼆、 快速开发实战篇 三、 打包与填坑篇 四、 Redux、主题、国际化 五、 深⼊探索 六、 深⼊Widget原理 七、 深⼊布局原理 ⼋、 实⽤技巧与填坑
Flutter项目中构建Web工程以及发布nginx服务
cj641809386的专栏
09-07 1242
Flutter的beat通道已经支持对web的支持，通过 Web 支持，你可以将使用 Dart 编写的现有 Flutter 代码编译为可以嵌入浏览器，并部署到任何 Web 服务器上，具有客户端体验的 Web 应用。你可以使用 Flutter 的所有功能，而不需要任何浏览器插件。 使用Flutter构建Web应用 1.创建一个支持Web的新项目 如果你不知道自己的FLutter的channel版本，你可以使用flutter channel命令来查看Flutter通道： caojingMBP:~ caojin
Flutter中的Web应用程序开发：构建现代Web应用程序
AI天才研究院
06-29 7680
作者：禅与计算机程序设计艺术 Flutter 中的 Web 应用程序开发：构建现代 Web 应用程序 作为人工智能专家，程序员和软件架构师，CTO，我今天将为大家分享有关 Flutter 中 Web 应用程序开发的见解。在这篇文章中，我们将
flutter开发web项目
热门推荐
haoxuhong的博客
12-20 1万+
让项目支持web ：flutter create . 运行：flutter run -d chrome flutter run -d chrome --web-renderer html 打包：flutter build web --web-renderer html 官方链接：Flutter on the Web 参考视频：构建 Flutter web 应用 (From Mobile App to web App)_哔哩哔哩_bilibili 部署参考链接：「Flutter for Web..
Flutter创建Web例子
keny-大成的博客
03-31 972
1.Flutter Create web例子 Flutter Create webFlutterApp 命令运行 创建webdev环境 flutter packages pub global activate webdev 2.运行webdev命令 webdev 命令集合为 A tool to develop Dart web projects. Usage: webdev ...
flutter开发web应用
08-13
要使用 Flutter 开发 Web 应用程序，需要确保开发环境满足特定要求，并遵循一些关键步骤。以下是详细的指导说明： ### 开发环境准备 首先，确保安装的 Flutter SDK 版本不低于 1.5.4，因为这是官方支持 Web 开发的最低版本。可以通过运行 `flutter upgrade` 命令来更新 Flutter SDK 到最新版本 [^3]。 ### 创建或迁移项目 如果计划从头开始创建一个新的 Flutter Web 应用程序，则可以使用 Flutter 提供的命令行工具生成项目结构。对于已有移动项目的迁移，则需要注意 flutter_web 使用了单独的命名空间，这意味着需要对现有项目进行一定的改造才能使其在 Web 平台上正常运行 [^1]。 ### 配置开发环境 为了测试 Web 应用程序，可以使用 `flutter devices` 命令查看可用设备列表。此命令将列出所有连接的设备，包括用于 Web 测试的虚拟设备，例如 Microsoft Edge 浏览器实例 [^4]。 ### 开发注意事项 Flutter 是一个高性能的跨平台 UI 框架，允许开发者通过单一代码库支持多个平台，包括 iOS、Android 以及通过 flutter_web 支持 Web 平台 [^2]。当开发 Web 应用时，需要注意 flutter_web 当前仍处于实验阶段，因此可能会遇到一些限制或不稳定的情况。 ### 示例代码 以下是一个简单的 Flutter Web 应用示例代码片段，它创建了一个带有按钮的应用，点击按钮时会改变文本内容： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web Demo', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Web App'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } ``` ###
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值