自学内容网 自学内容网
自学内容网 > 正文

Flutter 学习资料

🕗 发布于 2024-10-16 11:52 flutter  

官网：https://flutter.dev/

# 教程类

a. Flutter官方文档：

[https://docs.flutter.dev/get-started](https://docs.flutter.dev/get-started) (中文：文档 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter) 从最初的环境配置到开发的相关知识，以及最终打包发布的一条龙介绍，初学者建议优先推荐多看几遍。

b. Dart语言教程：

https://dart.dev/guides（中文站：https://dart.cn/guides） 有关Dart语言使用的详细介绍。

c. Flutter实战中文教程：

第二版序 | 《Flutter实战·第二版》

目前最新也较全面的中文教程。

d. GetX：

https: [pub.flutter-io.cn/packages/get](http://pub.flutter-io.cn/packages/get)

(https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md)

目前个人觉得较好的集路由，页面状态管理等多种功能模块一体的框架,推荐在学习完Flutter基础知识后，学习下GetX的用法。

E. _游戏相关：

_ [https://github.com/flame-engine/flame](https://github.com/flame-engine/flame)

（ [https://doc.flame-cn.com/](https://doc.flame-cn.com/) ）

基于flutter的组件化游戏引擎，对小游戏有兴趣的可以了解下。

f. b站教学视频：

[Dart Flutter教程_Dart Flutter3.x入门实战视频教程-16讲后是Flutter教程_哔哩哔哩_bilibili

视频去哪了呢？_哔哩哔哩_bilibili

其他还有不少的教学视频可以自行选择学习。

初学者学习建议：

1. 首先按照 (a)官方文档的介绍，完成flutter开发环境的搭建。

2. 了解dart语言的基本知识（b）,同时结合官方文档学习Flutter开发的基础知识，熟悉主要控件的使用方式。

3. 在完成基础学习之后定一个小目标边写边学，踩坑/填坑，逐渐丰富Flutter的开发知识。

# 技术博客推荐

[https://medium.com/flutter](https://medium.com/flutter)

medium flutter频道：有国外最新的Flutter相关知识分享。

[http://laomengit.com/](http://laomengit.com/)

老孟的Flutter，全面的介绍了300多个控件的使用方式以及相关的知识点。

阿里云开发者社区-闲鱼技术-全部-阿里云

闲鱼技术 闲鱼是国内实践Flutter最早的大厂,分享了很多有关Flutter开发（尤其是性能优化，架构等）相关的知识。

[CarGuo (Shuyu Guo) · GitHub](https://github.com/CarGuo)

GSY 的github Flutter完整开发实战的作者，有电子书和各类学习文章及demo。

[https://github.com/toly1994328/FlutterUnit](https://github.com/CarGuo)

Flutter 各组件的demo库。

[GitHub - iampawan/FlutterExampleApps: Example APPS Basic Flutter apps, for flutter devs.](https://github.com/iampawan/FlutterExampleApps)

[GitHub - Solido/awesome-flutter: An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.](https://github.com/Solido/awesome-flutter)

提供了很多各类型的Flutter app样例链接

# 常用三方库

网络

Dio：https:pub.flutter-io.cn/packages/dio

http: http | Dart package

目前最常用的两个网络库

本机网络状态检测

connectivity_plus：https: [pub.flutter-io.cn/packages/connectivity_plus](http://pub.flutter-io.cn/packages/connectivity_plus)

用于监控本机的网络情况。

状态管理，路由控制，以及主题语言管理的合集工具库。

Get：https: [pub.flutter-io.cn/packages/get](http://pub.flutter-io.cn/packages/get)

Get目前是比较常用的状态管理框架，使用简单，解耦度高，同时还包含了路由控制等其他功能。

其他常用的状态管理库：

provider：provider | Flutter package

更多的介绍可以参考：

https://flutter.cn/docs/development/data-and-backend/state-mgmt/options

工具类

common_utils：https: [pub.flutter-io.cn/packages/common_utils](http://pub.flutter-io.cn/packages/common_utils)

封装了常用的各类方法（日志，格式转换，类型判断等）

string_validator: string_validator | Dart package

字符串工具

提示框

flutter_smart_dialog：https: [pub.flutter-io.cn/packages/flutter_smart_dialog](http://pub.flutter-io.cn/packages/flutter_smart_dialog)

基本开箱即用，封装了不同类型的Dialog。

后台任务处理

workmanager：https: [pub.flutter-io.cn/packages/workmanager](http://pub.flutter-io.cn/packages/workmanager)

比较适合用于处理周期性的任务。

屏幕适配

flutter_screenutil：https: [pub.flutter-io.cn/packages/flutter_screenutil](http://pub.flutter-io.cn/packages/flutter_screenutil)

启动后根据设计图大小初始化配置，后续使用自动根据屏幕大小自适应宽高，字体等

Json转换工具

jsonToDart：[GitHub - fluttercandies/JsonToDart: The tool to convert json to dart code, support Windows，Mac，Web.](https://github.com/fluttercandies/JsonToDart)

粘贴json数据在工具中，自动生成对象转化方法

定位

geolocator：[geolocator | Flutter Package](https://pub.flutter-io.cn/packages/geolocator)

Gps定位组件

geocoding

[geocoding | Flutter Package](https://pub.flutter-io.cn/packages/geocoding)

逆地址解析组件

Webview:

[webview_flutter | Flutter Package](https://pub.flutter-io.cn/packages/webview_flutter)

本地web页加载组件

UI相关库：

image_picker: [image_picker | Flutter package](image_picker | Flutter package)

官方图片选择库，原生效果

wechat_assets_picker: [wechat_assets_picker | Flutter package](wechat_assets_picker | Flutter package)

基于photo_manager实现的微信风格的图片选择框架。

photo_manager：https: [pub.flutter-io.cn/packages/photo_manager](http://pub.flutter-io.cn/packages/photo_manager)

本地资源管理库不带UI

extended_image: [extended_image | Flutter package](extended_image | Flutter package)

强大的官方 Image 扩展组件, 支持加载以及失败显示，缓存网络图片，缩放拖拽图片，图片浏览(微信掘金效果)，滑动退出页面(微信掘金效果)，编辑图片(裁剪旋转翻转)，保存，绘制自定义效果等功能

cached_network_image: [cached_network_image | Flutter Package](cached_network_image | Flutter Package)

基于 [flutter_cache_manager](https://pub.flutter-io.cn/packages/flutter_cache_manager) 封装的网络图片缓存库

[pull_to_refresh](https://pub.flutter-io.cn/packages/pull_to_refresh) : [pull_to_refresh | Flutter package](pull_to_refresh | Flutter package)

开箱即用的上/下拉列表组件

flutter_staggered_grid_view：https: [pub.flutter-io.cn/packages/flutter_staggered_grid_view](http://pub.flutter-io.cn/packages/flutter_staggered_grid_view)

开箱即用的网格布局组件

flutter_xlider: [flutter_xlider | Flutter package](flutter_xlider | Flutter package)

单双向拖动选择组件

preload_page_view： [preload_page_view | Flutter package](preload_page_view | Flutter package)

支持提前预加载的PageView组件

smooth_page_indicator：https: [pub.flutter-io.cn/packages/smooth_page_indicator](http://pub.flutter-io.cn/packages/smooth_page_indicator)

配合PageView，PhotoView等使用的页面指示器，带多种效果开箱即用

flutter_spinkit：https: [pub.flutter-io.cn/packages/flutter_spinkit](http://pub.flutter-io.cn/packages/flutter_spinkit)

开箱即用，加载动画合集

lottie：https: [pub.flutter-io.cn/packages/lottie](http://pub.flutter-io.cn/packages/lottie)

开箱即用，lottie 动画库

flutter_sound: flutter_sound | Flutter package

flutter_sound_lite: [flutter_sound_lite | Flutter package](flutter_sound_lite | Flutter package) ( 轻量级的体积较小)

音频（录音/播放）库

[video_player](https://pub.flutter-io.cn/packages/video_player) : [video_player | Flutter package](video_player | Flutter package)

官方视频播放库，一些功能需要自己实现

chewie： [chewie | Flutter package](chewie | Flutter package)

fijkplayer: fijkplayer | Flutter package

功能相对丰富，比较好用的三方视频播放控件

fl_chat: [fl_chart | Flutter package](fl_chart | Flutter package)

丰富的图表控件

expandable：https: [pub.flutter-io.cn/packages/expandable](http://pub.flutter-io.cn/packages/expandable)

展开/收缩组件

常用动画组件

animate_do: [animate_do | Flutter package](animate_do | Flutter package)

封装了各种类型的动画效果，开箱即用

animations：https: [pub.flutter-io.cn/packages/animations](http://pub.flutter-io.cn/packages/animations)

官方动画库

auto_animated：https: [pub.flutter-io.cn/packages/auto_animated](http://pub.flutter-io.cn/packages/auto_animated)

主要针对滑动列表的动画库

in_app_review: in_app_review | Flutter package

应用内评价组件

path_provider：[path_provider | Flutter Package](https://pub.flutter-io.cn/packages/path_provider)

获取本地文件系统路径

bagges：[badges | Flutter Package](https://pub.flutter-io.cn/packages/badges)

红点库

modal_bottom_sheet: [modal_bottom_sheet | Flutter Package](https://pub.flutter-io.cn/packages/modal_bottom_sheet)

底部弹出框组件，比起系统自带的来说，动效上丰富些。

pinput：[pinput | Flutter Package](https://pub.flutter-io.cn/packages/pinput)

提供各种效果的验证码组件

event_bus： [event_bus | Dart Package](https://pub.flutter-io.cn/packages/event_bus)

事件通知，如果使用Get框架开发的话，可能不需要它

存储相关：

数据库

[sqflite](https://pub.flutter-io.cn/packages/sqflite) : sqflite | Flutter package

moor: [moor | Dart package](moor | Dart package)

realm: [realm | Flutter package](realm | Flutter package)

isar: isar | Dart package

数据库方面目前感觉没有太好用的，以上三个都可以，学习成本稍高

本地存储

get_storage：https: [pub.flutter-io.cn/packages/get_storage](http://pub.flutter-io.cn/packages/get_storage)

Localstorage：https: [pub.flutter-io.cn/packages/localstorage](http://pub.flutter-io.cn/packages/localstorage)

这两个都可以

设备相关：

权限

permission_handler: [permission_handler | Flutter package](permission_handler | Flutter package)

权限检查，权限请求等。

设备信息

device_info_plus：https: [pub.flutter-io.cn/packages/device_info_plus](http://pub.flutter-io.cn/packages/device_info_plus)

获取硬件设备信息

包信息

package_info_plus：https: [pub.flutter-io.cn/packages/package_info_plus](http://pub.flutter-io.cn/packages/package_info_plus)

获取app安装包信息

# Android Studio 插件

[flutter-img-sync - IntelliJ IDEs Plugin | Marketplace](https://plugins.jetbrains.com/plugin/12585-flutter-img-sync)

项目图片资源路径生成插件

[GetX - IntelliJ IDEs Plugin | Marketplace](https://plugins.jetbrains.com/plugin/15919-getx)

一键生成Get风格的文件结构

[WidgetGenerator - IntelliJ IDEs Plugin | Marketplace](https://plugins.jetbrains.com/plugin/12244-widgetgenerator)

快捷生成Widget

-------------------------------------------------------------------------

Flutter 相关问题记录（持续更新）：

  1. 通常系统widget的部分属性都会有默认值，使用时候需要注意

  1. 在约束性布局中使用container（）作为空视图会有问题：

原因container为空时会返回：

limitedBox(

maxWidth: 1.0,

maxHeight: 1.0,

child: ConstrainedBox(constraints: BoxConstraints.expand()),

);

而limitbox在父组件有约束的时候不会生效，导致实际会返回  ConstrainedBox(constraints: BoxConstraints.expand()),大小的子项.

  1. CircleAvatar  在没有设置radius时，默认最大只有2x20的大小，所以如果需要设置大于40的size需要手动指定radius大小为实际大小/2

_defaultRadius  = 20.0

double get _maxDiameter {

if (radius == null && minRadius == null && maxRadius == null) {

return _defaultRadius * 2.0;

}

return 2.0 * (radius ?? maxRadius ?? _defaultMaxRadius);

}

  1. AS找不到设备

a.Search everywhere (Shift + Shift)

b.Search for restart flutter daemon

  1. stack:

使用position的时候如果不指定边界位置会导致内部控件的边界无限，导致UI的一些问题：

例如Text的 长度超出屏幕之后不会自动换行或自动裁剪


原文地址：https://blog.csdn.net/weixin_43575775/article/details/142935932

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024