Flutter实战3 --- PC上运行Flutter APP(2)

最新推荐文章于 2024-04-05 05:30:59 发布
最新推荐文章于 2024-04-05 05:30:59 发布
阅读量1k 收藏 18
点赞数 10
分类专栏： 程序员 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78416573/article/details/137389748
版权
  1. Flutter实战1 — 写一个天气查询的APP
  2. Flutter实战2 — 写一个天气查询的APP

因为Flutter除了Andorid、iOS，还可以在PC上运行，所以一直想试试以下在PC上的跨平台效果如何。发现Flutter想在PC上跑起来还不太简单。

现在开始。

1. 开始

这个是支持Flutter在Windows, macOS, and Linux上运行的库：

github.com/google/flut…

接下来将按照这个的指示操作。

2. 在PC上运行example工程

将flutter-desktop-embedding clone到本地，这时需要很重要的一个点：

  • flutter-desktop-embedding的工程要和Flutter SDK的目录在同一级

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在flutter-desktop-embedding/example/macos路径有一个ExampleEmbedder.xcodeproj，双击在xcode中打开，运行后效果如下

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

感觉Flutter在PC上还挺简单的，真是如此吗？？

3. 在PC上运行天气查询APP

接下来，实现在PC上跑通之前写得天气查询APP

3.1 Flutter代码改造

