flutter 订阅
Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。 展开全文
Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。
信息
推出时间
2015年5月3日 [2]
外文名
Flutter [1]
Flutter框架概况
Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台 [3]  。Flutter 可以方便的加入现有的工程中。在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter是完全免费、开源的。它也是构建未来的 Google Fuchsia 应用的主要方式。Flutter 组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter 会对比之前的描述, 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
收起全文
精华内容
下载资源
问答
  • flutter
    千次阅读 多人点赞
    2019-09-27 11:00:21

    PS:本文会随着自己学习和编写项目过程中、一直持续跟新

    一、简介

    Flutter 是谷歌2018年发布的跨平台移动UI框架。作为谷歌的开源移动UI框架,Flutter可以快速在iOS和Android上构建高质量的原生用户界面,2019年,Google I/O 大会宣布了 flutter 支持 web 开发。flutter 目前的目的就是全平台开发,一套代码同时运行在 iOS 、Android、web和桌面端。Flutter 作为 Google 最新推出的原生应用解决方案,其目标是让创建原生移动应用更快速、简单,且经有很多公司在应用。

     

    二、资源

    github:https://github.com/flutter/flutter
    官网:https://flutter.dev/
    中文官网:https://flutter-io.cn/
    中文文档:https://flutter-io.cn/docs

    Flutter下载地址:https://flutter.dev/docs/get-started/install(https://flutter.dev/docs/get-started/install/windows)
    中国必读(镜像):https://flutter.dev/community/china
    实操一下:https://flutter.dev/docs/get-started/test-drive

    VS Code 插件安装:https://flutter.dev/docs/get-started/editor?tab=vscode
    VS Code 中 Flutter 插件的使用文档:https://flutter.dev/docs/development/tools/vs-code

    视频教程:http://video.mobiletrain.org/course/index/courseId/655

    视频教程:http://jspang.com/posts/     标签选择 Flutter

    Flutter的优秀学习资源汇总:https://github.com/Solido/awesome-flutter

    Flutter 学习的一些基础知识 https://book.flutterchina.club/chapter1/chapter1/chapter1/install_flutter.html

    三、学习步骤

    1.Dart 语言上手
    2.Flutter UI开发
    3.数据交互
    4.打包发布

    四、flutter学习中的一些功能点的概要

    状态管理、

    五、flutter学习一些记录

    1.0 colum  中包含tabBar 和tabBarView 出现页面白屏

       通过给tabBar加固定高度和  tabBarView嵌套Expand解决; 目前不知道原因

    2.0  三种方式实现页面切换后保持原页面状态

     IndexedStack、Offstage、AutomaticKeepAliveClientMixin三种方式实现

    3.0 flutter 中 使用_来作为参数 

      匿名函数作为参数aa((){}) 参数名是可以随便取名字的 所以可以用下划线代替(如果这个参数方法内没有使用的话)

    4.0 android studio 函数有参数是带参数匿名函数  编辑器的ctrl +p 提示不能提示到
      addPostFrameCallback((_) async {
    //在下划线那个位子就提示不到 });

    5.0 图片背景和边框圆角的设置

    可以使用Container的 decoration属性 选择BoxDecoration()来完成背景设置 和borderRadius完成边框圆角设置

    6.0 文本输入控件 textFile 有很多的问题

      border使用OutlineInputBorder会出现内容多了以后只显示一半的问题 ,使用UnderlineInputBorder解决

      内容的居中等等需要使用contentPadding来解决

    7.0 关于宽度可以这样设置 使得填充满 宽度或者高度

    width: double.infinity,  //maxFinite、minPositive、nan、negativeInfinity

    8.0 监听事件  空参数方法  传入method()这个就不行  传入method就行

    9.0 关于dio 接口请求后解析 报错 Flutter FormatException: Unexpected character (at character 2)

     这个是因为 dio  设置的responeType有问题 

    BaseOptions options = new BaseOptions(
        baseUrl: "https://****/api/", connectTimeout: 5000, receiveTimeout: 3000);
    options.responseType = ResponseType.plain;//设置为这个就可以 总共三种 json plain(文本) stream
    Dio dio = new Dio(options);

    10.0 关于状态管理 Provider 

    https://juejin.im/post/5d414d08f265da03b8103c12#heading-34 这篇文章讲解是最好的  这篇也可以参考   MultiProvider使用

    10.0 Container设置里固定的大小  内面内容设置了一个固定的比外层小的宽高值  但是内层还是会伸缩到外层大小

    解决方法   设置外层Container的 aligment属性后就解决

    11.0 row 中包含text文本 文本多的时候会出现超出屏幕的现象 

    使用expand 包含text 这样就能拿够自动换行

    12.0 输入法键盘弹出状态时 pop页面  会出现页面溢出的问题

    解决办法是   在pop页面的按钮操作前先关闭键盘

    FocusScope.of(context).requestFocus(FocusNode());//关闭键盘  防止pop页面时出现页面溢出

    13.0 colum 中包裹lsitviev等可滚动的控件时  会出现白屏

    解决方法:为可滚动的控件添加一个expand

    14.0 flutter去掉Container的默认边线问题  PS:Listview同样存在默认padding问题  手动设置padding为0解决

    解决办法:border: Border(bottom: BorderSide(color: Color(0XFF302F4F),width: 0.0)) width其实没啥用 主要还是修改颜色

    15.0 flutter 吸顶功能和 Slivers大家族

    吸顶一  吸顶二  Slivers

     

     

     

    更多相关内容
  • Flutter基础

    千人学习 2020-04-06 15:55:55
    本课程主要介绍Flutter的核心知识。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。
  • flutter仿抖音首页面效果

    千人学习 2020-03-14 11:09:51
    本课程将使用 flutter 实现类似抖音首页面效果  通过 TabBar 与 TabBarView 结合使用 实现仿抖音APP首页面 关注 与推荐 页面左右滑动ui构建 通过 PageView 来实现上下整屏切换效果 使用 VideoPlayer组件...
  • flutter中网络请求dio使用分析

    千人学习 2020-02-28 11:22:45
    本课程讲述在 flutter 跨平台开发中,网络请求构架 dio 的基本使用,有如下内容分析  flutter 中 dio get、post、put 请求  flutter 异步请求方式使用与封装接口回调 dio 设置网络代理  dio 设置拦截...
  • Flutter 完全手册.zip

    2019-06-26 11:38:46
    flutter 跨平台开发,精华版文档,比官方文档更牛逼
  • 2022 年 Flutter 适合我吗?Flutter VS Other 量化对比

    千次阅读 热门讨论 2022-04-09 17:31:04
    Hello 大家好,我是《Flutter 开发实战详解》的作者,Github GSY 系列开源项目的负责人郭树煜,比如 gsy_github_app_flutter 、GSYVideoPlayer 等的项目 。 看到这个题目大家应该知道,今天这个主题并不是纯粹的...

    Hello 大家好,我是《Flutter 开发实战详解》的作者,Github GSY 系列开源项目的负责人郭树煜,比如 gsy_github_app_flutter 、GSYVideoPlayer 等的项目 。

    看到这个题目大家应该知道,今天这个主题并不是纯粹的技术内容分享,可以说还有点吃力不讨好,其实我很少分享这类主题,不过最近觉得有必要做这么一个算是科普向的内容吧。

    Flutter 的现状

    我是在 2017年左右接触的 Flutter ,说来起来有趣,那时候因为我需要做一场关于跨平台技术的内部分享,主要目的是给公司其他事业部推 React Native 框架,好巧不巧地那时候刚好看到 Flutter ,就被我当作凑数的“添头”给加到分享里,自此我就开始了和 Flutter 之间的故事。

    回到正题,Flutter 开源至今其实已经将近 7 年的时间,如今在 2022 年看来,Flutter 已经是不再是以前小众的跨平台框架了

    image-20220222115737486

    如图所示,截止我 2 月份截图时,可以看到如今的 Flutter 已经有高达 137k 的 star , 10k+ Open 和 50k+ Closed 的 issue 也足以说明 Flutter 社区和用户的活跃度。

    从官方公布的数据上, Flutter 已经基本超过其他跨平台框架,成为最受欢迎的移动端跨平台开发工具,截至 2022 年 2 月,有近 50 万个应用程序使用了 Flutter

    如图所示,去年下半旬的数据调查中,Flutter 也成为了排名第一的“被使用”和“被喜爱”的跨平台框架,可以看到 Flutter 在 2019 到 2022 有了很明显的增长,有接近 42% 的跨平台开发者会使用 Flutter。

    image-20220222115623672

    image-20220222115549701

    其实在去年和前年,我也做过一些简单的统计:

    • 2020 年 52 个样本中有 19 个 App 里出现了 Flutter;
    • 2021 年 46 个样本中有 24 个 App 里出现了 Flutter;

    本次基于 2022 年 2 月 22 号,在对比了 57 款常用 App 之后得到的数据:

    FlutterReact NativeWeex__________________没有使用跨平台_____________________________________________
    2724513
    链家、转转、掘金、中国大学 MOOC、同花顺、饿了么、凤凰新闻、微信、微视、哔哩哔哩漫画、腾讯课堂、企业微信、学习强国、闲鱼、携程旅行、腾讯会议、微博、贝壳找房、百度网盘、 WPS Office、唯品会、美团众包美团外卖商家版UC、QQ(libmxflutter),小米运动优酷视频美团 、美团众包美团外卖商家版 、美团外卖、爱奇艺、中国大学 MOOC 、脉脉 、小红书、安居客、得物、58同城、微信读书、汽车之家、飞书、喜马拉雅、去哪儿旅行、菜鸟、京东、快手、携程、米家UC小米运动优酷视频UC闲鱼微博米家、优酷视频QQ音乐、Boss直聘、今日头条、流利说、知乎、腾讯新闻、财经社、酷狗音乐、拼多多、抖音、起点、什么值得买、百度地图

    这些数据来源于 Android 的 Apk ,以是否存在 libflutter.solibreactnativejni.solibweexcore.so 等动态库为依据,如果项目使用了插件化下发可能会被忽略。

    可以看到 Flutter 和 React Native 的出现都接近 50%,而 Weex 的占有率已经很低,另外在这个小样本下,可以看到现在大多数 App 或多或少都可能带有一些跨平台框架的趋势

    同时,加粗部分的 App 因为业务需要, 在应用内使用了不止一种的跨平台框架,比如UC、闲鱼等。

    而在官方去年的 Q4 数据调查里,在过去 6 个月中,分别有 72% 和 91% 的开发者使用 Flutter 为 iOS 和 Android 开发 App

    0*TERDonM4zc_kafRm

    再看一份数据,是 Dart 的第三方插件托管平台 pub.dev 上的数据,基于 2022-02-22 的数据:

    All23495 packages
    Flutter21714 packages
    Android/iOS20352 packages
    Web12584 packages
    PC14314 packages
    Null safety12615 packages

    目前大概有 2.3 万个公开的第三方支持包托管在 pub 上,其中支持 Flutter 的有 2.1 万个,可以看出 Dart 语言的用户基本都是来源于 Flutter 。

    另外从数据上看大部分的库都支持 Android 和 iOS ,而对于 Web 和 PC 的支持接近60% ,而比较意外的是,目前支持 Null safety 的包也就接近60%,也就是还有 40% 多的包还停留在较老的版本上。

    而在官方的 Q4 调查里可以看到,使用 Flutter 作为主要工作的比例在逐步提高

    0_Zw_zyVq5CfP7Y09o

    最后在聊一聊 Flutter 官方对于 Flutter 一直坚持一个理念:

    一个 SDK 再优秀,如果只有少部分人在使用,那它也不能体现价值;而一个 SDK 即使平庸,但是有大量开发者使用,那也会拥有一个健康繁荣的生态氛围,这样使用框架的人才能从中受益

    补充一句,你知道调查里大家最不满意的 Flutter 的是哪个方面吗?

    是文本编辑!Q4调查里,对文本编辑功能的满意度从 82.3%(单行)和 82.2%(过滤和格式化)下降到 69.6%(多行)和 66.6%(富文本编辑器),目前多编辑体验和输入富文本支持上,确实不是特别友好。

    Flutter VS Other

    聊完 Flutter 的现状,我们继续讨论 Flutter 和其他框架的一些直观对比。

    实现原理

    这部分内容其实分享过很多次,简单说一下,首先对比它们的实现原理,如下图所示,可以看到:

    • 对于原生 Android 或者 Compose 而言,是原生代码经过 skia 最后到 GPU 完成渲染绘制,Android 原生系统本身自带了 skia;

    • 对于 Flutter 而言,Dart 代码里的控件经过 skia 最后到 GPU 完成渲染绘制,这里在 Andriod 上使用的系统的 skia ,而在 iOS 上使用的是打包到项目里的 skia ;

    • 对于 ReactNative/Weex 等类似的项目,它们是运行在各自的 JS 引擎里面,最后通过映射为原生的控件,利用原生的渲染能力进行渲染

    • 对于 uni-app 等这类 Hybird 的跨平台框架,使用的主要就是 WebView 的渲染能力;(不讨论开启weex情况)

    首先看到,从理论上来说, Flutter 在实现上是最接近原生,因为从实现路径上基本是一致的,而 RN/Weex 相对会差一些,而 uni-app 通过 WebView 的渲染会是最末

    但是对于性能问题,事实上很多时候性能门槛不在于框架,而在于开发者,我见过用 Cordova 开发的 App 性能和体验都调教得很不错,我记得有一次大会分享和支付宝的大佬聊过,支付宝也使用了很多 H5 的 Hybird 技术,得益于 UC 的自研内核,在性能体验上一直还挺不错。

    构建大小

    接着我们对比应用构建的大小,这里主要对比 Android ,因为 iOS 上应用的大小似乎越来越没人在意,比如 QQ 这个极端的例子:

    image-20220225113714959

    回到问题上,关于应用大小问题,之前恰好看到有多人说过:

    “Compose 上 Kotlin/JVM 为 JVM 和 Android 平台生成 jar/aar 文件、通过 Kotlin/Native 为 IOS 平台生成 framework 文件、通过 Kotlin/JS 为 Web 平台生成 JavaScript 文件,最终调用的还是原生 API,这使得采用 Compose Multiplatform 不会导致性能损耗,且不会像 Flutter 那样明显增大应用体积。”

    是的,从实现上看 Flutter 在实现上确实应该比 Compose 占据更多体积,但是真实情况是怎么样呢?

    首先我们创建几个空项目,然后打包时只保留 arm64-v8a 相关的动态库,因为一般情况下上架也只会保留其中一种 so 库。

    在我们不写任何代码的情况下,构建出 Android 的 Release 包,得到如下结果:

    • Flutter

    l37e90013d3143b59b2fedac8175846c2-s-mab43156a06c705c0e724893593dff285

    • React Native

    l86641a7d82e2feff1f984855ecbd562c-s-mdb88514a3334653b9e61c27c51634605

    • Compose

    l6125476d649868bb69a29a009574a232-s-mf07265732fba4b70ab8330b8014db858

    • 原生 Android

    l64e110c95184cd1d58dc061c7a37337f-s-m7042d4089e4705f94ae59f9477189827

    可以看到 :

    • React Native 的空包最大,主要体积来自于其内部的各种动态库,比如 JSCore ;
    • Flutter 次之,主要体积来也是自于其内部的动态库,比如 Flutter 的 framework;
    • Compose 的体积和原生相当接近,主要内容来自于 classes 文件;当然这里没有混淆和压缩,混淆和压缩后可以小很多;

    从结果上看空项目下确实是 Flutter 比 Compose 所占据的体积更大,但是这里有一点需要注意的是:

    • 单纯 Flutter 开发下,主要的应用体积会来自 libapp.so ,这部分代码是经过 AOT 编译后的 Native 二进制代码;
    • 而 Compose 的体积增长主要来自于 classes 文件,这部分的代码增长需要通过混淆等来压缩;

    额外提一点,大家可能会好奇 Compose 编译后是怎么完成布局渲染

    这里简单介绍下,Compose 里的控件和原生控件并不是一个体系,大家如果去看编译后的内容,就会发现例如 BOX 这样的控件在编译后是通过 ComposerKtBoxKt 等的 framework 实现来完成的布局与绘制。

    image-20220223163739226

    所以 Compose 编译后不是转化为原生的 Android 上的 View 去显示,而是依赖于平台的 Canvas ,在这点上和 Flutter 有点相似,简单地说可以理解为 Compose 是全新的一套 View 。

    另外友情提示:虽然是全新的 View ,但是 Compose 的组件在 Android 上是可以显示了布局边界。

    回顾到体积的问题上,因为我恰好开源有一些列 GSY 项目,它们实现的业务逻辑十分相似,所以都打包成 Release 模式之后,我们对比它们的体积大小:

    • Flutter

    ld53439aaeaa21568253c98480767caee-s-m1c224ff23fb985b1bded376f0cceebdc

    • React Native

    lca0d0a439e3b9d18d0195521fad90c14-s-m7fdc781bd60e584b0c161115fa824f43

    • 原生 Android

    le2f6c0258c501a6fdae93b47deff024c-s-mc5ea88d982f7d79299b1b0391b7e95ab

    因为我目前还没有 Compose 的项目,所以这里以原生作为对比,可以看到:

    • Flutter 项目从空的 5.7 M 变成了 9.8M ,增长了 4.1 M 的大小;
    • React Native 项目从 9.4 M 变成了 12.7M,增长了 3.4 M 的大小;
    • 原生项目从 3.2 M 变成了 9.3 M ,增长了 6.1 M 的大小;

    虽然不精准,但是可以看到在大致相同的业务场景下, Flutter 和原生项目的总大小反而相差不大,而原生项目的增加其实比 Flutter 更显著一些

    但是这里的前提是原生不开启压缩和混淆,如果开启压缩和混淆之后,如下图所示可以看到体积发生了变化,体积从 9.3M 变成了 6.4 M ,所以大致上可以看出,在开启混淆和压缩之后,原生 App 体积增长和 Flutter 差异不会太大

    image-20220223172138586

    另外,这里我找了一个网上的纯 Compose 做了测试,在开启混淆和压缩后,Compose 体积的大小变化就十分显著:从 9.6 M 变成了 2.4 M ,这得益于 Compose 里的代码基本都是可以被混淆的

    image-20220223170138121

    image-20220223170242884

    所以得到结论:

    • 在开启了压缩之后的 Compose ,体积确确实实会比 Flutter 更小更有优势,这里的优势来源于 classes 的压缩效率
    • React Native 的体积一般情况下都会比 Flutter 更大,同理 Weex 也类似;

    当然这个也不是绝对的,体积大小有时候也和开发者的习惯有关系,比如某天我就在群里刚好看到,某个 App 的 Flutter 业务动态库居然可以高达 77.4 M 。

    lb47319abc6776b6ac76d45775ecfa7e8-s-m0f2c227b7d605d6930401a084bd16170

    这是什么概念?一般情况下 10M - 15M 就是普通中小型 App 的 Flutter 动态库大小 ,而 大型 APP 一般也会控制在 20M - 35M 之间,就算是很大的体积了,例如 UC 也就是 35 M 、企业微信 28.9M 的水平。

    lf6f59898fbe0c6b11639e81c92796155-s-m5f015f612b387f867b36de285a780d88

    le0e42c9311522a26d2a83afda916b3db-s-m1548598cff0bb0080caf643514588d90

    所以体积大小上,更多是开发者的主观控制,也和你是否开启混淆和压缩有关系,主要介绍这个是让大家对不同项目的打包产物有个直观的认识,从而对选择哪种开发框架提供一个判断的依据。

    构建过程

    接下来聊聊构建过程,为什么聊这个,因为对于新手来说,构建过程的问题是一个很容易放弃的过程。

    如下图所示就是非原生开发在运行 Flutter 时经常可以遇到的问题:

    l9d17062e9171bfc73b423f52f22bae27-s-m908dc799447e36c1a7c8ca7275416992

    如果你看到运行后一直停留在 assembleDebug 阶段没有进入下一步,那这时候其实是 Android 在通过网络下载一些环境依赖,比如 Gradle SDK、 aar 库等这些运行所需的包,而这个过程通过 flutter run 或者 idea 运行是看不出来进度的,你只有进入 andorid/ 目录下执行 ./gradlew assembleDebug 就可以看到类似的进度:

    l0d886e19d6ba2c3eca279cea12c62628-s-me77c94c2fa3e28791919d0d3153efc9f

    例如在 Flutter 官方 Q4 的调查里,在发布应用程序时,需要处理 Xcode (iOS) 和 Gradle (Android) 是最常见的问题,为什么说这个? 首先这里可以看出一点,对原生平台的不熟悉会是使用跨平台开发的一个痛点

    0_3MXILeNbFbIFagLu

    0_qtLcSyZO68tuY6Gk

    当然,在对比所有跨平台开发的这个环节里, Flutter 虽然不能说是最好,但是 React Native 绝对是最拉胯的,因为不管是 Weex 还是 React Native , node_module 黑洞一直都是头痛的问题:

    image-20220223173738326

    举个例子,React Native 项目的 node_module 黑洞,经常导致了它在环境安装和运行上会给你“惊喜”,各种丰富的插件和工具,在实用的同时又成了臃肿的坑,比如这是我前段时间久违需要处理一个 React Native 项目时遇到的问题:

    l44f7689357e4deb77b7c5019177f3442-s-m2fc075a1dd990c3aaabc19acb201f279

    lc29a1742b1876eea0deee1c895d05a1a-s-m1d64d4caf0ea69d9a76e350e370f46de

    依赖中的依赖,各种库的版本所需的 node 环境不同,需要我从中平衡出一个合适的版本。当然这不是最麻烦的,最麻烦的是在电脑 A 上运行成功之后,在 B 电脑 npm 之后发现无法运行的问题,相信这是每个 React Native 开发的必修课。

    从前端开发角度,比如扁平化依赖,当然扁平化依赖的展开后依赖深度就变成了数量很可观的文件目录,依赖结构变得就不直观了,当然现在的 npm ,pnpm 工具都有了新的优化,

    相反 Flutter 在这方面就轻量很多,目前 Dart 的 pub 包层级很浅,路径相对清晰,这也是我觉得在这方面 Flutter 基本上比 React Native 更舒服的原因,所以在原生环境依赖复杂度一致的情况下,Flutter 确实比 RN 更容易进入 hello world

    Flutter & Compose

    最后聊聊 Flutter 和 Compose 之间的对比。

    相信大家对于 Flutter 和 React Native 之间的对比看得多了,因为 React Native 发布至今已经很久了,并且 Flutter 和 React Native 之间是不同公司在维护 ,而对于 Flutter 和 Compose ,它们都是谷歌开源的项目,并且都在支持多平台,那它们之间有什么不同?应该如何选择?

    首先提一个题外话:前端有 npm 、Flutter 有 pub 、iOS 有 cocoaPods,你可以通过它们的官网搜索你想要的库,查看它们的热度,版本,兼容和使用量等等信息,但是 Android 呢?

    Android 的 Gradle 是不是缺少了这样一个便捷的存在,以至于我们只能在 Github 通过关键字去检索,而这个影响其实也渗透到 Compose 里,这对 Compose 在跨平台发展上是一个问题。

    首先谷歌官方的定义,Compose 是 Android 的现代原生界面工具包,而且正如前面我们介绍的,它是一套全新的 UI ,所以 Compose 是有自己的平台,也就是 Android,那是它的主场

    从可以看官方的 路线图 可以看出来, 谷歌对 Compose 的经历主要都是集中在 Android 原生平台,而 Compose Multiplatform 是由 JetBrains 维护的 compose-jb 来实现。

    Flutter 没有自己的平台 ,它是一个跨多平台的 UI 框架,它出生就是为了多平台而生,从目前支持的 Android、iOS、Web 、Window 都发布了正式版支持,而 Linux 和 MacOS 估计也不远了。

    所以这是它们直接最大的区别之一:Compose 是谷歌为 Android 设计的全新 UI 框架,并且 JetBrains 把它拓展到支持跨平台,而 Flutter 主要就是为了跨平台而生

    虽然都支持跨平台,但是二者之间也是有很大差异,如图所示是它们实现上的不同:

    image-20220223174643400

    在实现上的差异是: Flutter 对外是通过一套官方的 Framework 来支持多平台,而 Compose 目前是通过多个模块不同实现来支持多平台

    Flutter 不用说,就是通过编译时不同的命令去生成不同平台的代码,这期间统一有 Flutter framework 来完成输出,而目前 Compose 在 Web 、Desktop 和 Mobile 上的实现逻辑是并不一定能通用的,特别是 Web。

    Compose 目前在 iOS 还没有正式的支持,虽然可以通过一些方式支持,但是还不是特别方便,而在 Web 上 Compose 需要使用和导入的包也是具备特殊化,反而是 Mobile 和 Desktop 之间反而是能共用 compose-ui 的内容。

    举个例子,在 compose-jb 里 对 Web 的支持代码如下,可以看到导入的和使用的控件都具备它自己的特殊性。

    import org.jetbrains.compose.web.dom.*
    import org.jetbrains.compose.web.css.*
    
    fun main() {
        var count: Int by mutableStateOf(0)
    
        renderComposable(rootElementId = "root") {
            Div({ style { padding(25.px) } }) {
                Button(attrs = {
                    onClick { count -= 1 }
                }) {
                    Text("-")
                }
    
                Span({ style { padding(15.px) } }) {
                    Text("$count")
                }
    
                Button(attrs = {
                    onClick { count += 1 }
                }) {
                    Text("+")
                }
            }
        }
    }
    

    所以对于 Compose 来说,更多像是:你学会了这个框架,然后就具备了写 Web 和 Desktop 的能力;而对于 Flutter 来说它在跨平台的体验会更好。

    所以从我理解上是:

    • Compose 是 Jetpack 系列的全新 UI 库,主要是被应用到 Android 界面开发,它就是为了重新定义 Android 上 UI 的编写方式, 所以你也可以选择不用,用不用都能开发 Android 的 UI,但是如果你继续在Android 上深耕,那么你最好还是要学会
    • Flutter 的未来在于多平台,更稳定可靠的多平台 UI 框架。如果你的路线方向不是大前端或者多端开发者,那你可以不会也没关系。

    而从使用这角度,不管你是先学会 Compose 还是先学会 Flutter,对于你掌握另外一项技能都有帮助,相当于学会一种就等于学会另一种的 70% :

    • 如果你是原生开发,还没接触过 Flutter , 那先去学 Compose ,这对你的 Android 生涯更有帮助,然后再学 Flutter 也不难。
    • 如果你已经在使用或者学习 Flutter ,那么请继续深造,不必因为担心 Compose 而停滞不前,当你掌握了 Flutter 后其实离 Compose 也不远了。

    对比了 Flutter 和 Conpose 的很多设计理念和源码,他们在实现上的相似度很高。

    当然,跨平台之所以是跨平台,首先就是要有对应原生平台的存在, 很多原生平台的问题都需要回归到平台去解决,那些喜欢吹 xxx 制霸原生要凉的节奏,仅仅是因为“你的焦虑会成为它们的利润”,没有了平台还要跨平台干嘛?

    一些见解

    最后简单聊聊我的一些见解。

    跨平台的底层逻辑

    在 Flutter 之前,移动端跨平台的底层逻辑无非两种:

    • 一种是靠 WebView 跨平台;
    • 一种是靠代理原生控件跨平台;

    所以早期的移动端跨平台控件一开始就 Cordova 、Ionic 等这些框架,它们的目的就是将前端 H5 的能力拓展到 App 端,让前端开发能力也可以方便开发 Android 和 iOS 应用,那时候的口号我记得是:write Once, run everywhere

    后来,得益于 React 的盛行,React Native 开辟了新的逻辑:用前端的方式去写原生 App ,通过把 JS 控件转化为原生控件进行渲染,让移动端跨平台的性能脱离了 WebView 的限制,性能得到了提升,而 React Native 强调的是 learn once, write everywhere ,也就是你学会了 React ,可以开发网页,也可以开发 App 。

    而到了 Flutter ,它直接摆脱了平台控件的依赖,它自己产出了一套平台无关的控件,通过 GPU 直接渲染出来,这样做的成本无疑是最高的,但是所带来的“解耦”和“所见即所得”无疑是最好的,而 Flutter 的口号是 Build apps for any screen

    但是如果是放到真实应用场景上,不是说 Flutter 就是最优解,而是需要衡量你的业务场景来选择合适你的框架 , 例如:

    • 如果你的业务场景是多框架混合开发,那 Flutter 明显不占据优势;
    • 如果你的场景是需要很强的文本编辑和富文本场景,那 Flutter 明显不占据优势;
    • 如果你的 KPI 对内存占用特别敏感,那 Flutter 也不是特别占据优势;
    • 如果你需要热更新,那 Flutter 也并不占据优势;

    热更新

    既然说到热更新,就简单介绍下热更新的问题。首先 Flutter 官方并不支持热更新,不像 React Native 一样有着十分成熟且通用的 code-push 框架。

    为什么呢?首先 React Native 写的 JS 代码是属于纯脚本文本,就算打包成 bundle 文件它也是纯文本格式,所以通过 code-push 下发一个文本 bundle 并不违规,同时 code-push 也没办法下发打包后的原生平台代码,因为那不合规。

    Flutter 打包后的 AOT 代码属于可执行二进制文件,如果通过热更新逻辑直接下发它,那无疑是违法了苹果 App store 和 Google Play 的政策,那 Flutter 能不能热更新呢?

    答案是可以的,鉴于国内对热更新的“必须性”,也诞生了许多第三方框架,例如:

    MxFlutter(腾信) 、Fair (58 同城) 、 liteApp (企业微信)、Flap (MTFlutter 美团)、flutter_code_push (chimera) 等等。

    它们都不是直接下发编译后的二进制代码,例如:

    • MxFlutter 是用 js/ts 写控件来下发更新;
    • liteApp 是通过 vue 模版来输入;
    • Flap 是对 Dart 的 DSL 和编码过程做处理下发;

    这些做法都需要为了热更新去做一些牺牲,所以本质上 Flutter 在热更新这个问题一直“不友好”。

    当然,如果不上架 Google Play ,那么 Android 热更新 so 动态库本来就不是什么门槛,所以如果你其实可以在 Android 上粗暴地使用已有的插件化方案解决。

    多平台

    最后说一些 Flutter 的多平台,还记得前面说的 Build apps for any screen 吗?Flutter 不也是 write Once, run everywhere 吗?官方不就是支持一套代码直接打包 Android、iOS、Web、Window、MacOS、Linux 这些平台吗?

    从我的经验出发,我想说 write Once, run everywhere 很美好,但是不现实。 Flutter 确实可以一套代码直接运行到所有平台,但是就目前的体验而言,一套代码去适配所有平台的成本远远高于它所带来的便捷。

    先说 Web ,Web 平台在几个平台里最特殊,因为它本身就需要适配 Mobile 端和 PC 端的操作逻辑,而目前Flutter Web :

    • 在 Mobile 端使用的是 HtmlCanvas ,也就是转化为 Web 端的“原生”控件进行渲染,这就带来了耦合和 API 适配的难度;
    • 在 PC 端 Flutter 可以使用 CanvasKit 来进行绘制,但是它使用 wasm 技术目前相对“激进” ,实际无论在体积、SEO、兼容性上都存在问题;

    所以 Flutter Web 目前还不好用,那它发布的稳定版本意义在哪里? 就在于你的代码支持打包成 Web!

    当你在构建完关于 Android 和 iOS 的应用后,你可以把 App 的一些 UI 和业务快速构建出 Web 页面,这就是它的价值所以,你完全不需要从 0 开始去实现这部分以后的内容,在“又不是不能用”的前提下。

    目前比如阿里卖家、美团外卖商家课堂等等项目使用了 Flutter Web

    再说 PC 端,PC 端本身的应用逻辑就和手机差异化很大:鼠标、键盘、可编窗口大小、横屏、滚动等这些方面,其实很难直接可以一套代码兼容,在我的理解更多是在 Android 和 iOS 上的一些控件、动画、UI、列表、业务逻辑等,可以在需要的时候直接在 PC 端上使用。如果真的需要比较好的体验,个人建议还是至少把 PC 和 Mobile 分开两个业务项目实现

    那如果真的要一套代码,有什么好的支持吗 ?也是有的,例如: responsive_framework

    image21

    image22

    展开全文
  • Flutter入门指南

    2019-08-10 04:53:54
    跨平台开发框架 Flutter,用于 Fuchsia、Android、iOS 和 Web 开发,使用 Skia 2D 图形引擎、Dart 语言,GUI 一般采用质感设计(Material Design)。
  • 【老孟FlutterFlutter 2.0 重磅更新

    千次阅读 2021-03-04 23:17:18
    老孟导读:昨天期待已久的 Flutter 2.0 终于发布了,Web 端终于提正了,春季期间我发布的一篇文章,其中的一个预测就是 Web 正式发布,已经实现了,还有一个预测是:2021年将是 Flutter 大跃进的一年,等今年你年底...

    老孟导读:昨天期待已久的 Flutter 2.0 终于发布了,Web 端终于提正了,春季期间我发布的一篇文章,其中的一个预测就是 Web 正式发布,已经实现了,还有一个预测是:2021年将是 Flutter 大跃进的一年,等今年你年底总结的时候,让我们在来验证下这个预测是否应验

    后面几天会陆续发布 Flutter 2.0 更新更加详细的内容更新,敬请关注。

    下面就让我们看看 Flutter 2.0 都有哪些重磅更新,原文链接:https://developers.googleblog.com/2021/03/announcing-flutter-2.html

    我们针对Web,移动端和台式机构建的下一代Flutter

    今天,我们宣布Flutter 2Flutter的重大升级,使开发人员能够为任何平台创建美观,快速且可移植的应用程序。借助Flutter 2,您可以使用相同的代码库将本机应用程序发布到五个操作系统:iOS,Android,Windows,macOS和Linux。以及针对Chrome,Firefox,Safari或Edge等浏览器的Web体验。Flutter甚至可以嵌入到汽车,电视和智能家电中,为环境计算世界提供最普遍和最便携式的体验。

    我们的目标是从根本上改变开发人员对构建应用程序的看法,而不是从您要定位的平台开始,而要从您要创建的体验开始。Flutter使您可以在品牌和设计走在前列的情况下,手工创造美好的体验。Flutter速度很快,可以将源代码编译为机器代码,但是由于我们对有状态的热重装的支持,您仍然可以提高生产力,允许您在应用程序运行时进行更改并立即查看结果。Flutter是开放的,成千上万的贡献者添加了核心框架,并通过软件包生态系统对其进行了扩展。

    今天发布的Flutter 2中,我们将Flutter从移动框架扩展到了可移植框架,释放了您的应用程序,使其可以在各种不同的平台上运行,而几乎没有改变。仅Play商店就已经有超过15万个Flutter应用程序,并且每个应用程序都可以通过Flutter 2免费升级,因为它们现在可以在不重写的情况下扩展到目标台式机和Web。

    来自世界各地的客户正在使用扑,包括流行的应用程序,如微信Grab, Yandex Go, Nubank, Sonos, Fastic, Betterment and realtor.com。在Google,我们依赖Flutter,Google的一千多名工程师正在使用Dart和Flutter构建应用程序。实际上,其中许多产品已经发货,包括Stadia,Google One和Google Nest Hub。

    几个月前,Google Pay为其旗舰移动应用程序改用Flutter,他们已经在生产力和质量上取得了重大进步。通过统一代码库,该团队消除了平台之间的功能差异,并消除了超过一百万行代码。Google Pay还报告说,其工程师的效率要高得多,技术债务大大减少,统一发布流程(如跨iOS和Android的安全性审查和试验)得以实现。

    Flutter on the web

    Flutter 2中最大的公告也许是对Web的生产质量支持。

    Web的早期基础是以document为中心的。但是,Web平台已发展为包含更丰富的平台API,这些API支持具有硬件加速的2D和3D图形以及灵活的布局和绘画API的高度复杂的应用程序。Flutter的Web支持基于这些创新,提供了以应用程序为中心的框架,该框架充分利用了现代Web所提供的所有优势。

    此初始版本特别关注三种应用程序场景:

    • 渐进式Web应用程序(PWA),将Web的访问范围与桌面应用程序的功能结合在一起。
    • 单页应用程序(SPA),一次加载并与Internet服务之间进行数据传输。
    • 将现有的Flutter移动应用程序带到Web上,从而为两种体验启用共享代码。

    在过去的几个月中,在为稳定发布Web支持做准备的同时,我们在性能优化方面取得了许多进展,添加了一个新的由WebAssembly构建的由CanvasKit驱动的渲染引擎。Flutter Plasma是由社区成员Felix Blaschke构建的演示,展示了使用Dart和Flutter构建复杂的Web图形体验的简便性,这些体验也可以在桌面或移动设备上本地运行。

    我们一直在扩展Flutter,以提供最佳的Web平台。最近几个月,我们添加了文本自动填充功能,对地址栏URL和路由的控制以及PWA清单。而且由于台式机浏览器与移动浏览器一样重要,因此我们添加了交互式滚动条和键盘快捷键,增加了台式机模式下的默认内容密度,并增加了屏幕阅读器对Windows,macOS和Chrome OS上可访问性的支持。

    已经提供了使用Flutter构建的Web应用程序的一些示例。在教育工作者中,iRobot以其流行的Root教育机器人而闻名。Flutter对网络的生产支持使iRobot可以利用其现有的教育编程环境并将其移至网络,从而将其可用性扩展到Chromebook和其他浏览器是最佳选择的设备。iRobot的博客文章详细介绍了迄今为止的进展以及为何选择Flutter。

    另一个例子是Rive,Rive为设计师提供了一个强大的工具,可用于创建可发布到任何平台的自定义动画。他们的更新后的Web应用程序现已在Beta中提供,完全由Flutter构建,并且是Flutter在此环境中可以提供的所有服务的一封情书。

    您可以在我们的Medium出版物上的专用博客文章中找到有关Flutter的更多信息。

    台式机,可折叠设备和嵌入式设备上的Flutter 2

    除了传统的移动设备和Web之外,Flutter越来越多地扩展到其他设备类型,我们在今天的主题演讲中重点介绍了三个伙伴关系,这些伙伴关系证明了Flutter的便携性。

    首先,Canonical与我们合作将Flutter带入桌面,工程师们贡献了代码来支持Linux上的开发和部署。在今天的活动中,Ubuntu团队展示了由Flutter重写的新安装程序的早期演示。对于Canonical来说,至关重要的是,它们可以在各种硬件配置上提供坚如磐石而又优美的体验。展望未来,Flutter是Canonical创建的未来台式机和移动应用程序的默认选择

    其次,微软正在继续扩大对Flutter的支持。除了正在进行的合作以在Flutter中提供高质量的Windows支持外,今天微软还将发布对Flutter引擎的支持,以支持新兴的可折叠Android设备。这些设备引入了新的设计模式,其应用程序可以扩展内容或利用双屏特性提供并行体验。在Surface工程团队博客文章中,他们展示了他们的工作,并邀请其他人加入他们,共同完成适用于Surface Duo和其他设备的高质量实现。

    最后,世界上最畅销的汽车制造商丰田汽车宣布了其计划,通过构建由Flutter提供动力的信息娱乐系统,将最佳的数字体验带入车辆。使用Flutter标志着与过去开发车载软件的方式大相径庭。丰田之所以选择Flutter,是因为其高性能和经验的一致性,快速的迭代和开发人员的人机工程学以及智能手机层的触摸机制。通过使用Flutter的embedder API,Toyota可以针对车载系统的独特需求量身定制Flutter。

    我们很高兴继续与丰田和其他公司合作,将Flutter应用于汽车,电视和其他嵌入式设备,我们希望在未来几个月中分享更多示例。

    不断发展的Flutter生态系统

    现在,有超过15,000个Flutter和Dart软件包:来自AmazonMicrosoftAdobeAlibabaeBaySquare等公司;到重要的软件包,如LottieSentrySVG,以及Flutter Favorite软件包,如sign_in_with_applegoogle_fontsgeolocatorsqflite

    今天,我们宣布推出Google移动广告Flutter的测试版,这是一个可与AdMob和AdManager配合使用的新SDK,可提供多种广告格式,包括横幅广告,插页式广告,原生广告和奖励视频广告。我们一直在与几个主要客户一起试用该SDK,例如SuaMúsica(拉丁美洲最大的独立艺术家音乐平台),现在我们准备开放Google移动广告Flutter SDK以便更广泛地采用。

    我们还将宣布对Flutter插件的一些核心Firebase服务进行更新:身份验证,Cloud Firestore,Cloud Functions,Cloud Messaging,Cloud Storage和Crashlytics,包括对可靠的null安全性的支持以及对Cloud Messaging软件包的全面检查。

    Dart:Flutter背后的秘密调味料

    正如我们已经指出的,Flutter 2可移植到许多不同的平台和外形上。轻松过渡到支持Web,桌面和嵌入式的过程很大程度上要归功于Dart,它是针对多平台开发进行了优化的Google编程语言。

    Dart结合了一套独特的功能来构建应用程序:

    • 无意外的可移植性,其编译器可为移动和台式机生成高性能的Intel和ARM机器代码,并为网络提供经过严格优化的JavaScript输出。相同的Flutter框架源代码可编译到所有这些目标。
    • 在桌面和移动设备上进行有状态热重载的迭代开发,以及为现代UI编程的异步,并发模式设计的语言构造。
    • 在所有这些平台上的Google级性能,可靠的null安全性保证了运行时和开发过程中的null约束。

    没有其他语言可以结合所有这些功能。也许这就是为什么Dart是GitHub上发展最快的语言之一的原因。

    Dart 2.12现已发布,是我们自2.0版以来最大的发行版,支持null安全性。可靠的null安全性有可能消除可怕的null引用异常,从而在开发和运行时提供了保证,即如果开发人员明确选择,则类型只能包含null值。最重要的是,此功能不是一项重大更改:您可以按照自己的步调将其逐步添加到代码中,并可以使用迁移工具在准备就绪时为您提供帮助。

    今天的更新还包括FFI稳定实现,使您可以编写可与基于C的API互操作的高性能代码。用Flutter编写的新的集成开发人员和分析器工具;以及许多性能和大小上的改进,这些改进可以进一步升级代码,而无需重新编译即可。有关更多信息,请查看专用的Dart 2.12公告博客文章

    Flutter 2:现已发布

    关于Flutter 2,要说的话远远超出了我们在本文中可以涵盖的范围。实际上,合并的合并请求的原始列表是一个200页的文档!请访问Flutter 2上的独立技术博客,以获取有关许多新功能和性能改进的信息,我们认为这将使现有的Flutter开发人员满意,并立即下载。

    我们还有一个主要的新样本,它展示了刚才提到的所有内容,该样本是与位于加拿大埃德蒙顿的屡获殊荣的设计团队gskinner合作构建的。Flutter Folio是一款剪贴簿应用程序,专为您的所有设备而设计。小屏幕体验是专为捕获内容而设计的;大屏幕支持使用台式机和平板电脑专用的习惯用法进行编辑;网络体验是为共享而量身定制的。所有这些量身定制的经验都共享相同的代码库,该代码库是开源的,可供您阅读。

    如果您还没有尝试过Flutter,我们认为您会发现它对您的应用程序开发体验而言是一次重大升级。在Flutter中,我们提供了一个开放源代码工具包,用于通过单个代码库构建针对移动,台式机,Web和嵌入式设备的美观而快速的应用程序,这些应用程序既可以满足Google的苛刻需求,也可以满足我们客户的需求。

    Flutter是免费的开放源代码。我们很高兴看到使用Flutter 2构建的东西!

    交流

    老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

    添加微信或者公众号领取 《330个控件大全》和 《Flutter 实战》PDF。

    欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

    展开全文
  • 一、Android Studio 中创建 Flutter 项目、 二、命令行创建 Flutter 项目、 三、通过命令行方式运行 Flutter 项目、 四、通过 Android Studio 可视化方式运行 Flutter 项目、 五、通过 Android Studio 可视化方式...





    一、Android Studio 中创建 Flutter 项目



    先安装 Flutter 和 Dart 插件 , 参考 【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 ) 博客 ;

    1 . 选择创建 Flutter 应用 : 在 Android Studio 中 , 菜单栏 -> File -> New Flutter Project , 弹出 Create New Flutter Project 对话框 ; 四个选项分别是创建 Flutter 应用 , Flutter 插件 , Flutter 包 , Flutter Module , 这里需要创建 Flutter 应用 ( Flutter Application ) ;

    在这里插入图片描述

    在这里插入图片描述

    2 . 配置 Project 信息 : 在 Project name 中输入项目名称 , Flutter SDK path 中选择 Flutter SDK 根目录 , Project location 中选择项目创建地址 ; ( 注意项目名称只能是小写字母和下划线组成 )

    在这里插入图片描述


    3 . 设置包名 : 输入一个包名 , 选择 Finish 完成 Flutter 项目创建 ;

    在这里插入图片描述

    等待 Flutter 应用创建完成 : 第一次生成 Flutter 应用 , 建议翻墙完成 , 几分钟完成 ;

    ( 第一次没有翻墙 , 20 分钟没有创建成功 )

    在这里插入图片描述





    二、命令行创建 Flutter 项目



    使用 flutter 命令进行创建 , 使用 flutter 命令前 , 需要先将 flutter SDK 中的 flutter\bin 目录添加到环境变量中 ;

    环境变量设置参考 【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 ) 六、设置 Flutter 环境变量 ( 在系统变量中配置 ) 博客 ;


    命令格式 :

    flutter create 项目名称
    

    这里注意 , 一定要配置正确的源 : 环境变量中配置下面的源 , 否则出错 ;

    PUB_HOSTED_URL : https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn
    

    在这里插入图片描述

    配置镜像源环境变量如果出错 , 此处创建 Flutter 应用肯定出错 ;

    环境变量配置错误问题处理 : 【错误记录】命令行创建 Flutter 应用报错 pub get failed (server unavailable) – attempting retry 1 in 1 second…


    完整过程 :

    执行如下命令 :

    flutter create flutter_cmd
    

    命令行输出 :

    D:\002_Project\002_Android_Learn\Flutter_Cmd>flutter create flutter_cmd
    Creating project flutter_cmd... androidx: true
      flutter_cmd\.gitignore (created)
      flutter_cmd\.idea\libraries\Dart_SDK.xml (created)
      flutter_cmd\.idea\libraries\Flutter_for_Android.xml (created)
      flutter_cmd\.idea\libraries\KotlinJavaRuntime.xml (created)
      flutter_cmd\.idea\modules.xml (created)
      flutter_cmd\.idea\runConfigurations\main_dart.xml (created)
      flutter_cmd\.idea\workspace.xml (created)
      flutter_cmd\.metadata (created)
      flutter_cmd\android\app\build.gradle (created)
      flutter_cmd\android\app\src\main\kotlin\com\example\flutter_cmd\MainActivity.kt (created)
      flutter_cmd\android\build.gradle (created)
      flutter_cmd\android\flutter_cmd_android.iml (created)
      flutter_cmd\android\.gitignore (created)
      flutter_cmd\android\app\src\debug\AndroidManifest.xml (created)
      flutter_cmd\android\app\src\main\AndroidManifest.xml (created)
      flutter_cmd\android\app\src\main\res\drawable\launch_background.xml (created)
      flutter_cmd\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
      flutter_cmd\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
      flutter_cmd\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
      flutter_cmd\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
      flutter_cmd\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
      flutter_cmd\android\app\src\main\res\values\styles.xml (created)
      flutter_cmd\android\app\src\profile\AndroidManifest.xml (created)
      flutter_cmd\android\gradle\wrapper\gradle-wrapper.properties (created)
      flutter_cmd\android\gradle.properties (created)
      flutter_cmd\android\settings.gradle (created)
      flutter_cmd\ios\Runner\AppDelegate.swift (created)
      flutter_cmd\ios\Runner\Runner-Bridging-Header.h (created)
      flutter_cmd\ios\Runner.xcodeproj\project.pbxproj (created)
      flutter_cmd\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
      flutter_cmd\ios\.gitignore (created)
      flutter_cmd\ios\Flutter\AppFrameworkInfo.plist (created)
      flutter_cmd\ios\Flutter\Debug.xcconfig (created)
      flutter_cmd\ios\Flutter\Release.xcconfig (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
      flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
      flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
      flutter_cmd\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
      flutter_cmd\ios\Runner\Base.lproj\Main.storyboard (created)
      flutter_cmd\ios\Runner\Info.plist (created)
      flutter_cmd\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
      flutter_cmd\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
      flutter_cmd\lib\main.dart (created)
      flutter_cmd\flutter_cmd.iml (created)
      flutter_cmd\pubspec.yaml (created)
      flutter_cmd\README.md (created)
      flutter_cmd\test\widget_test.dart (created)
    Running "flutter pub get" in flutter_cmd...                         4.0s
    Wrote 68 files.
    
    All done!
    [] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18363.1139],
        locale zh-CN)
    [] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.3)
    [] Android Studio: is fully installed. (version 4.0)
    [!] IntelliJ IDEA Community Edition: is partially installed; more components are available. (version 2019.3)
    [] Connected device: is fully installed. (1 available)
    
    Run "flutter doctor" for information about installing additional components.
    
    In order to run your application, type:
    
      $ cd flutter_cmd
      $ flutter run
    
    Your application code is in flutter_cmd\lib\main.dart.
    
    
    D:\002_Project\002_Android_Learn\Flutter_Cmd>
    

    在这里插入图片描述





    三、通过命令行方式运行 Flutter 项目



    通过命令行方式运行 Flutter 项目 : 进入 Flutter 项目根目录 , 然后调用 flutter run 命令 , 运行 Flutter 应用 ; 会自动在当前已经连接的设备或模拟器上运行该 Flutter 应用 ;

    在上一小节执行 flutter create flutter_cmd 命令创建 Flutter 应用基础上执行下面的操作 ;

    进入 flutter_cmd 应用根目录 :

    cd flutter_cmd
    

    运行 Flutter 应用 :

    flutter run
    

    执行 flutter run 命令后 , 就会开始构建 Flutter 应用 , 然后运行到当前已连接的设备中 ;

    D:\002_Project\002_Android_Learn\Flutter_Cmd>cd flutter_cmd
    
    D:\002_Project\002_Android_Learn\Flutter_Cmd\flutter_cmd>flutter run
    Launching lib\main.dart on Pixel 2 in debug mode...
    Running Gradle task 'assembleDebug'...
    Running Gradle task 'assembleDebug'... Done                        59.1s
    √ Built build\app\outputs\apk\debug\app-debug.apk.
    Installing build\app\outputs\apk\app.apk...                        14.0s
    D/FlutterActivity(13511): Using the launch theme as normal theme.
    D/FlutterActivityAndFragmentDelegate(13511): Setting up FlutterEngine.
    D/FlutterActivityAndFragmentDelegate(13511): No preferred FlutterEngine was provided. Creating a new FlutterEngine for this FlutterFragment.
    D/FlutterActivityAndFragmentDelegate(13511): Attaching FlutterEngine to the Activity that owns this Fragment.
    D/FlutterView(13511): Attaching to a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@a04e361
    D/FlutterActivityAndFragmentDelegate(13511): Executing Dart entrypoint: main, and sending initial route: /
    Syncing files to device Pixel 2...
     5,251ms (!)
    
    🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
    An Observatory debugger and profiler on Pixel 2 is available at: http://127.0.0.1:59944/K0Rd7AVm9xE=/
    For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
    

    在这里插入图片描述

    手机界面展示 :

    在这里插入图片描述

    如果当前有多个设备或虚拟机连接在本电脑上 , 那么需要使用 flutter run -d '设备ID' 选择对应的设备 ;





    四、通过 Android Studio 可视化方式运行 Flutter 项目



    Android Studio 中选择 菜单栏 / File / Open 选项 ;

    在这里插入图片描述

    在弹出的对话框中 , 选择刚才使用命令行创建的 Flutter 项目 :

    在这里插入图片描述

    选择在 本窗口 “This Window” 中打开 ;

    在这里插入图片描述
    应用打开之后如下 :

    在这里插入图片描述

    点击运行应用按钮 在这里插入图片描述 , 即可在 Android 手机中运行该 Flutter 应用 ;

    在这里插入图片描述

    手机运行效果 :

    在这里插入图片描述





    五、通过 Android Studio 可视化方式运行 Flutter 项目种的 Android 项目



    关掉 Android Studio 开发界面 , 进入到欢迎界面 , 选择打开一个已存在的项目 " Open an Existing Project " 选项 ;

    在这里插入图片描述

    选择已经创建的 Flutter 项目中的 android 目录 ;

    在这里插入图片描述

    刚打开该项目时 , 有一个同步过程 , 需要等待几分钟到十几分钟 , 这里要下载一堆依赖库及插件 , 同步完成后 ,

    Android 基本操作 , 就不再展示了 ;





    六、通过 Xcode 可视化方式运行 Flutter 项目种的 iOS 项目



    需要在 MAC 中的 Xcode 中打开 Flutter 应用下的 iOS 项目 ;





    七、 相关资源



    参考资料 :


    博客源码下载 :

    展开全文
  • 今天,我将全面讲解Android Native端与Flutter端通信的三种交互方式
  • 史上最全flutter开发介绍,flutter开发入门教程,flutter开发入门与实战教程 flutter开发环境搭建全说明,flutter开发示例和DEMO教程,50多页ppt详细讲解。
  • Flutter网络请求

    千次阅读 2022-02-26 23:29:34
    Flutter网络请求经验,仅供参考!!!
  • 译时版本: flutter_native_splash 2.0.2 当应用打开时,在原生应用加载 Flutter 之前会有一个短暂的时间。默认情况下,在此期间,原生应用会显示一个白屏画面。该包自动生成 iOS 、 Android 和 Web 的原生代码来自...
  • 随着Flutter 日渐成熟,使用Flutter 也越来越多,作为一个跨平台的语言,他的展示效果和操作流畅度 可以和原生媲美,这也Flutter 越来越受欢迎的原因。 虽然Flutter 越来越强大,但是总有一些力不从心的时候,现在...
  • Flutter 相关知识点

    千次阅读 2022-03-18 11:06:28
    as安装 dart和flutter插件,执行flutter doctor,到flutter module目录下(如:cd xxx_module),执行flutter pub get flutter clean 3、创建flutter module flutter create -t module my_flutter 其中my_flut
  • Flutter 混合开发

    千次阅读 2021-11-18 09:41:22
    Flutter 混合开发
  • 本次 Flutter 3.0 主要包括 macOS 和 Linux 的稳定版发布,以及相关的性能改进等。原文链接 https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0 又到了发布 Flutter 稳定版本的时候,在三个月前我们...
  • Android 集成 Flutter | 与交互

    千次阅读 2022-01-19 10:50:58
    这篇文章将以如何在 Android 项目中集成 Flutter 和 如何在两者之间进行交互为主要内容。
  • 上一篇《Flutter Android 工程结构及应用层编译源码深入分析》我们分析了 Flutter Android 相关的应用层主要编译流程,其中分析到底层本质命令工具【Flutter SDK 下bin/flutter编译命令分析】小节时只提到,我们执行...
  • Flutter 导航栏AppBar

    万次阅读 多人点赞 2020-09-03 22:35:20
    恢弘志士之气,不宜妄自菲薄。——诸葛亮 People of noble ambition should... } } 参考: Flutter 基础Widgets之AppBar详解 Flutter 来实现一个渐变色的 AppBar Flutter之AppBar属性分析 Flutter AppBar设置渐变色背景
  • 欢迎来到 Flutter 2.10 稳定版本的更新,自上次发布至今还不到两个月,但即使在这么短的时间内,Flutter 2.10 也关闭了 1,843 个 issues,合并了来自全球 155 位贡献者的 1,525 个 PR,所以非常感谢大家这段时间出色...
  • flutter boost

    千次阅读 2022-03-05 10:02:04
    # 第二章、构建基于flutter的混合应用 ## 2.2常见的原生解决方案 ##### 2.2.1 flutter boost演进'' 0.0 双引擎 利用AB两个引擎,对界面进行预加载 解决flutterVC切换时,加载时间长的问题 1.0 共享视图 将页面通过...
  • flutter打包

    千次阅读 2022-04-12 15:55:34
    flutter打包。
  • Flutter开发中,经常会遇到因为更新而引起的报错,而且最近两年Flutter不断完善和更新的速度越来越快,这就需要Flutter相关的开发者时刻保持不断学习的心态,来应对在Flutter开发中遇到的各种突发情况。...
  • Flutter】OC集成Flutter

    千次阅读 2020-07-28 13:49:26
    文章目录最终效果图如下1、创建OC项目2、添加cocoapods3、创建Flutter 工程在OCFlutter项目的相同路径上创建module4、在OCFlutter项目新建Config目录,在这个目录下新建3个配置文件Flutter.xccofig,内容如下:Debug...
  • Flutter混合开发之FlutterFragment

    千次阅读 2022-01-07 17:55:46
    我们知道,原生Android集成Flutter主要有两种方式,一种是创建flutter module,然后以原生module那样依赖;另一种方式是将flutter module打包成aar,然后在原生工程中依赖aar包,官方推荐aar的方式接入。 如何在原生...
  • 一、Flutter 页面生命周期、 1、StatelessWidget 组件生命周期函数、 2、StatefulWidget 组件生命周期函数、 二、StatefulWidget 组件生命周期、 1、createState、 2、initState、 3、didChangeDependencies、 4、...
  • 一、推荐使用 flutter_screenutil 插件、 二、flutter_screenutil 插件使用、 1、导入 flutter_screenutil 插件依赖、 2、 flutter_screenutil 初始化、 3、 flutter_screenutil 使用 API、 4、 设置字体、 5、 设置...
  • 文 / Tim Sneath, Google Flutter & Dart 产品经理Flutter 创建伊始,我们就致力于打造一个能够构建精美的、可高度定制的、并且可以编译为机器码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 134,325
精华内容 53,730
关键字:

flutter