flutter入门

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

1 安装包

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

1. 格式化日期时间组件：https://pub.dev/packages/date_format
2. 日期选择组件：https://pub.dev/packages/flutter_cupertino_date_picker
3. 轮播图组件：https://pub.dev/packages/flutter_swiper
4. showToast(弹窗提示)：https://pub.dev/packages/fluttertoast
5. 网络请求(Dio)：https://pub.dev/packages/dio
6. 解析html数据：https://pub.dev/packages/flutter_html
7. 加载远程web页面：https://pub.dev/packages/flutter_inappbrowser
8. 获取设备信息：https://pub.dev/packages/device_info
9. 实现用高德定位：https://pub.dev/packages/amap_location
10. 相机拍照 和相册选择：https://pub.dev/packages/image_picker
11. 视频播放：
    • https://pub.dev/packages/video_playe
      (在 Flutter 里官方提供了一个 video_player 插件可以播放视频。但是 video_player 有一些局 限性。没法控制底部播放进度等)
    • https://pub.dev/packages/chewie (建议使用)
12. 网络监测：https://pub.dev/packages/chewie
13. 本地存储：https://pub.dev/packages/shared_preferences
14. 扫描二维码条形码：https://pub.dev/packages/barcode_scan
15. • 获取版本信息：https://pub.dev/packages/package_info
    • 获取文件存储路径：https://pub.dev/packages/path_provider
    • 下载文件：https://pub.dev/packages/flutter_downloader
    • 打开文件：https://pub.dev/packages/open_file
16. Flutter url_launcher 模块：https://pub.dev/packages/url_launcher (Flutter url_launcher 模块可以让我们实现打开外部浏览器、打开外部应用、发送短信、拨打
    电话等功能。)
17. 支付：
    • 支付宝：https://pub.dev/packages/sy_flutter_alipay
    • 微信：https://pub.dev/packages/sy_flutter_wechat
18. 不同终端屏幕适配：https://pub.dev/packages/flutter_screenutil
19. 状态管理：
    • https://pub.dev/packages/provider
    • https://pub.dev/packages/event_bus (主要是实现不同组件之间的数据传值，以及在一个组件中 执行另一个组件的方法。)