最低0.47元/天 解锁文章
2301_78416573
关注
  • 10
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter在线付款AppUI
08-10
Flutter 在线付款 App UI
Flutter运行
璃殇的博客
11-09 373
flutter如果运行其他人的项目 命令行flutter run之后，如提示cocopods版本过低时，删除iOS-》podfile.lock文件，重新运行
Flutter运行Web应用
wordgg的博客
03-05 1440
将使用Flutter官方提供的github上面的web事例demo运行Web应用。 github下载地址：https://github.com/flutter/samples/tree/master/web 1、下载demo命令： git clone --depth 1 https://github.com/flutter/samples.git 2、进入web目录 cd web 3、切换分支 flutter channel dev 4、更新SDK（可以不用更新，建议更新下。开发.
Flutter Web开发 浏览器运行
jia635的专栏
12-30 2395
新建Flutter 工程，默认只支持Android，iOS，可以通过命令行配置运行Web flutter channel beta 先切到Flutter beta版本 flutter upgrade flutter config --enable-web 运行完--enable-web 命令后重启当前Flutter工程 如果配置成功并且电脑上有Chrome浏览器，在可调试工具即可看到Chrome（web）,选择Chrome然后运行编译便会打开host的Flutter网页 ...
Flutter 安装教程 + 运行教程（附带SDK下载）
热门推荐
李小城的博客
03-07 1万+
Flutter - 极速构建漂亮的原生应用 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 快速开发 富有表现力和灵活的UI 原生性能 1. 工具和相关文档 1.1 相关工具 Windows 7 或更高系统...
Flutter-Chat-App
05-17
【Flutter-Chat-App】是一款基于Flutter框架开发的群聊应用程序，它遵循Codelabs的指导，旨在提供一个学习和实践Flutter开发的平台。Flutter是由Google开发的开源UI工具包，用于构建高性能、高保真度的原生移动应用...
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
Flutter-Blog-App-Firebase
02-05
【Flutter-Blog-App-Firebase】是一个基于Flutter框架开发的博客应用示例，它整合了Firebase作为后端服务，提供了一种高效、跨平台的移动应用开发解决方案。在这个项目中，我们将深入探讨Flutter的组件、状态管理、...
flutter前端 uni-app小程序 springboot停车场管理系统源码
03-27
【APP】: flutter(一套代码直接生成原生Android和ios应用)，既不损失性能，也能降低开发成本。 【小程序/h5/公众号】：uni-app(底层框架Vue)，一套代码直接生成h5(直接部署公众号)，微信小程序，可以打包混合app，...
flutter-notes-app:基于Fluttter的笔记应用程序，支持照片笔记！
05-26
它是使用Dart在Google Flutter Framework之上构建的。 Tizeno可以帮助您创建快速笔记，照片笔记等。 可以更改便笺的颜色，将其标记为已加星标或已存档，创建照片便笺并将其保存在本地，并将所有内容存储在SQLite...
Flutter 安装教程 + 运行教程
qq_43894292的博客
08-31 2274
解压完后根据自己的位置放置，如（D:\flutter）注意请勿将 Flutter 有特殊字符或空格的路径下。请勿将 Flutter 安装在需要高权限的文件夹内，例如 C:\Program Files\。
Flutter真机运行及模拟器运行
WEB前端李志杰
08-02 3123
Flutter环境搭建好了，项目怎么跑起来？ 这篇博客教你如何真机运行及模拟器运行。
Flutter实战3 --- PC上运行Flutter APP(3)
最新发布
2401_84132479的博客
04-05 719
接下来将按照这个的指示操作。
从零开始搭建Flutter环境并运行Demo
qq_36641343的博客
10-25 229
从零开始搭建Flutter环境并运行Demo
【Flutter】打开第三方 Flutter 项目
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-21 935
一、Flutter SDK 自带的示例、 二、使用 Android Studio 打开 Flutter 工程、 三、相关资源
【Flutter原理】Flutter App启动流程分析，图文详解
2301_77118221的博客
03-28 417
这里我们重点关注两步onAttach 内部创建初始化引擎createFlutterView() 创建FlutterView显示到Activity上下面着重一步一步来分析。
Dart 官方开源的在线编辑器，还能跑 Flutter
iOS_开发
09-17 707
????????关注后回复“进群”，拉你进程序员交流群????????作者丨小集来源丨小集（ID：zsxjtip）❝DartPad地址：https://github.com/dart-lang/dart-pad⭐️：1.3k语言：Dart官网：https://dartpad.dev/❞DartPad 是一个免费的开源在线编辑器，可帮助开发人员了解 Dart 和 Flutter。DartPad 最初是由 Dart 工具...
【Flutter】DartPad 终极在线Dart编程环境
Code Metaverse
02-14 609
Dart是一种开源、类型安全且支持热更新的编程语言，用于构建Web、服务器、移动端和桌面应用。
Mac m1配置flutter开发环境
weixin_52827539的博客
11-21 1437
Mac m1配置flutter开发环境
Flutter实战视频-移动电商-48.详细页_详情和评论的切换
05-27
很高兴为您解答问题！关于Flutter实战视频-移动电商-48.详细页_详情和评论的切换，我可以提供以下解答： 在Flutter实战视频-移动电商-48中，详细页的详情和评论的切换是通过一个TabBar实现的。具体来说，通过在AppBar中添加一个TabBar来实现不同页面之间的切换。在这个TabBar中，我们可以添加两个Tab，分别为“详情”和“评论”，并分别对应两个页面。当用户点击不同的Tab时，就可以切换到不同的页面。 在Flutter中，TabBar可以使用DefaultTabController和TabBarView来实现。DefaultTabController是一个Widget，它可以管理TabBar和TabBarView之间的关系。TabBarView则是一个Widget，它可以显示不同的页面。 具体实现方法如下： ```dart class DetailPage extends StatefulWidget { @override _DetailPageState createState() => _DetailPageState(); } class _DetailPageState extends State<DetailPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品详情'), bottom: TabBar( tabs: <Widget>[ Tab( text: '详情', ), Tab( text: '评论', ), ], ), ), body: DefaultTabController( length: 2, child: TabBarView( children: <Widget>[ // 详情页面 DetailWidget(), // 评论页面 CommentWidget(), ], ), ), ); } } ``` 在上面的代码中，我们首先创建了一个AppBar，并在其中添加了一个TabBar。然后，在Scaffold的body中，我们创建了一个DefaultTabController，并将其length设为2，即有两个页面。最后，我们在TabBarView中添加了两个Widget，即DetailWidget和CommentWidget，分别对应详情页面和评论页面。 希望这个解答能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值