flutter入门
概念
flutter :创建高性能、跨平台的移动应用
1、Flutter优点
A、混合开发中,最接近原生开发的框架;
B、性能强大,流畅;
C、优秀的路由设计;
D、优秀的动画设计;
E、简单易学,Dart语言更具优势;
F、跨多种平台,减少开发成本;支持插件,可以访问原生系统的调用。
2、Flutter缺点
A、脱离不开原生,开发人员需要具备原生(Android、iOS)基础开发能力;
B、适配问题,开发工具版本升级后,修改量大;
C、原生集成第三方SDK后,兼容性适配是个令人头痛的问题;
D、代码可读性较差,对代码质量和管理要求较高;
E、Widget的类型难以选择,糟糕的UI控件API;
F、Flutter packages和Dart packages上第三方sdk繁杂,适配性差,不可乱用;
G、目前几乎没有第三方开发者平台开发Flutter能力的SDK,需要原生去集成;
H、打包后,apk/ipa要大很多。
原理
3、流程
GPU的Vsync信号同步到UI线程
UI线程使用Dart来构建抽象的视图结构
视图结构在GPU线程中进行图层合成
合成后的视图数据提供给Skia图形引擎处理成GPU数据
数据再通过OpenGL或Vulkan提供给GPU进行渲染
作者:Flutter编程指南
Dart
用于web、服务器、移动应用和物联网等领域的开发。也是开源的软件
Dart是面向对象的、类定义的、单继承的语言
Dart2成为强类型语言
安装(windows为例)
系统要求: win7以上(windows10最好)
工具:powershell、git
地址:https://flutter.dev/docs/get-started/install
2 解压缩 并进入目录
3 添加环境变量 如;
环境变量 ath 追加 ;G:\flutter\bin;
新建 PUB_HOSTED_URL环境变量https://pub.flutter-io.cn
新建 FLUTTER_STORAGE_BASE_URL环境变量https://storage.flutter-io.cn
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4 重新打开 powershell 输入
flutter --version 验证
flutter --help 查看帮助
flutter doctor 诊断设备环境
入门(以flutter_map为例)
下载git源码
git clone https://github.com/fleaflet/flutter_map.git
进入 example目录 输入
#下载依赖包
flutter pub get
#运行
flutter run
资料整理
官网 https://flutter.dev/
pub 包查询 https://pub.flutter-io.cn/dart/packages
常用组件
- 一个高度优化, mobile-first 2D 渲染引擎 (保护对 text 优秀的支持 )
- 一个 functional-reactive 框架 (可选的,你也可以引入你自己的框架)
- 一组 Material Design 部件 (可选的,你也可以引入你自己的部件)库 ,工具,和一个用于 Atom 的插件。
常用三方组件(参考)
一个开源的 Flutter 应用实例:FlutterOSC
一个leaflet地图flutter+dart版实现 flutter_map
- 格式化日期时间组件:https://pub.dev/packages/date_format
- 日期选择组件:https://pub.dev/packages/flutter_cupertino_date_picker
- 轮播图组件:https://pub.dev/packages/flutter_swiper
- showToast(弹窗提示):https://pub.dev/packages/fluttertoast
- 网络请求(Dio):https://pub.dev/packages/dio
- 解析html数据:https://pub.dev/packages/flutter_html
- 加载远程web页面:https://pub.dev/packages/flutter_inappbrowser
- 获取设备信息:https://pub.dev/packages/device_info
- 实现用高德定位:https://pub.dev/packages/amap_location
- 相机拍照 和相册选择:https://pub.dev/packages/image_picker
- 视频播放:
- https://pub.dev/packages/video_playe
(在 Flutter 里官方提供了一个 video_player 插件可以播放视频。但是 video_player 有一些局 限性。没法控制底部播放进度等) - https://pub.dev/packages/chewie (建议使用)
- https://pub.dev/packages/video_playe
- 网络监测:https://pub.dev/packages/chewie
- 本地存储:https://pub.dev/packages/shared_preferences
- 扫描二维码条形码:https://pub.dev/packages/barcode_scan
- Flutter url_launcher 模块:https://pub.dev/packages/url_launcher (Flutter url_launcher 模块可以让我们实现打开外部浏览器、打开外部应用、发送短信、拨打
电话等功能。) - 支付:
- 不同终端屏幕适配:https://pub.dev/packages/flutter_screenutil
- 状态管理:
- https://pub.dev/packages/provider
- https://pub.dev/packages/event_bus (主要是实现不同组件之间的数据传值,以及在一个组件中 执行另一个组件的方法。)