一篇就够！！！Flutter 最全开源项目，从新手到Flutter架构师，（详解UI、导航、网络、导航、音视频...）

作者：xiangzhihong
链接：https://juejin.im/post/5de48586e51d455c0172baac
来源：掘金

Flutter是Google推出的一套开源跨平台UI框架，可以快速地在Android、iOS和Web平台上构建高质量的原生用户界面。同时，Flutter还是Google新研发的Fuchsia操作系统的默认开发套件。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

作为目前最流行的跨平台技术框架，Flutter受到被越来越多的开发者和组织追捧，截止2019年11月，Flutter已获得超过80K的关注和10k的fork量。所以，把Flutter说成是2019年最火热的前端技术也不过分。

小编整理了一些关于面试类的文章，含有从基础到进阶。含有BATJ.字节跳动面试专题，算法专题，高端技术专题，混合开发专题，java面试专题，Android,Java小知识，到性能优化.线程.View.OpenCV.NDK等应有尽有。还有辅之相关的视频+学习笔记

和其他前端技术一样，Flutter技术之所以火热是因为完善的社区和开发者的热情，所以在开发Flutter应用时我们或多或少的会使用一些开源的社区库，来减少我们自己封装带来的时间成本，下面就Flutter开发中使用得比较多的库给大家做一个总结（排名不分先后）。

和前端的包管理机制类似，Flutter的依赖包放在pubspec.yaml文件中，如下所示。

 

name: flutter_app
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  lpinyin: ^1.0.7

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

复制代码

其中，我们依赖的第三方库就放在dependencies节点下面。

UI展示

富文本

flutter_html_view

pub.dartlang.org/packages/fl… 默认情况下，Flutter是没有提供显示Html的组件的，所以如果要显示Html，需要使用三方的包，这个包可以将html呈现给原生的Widget。类似于Android的jsoup插件。

flutter_html_textview

pub.dartlang.org/packages/fl… 将html呈现为一个Widget，在textview中呈现html。

MarkDown

flutter_markdown

pub.dartlang.org/packages/ma…

使用Dart编写的支持Markdown查看的库，它可以在客户端和服务器上将Markdown解析为HTML。

markdown

pub.dartlang.org/packages/ma… 用Dart编写的便携式Markdown库。它可以在客户端和服务器上将Markdown解析为HTML。

html2md

pub.dartlang.org/packages/ht… 一个支持将html转换为MarkDown的插件。

动画

flutter_villains

pub.dartlang.org/packages/fl… 一个页面切换动画的库，可以简化动画操作，使用时只需要管理好UI即可。

屏幕适配

platform_aware

pub.dartlang.org/packages/pl… 为自动适应当前平台而包装的Flutter组件，不需要对iOS和Android进行代码更改。所有小部件都依赖于Theme.of(context).platform来确定当前活动平台的平台。你可以使用Flutter Inspector动态地更改平台。

native_widgets

pub.dartlang.org/packages/na… 为避免重复代码，只编写一次代码就可以支持两个平台并自动根据平台自动使用对应风格组件，Android将使用材料设计，iOS将使用Cupertino风格的小部件。

日历、时间选择库

flutter_calendar

pub.dartlang.org/packages/fl… Flutter的日历组件库，由于调用的是原生的组件库，所以在显示上略有差异。

calendarro

 

[https://pub.dartlang.org/packages/calendarro](https://pub.dartlang.org/packages/calendarro)

Flutter的日历组件库， 这个库提供了多种自定义组件的方法。

flutter_picker

pub.dartlang.org/packages/fl… 一个日期，时间，日期时间，icon，自定义数据的选择器，可以居中弹窗，也可以在底部弹出。（目前来看是最全面的一个选择器控件。该插件支持ios和android平台，使用的是ios的风格的UI效果。）

颜色选择

flutter_color_picker

pub.dartlang.org/packages/fl… 一个简单的颜色选择器，类似于安卓的selector的功能，可以在点击控件时，给控件设置选择器效果。

flutter_colorpicker

pub.dartlang.org/packages/fl… 一个HSV的颜色选择器。

导航栏

navigation_bar

pub.dartlang.org/packages/na… 简易的底部导航栏库

fluro

pub.dartlang.org/packages/fl… 最好用的路由导航框架。功能：简单的路线导航；函数处理程序（映射到函数而不是路径）；通配符参数匹配；查询字符串参数解析；内置常用转换；简单的定制转换创建。

网络与数据序列化

网络请求

http

pub.dartlang.org/packages/ht… github.com/dart-lang/h… http是使用Dart原生编写的网络请求库，可以轻松的实现HTTP资源请求，并且它与平台无关，可以在命令行和浏览器上使用。

HttpClient

HttpClient是Dart IO库提供的一种Http请求，可以实现一些基本的Http请求。不过，HttpClient只能实现一些基本的网络请求，对应一些复杂的网络请求还无法完成，如POST里的Body请求体传输内容类型部分还无法支持，multipart/form-data这个类型传输还不支持。

dio

pub.dartlang.org/packages/di…

Dart社区提供的http请求库，不仅支持常见的网络请求，还支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等操作。

http_multi_server

pub.dartlang.org/packages/ht…

HttpServer包装器，可以用于处理来自多个服务器请求。

ps： 关于网络库的详细使用，可以参考我之前文章的介绍：Flutter开发之Http网络请求

序列化

Flutter序列化可以分为手动序列化和使用工具序列化。手动序列化指的是使用 dart:convert 的内置解码器，包括传入 JSON 原始字符串给 JSON.decode() 方法，然后从 Map<String, dynamic> 中查询你需要的数据。自动序列化可以使用诸如json_serializable、built_value、built_value_generator和built_value_test库。

除此之外，如果涉及到json解析，还可以使用codable库，它可以将动态结构化数据（JSON，YAML）转换为Dart类型的库。以下是一些常用的json解析库的比较。

image

编码解码

有时候为了数据的安全方面的考虑，会对传输的数据或本地保存的数据进行编解码、加密解密操作，如果有这方面的操作，可以使用下面的库。

ninja

pub.dartlang.org/packages/ni… 在Dart的Converter和Codec接口上完善的AES以及RSA加密解密算法的库。

archive

pub.dartlang.org/packages/ar… 为各种存档和压缩格式提供编码器和解码器，如zip，tar，bzip2，gzip和zlib。

数据库

如果有涉及到数据存储、缓存相关的需求，可以使用如下的第三方库。

sqflite

pub.dartlang.org/packages/sq… SQLite的Flutter插件，一个自包含的高可靠性嵌入式SQL数据库引擎。

file_cache

pub.dartlang.org/packages/fi… 为flutter package项目缓存Json、Buffer、FileCacheImage。

图像加载与加工

图像加载

在Flutter开发中，图像是一个重要的模块，主要是图片的加载和图片的处理。关于加载图片，除了使用Image组件的Image.network 、 FadeInImage.memoryNetwork 来加载图片外，还可以使用如下的一些图片库来加载图片。

cached_network_image

pub.dartlang.org/packages/ca… 一个用于显示来自Internet的图像并将它们保存在缓存目录中的flutter库，可以用来加载和缓存网络图像，也可以与占位符和错误小部件一起使用。

flutter_advanced_networkimage

pub.dartlang.org/packages/fl… 一个高级的图像缓存加载和缩放控制的flutter库。

transparent_image

pub.dartlang.org/packages/tr… 简单的透明图像，表示为Uint8List，在加载图片时可以用来做为占位符。

图像处理

image_jpeg

pub.dartlang.org/packages/im… 用于将图像转jpeg缩放压缩，压缩后再上传图片效率更高。该库最终会调用Android或iOS原生功能进行图片压缩处理，性能较高，支持的源图像格式也很多。

image_picker

pub.dev/packages/im…

根据库名就可以知道，image_picker是一个用于从Android和iOS图像库中选择图像的库，支持使用相机拍摄新照片。

photo

pub.dartlang.org/packages/im… 此库同样可以用于选择图像，支持多选，而且此库是用Flutter做的UI，可以很方便的自定义修改显示样式。

image

pub.dartlang.org/packages/im…

Dart库，提供以各种不同的文件格式加载、保存和操作图像的能力。该库不需要依赖于DART：IO，因此它可以用于服务器和Web应用程序。

flutter_svg

pub.dartlang.org/packages/fl… 可以使用此库来加载svg图像。

zoomable_image

pub.dartlang.org/packages/zo… 一个支持图像查看和手势缩放操作功能的图片库。

image_carousel

pub.dartlang.org/packages/im… 一个用于Flutter图像展示的控件，与官方提供的Image组件相比，image_carousel支持左右划动来切换上一张下一张图像，并且image_carousel还结合了zoomable_image的功能，因此可以点击后缩放查看图片，除此之外，image_carousel还支持Asset和网络图像。

carousel_slider

pub.dartlang.org/packages/ca… 从名字就可以知道，carousel_slider是一个支持手势划动的库，使用此库可以通过手势划动来切换图像组件，并且此库还支持自动播放图像。

parallax_image

pub.dartlang.org/packages/pa… 视差图像可以与任何可滚动（例如ListVIEW）一起使用，让放在滚动区域内的图像滚动时看起来更平滑。

camera

pub.dartlang.org/packages/ca… 用于获取Android和iOS系统相机的信息，支持预览相机馈送和捕捉图像，同时支持录制视频。

消息通知

flutter_local_notifications

pub.dartlang.org/packages/fl… 一个可以跨平台显示本地notifications的插件，支持android和iOS平台。

local_notifications

pub.dartlang.org/packages/lo… 使用此库可以在Android和iOS上很容易的创建Notifications通知。

url_launcher

pub.dartlang.org/packages/ur… 可以在Android和iOS上启动URL，支持打开网络、电话、短信和电子邮件等方案。

firebase_messaging

pub.dartlang.org/packages/fi… 一款跨平台的消息传递解决方案，可让您在Android和iOS上可靠地传递消息。

event_bus

pub.dartlang.org/packages/ev… 使用Dart流进行解耦应用程序的简单事件总线的库，和Android中的事件总线机制类似，内部使用了广播机制。

视频与音频

在Flutter开发中，可能会涉及到视频和音频的播放开发， 除了使用Flutter提供的组件外，还可以使用一些开源的第三方库。

video_player

pub.dartlang.org/packages/vi… 官方维护的视频播放插件，用于在Android和iOS上与其他Flutter窗口小部件一起显示内嵌视频。

video_launcher

pub.dartlang.org/packages/vi… 主要用于视频播放器。

flute_music_player

pub.dartlang.org/packages/fl… 基于Flutter的音乐播放器与音频插件播放，支持本地音乐文件播放。

audioplayer

pub.dartlang.org/packages/au… 一个播放远程或本地音频文件Flutter音频插件。

audioplayers

pub.dartlang.org/packages/au… audioplayer的一个分支，不同之处在于它支持同时播放多个音频并显示音量控制。

其他

除此之外，如地图、二维码、图表库、权限库和分享等，也是平时开发中遇到比较多的需要。

地图

map_view

pub.dartlang.org/packages/ma… 一个用于在iOS和Android上显示谷歌地图的Flutter插件。

flutter_map

pub.dartlang.org/packages/fl… 基于leaflet的Flutter地图包。

location

pub.dartlang.org/packages/lo… 处理Android和iOS上的位置，提供位置更改时的回调。

latlong

pub.dartlang.org/packages/la… LatLong是一个计算通用的纬度和经度的轻量级库。

二维码

qr_flutter

pub.dartlang.org/packages/qr… qr_flutter是一个用于二维码的Flutter库，可通过Widget或自定义Paint进行简单快速的QR码渲染。

barcode_scan

pub.dartlang.org/packages/ba… barcode_scan是一个用于扫描2D条形码和QRCodes的Flutter插件。

qrcode_reader

pub.dartlang.org/packages/qr… qrcode_reader是一个使用相机读取二维码的Flutter插件。

图表库

很多时候，图表开发也是一个比较常见的开发需求，如果有图表方面的开发需求，可以使用如下的开源库。

charts-common

pub.dartlang.org/packages/ch… Material Design风格的图表库。

charts-flutter

pub.dartlang.org/packages/ch… 通用的图表库组件，提供基本的柱状图，折线图，饼图等。

flutter_circular_chart

pub.dartlang.org/packages/fl… 一个让你使用flutter轻松创建的动画圆形图控件的库。

权限

在开发中，如果要向系统申请某个权限，可以使用权限库去申请。

simple_permissions

pub.dartlang.org/packages/si… 一个用于android和ios的请求权限的库。

flutter_simple_permissions

pub.dartlang.org/packages/fl… Flutter权限申请的库。

分享统计支付

share

pub.dartlang.org/packages/sh… 支持分享的flutter插件。

flutter_umeng_analytics

pub.dartlang.org/packages/fl… 友盟的分享和统计库。

flutter_qq

pub.dartlang.org/packages/fl… 集成了QQ登录、QQ分享、QQ空间分享等功能的库。

flutter_wechat

pub.dartlang.org/packages/fl… 集成了微信，支持微信登录、分享、支付等功能的库。

flutter_alipay

pub.dartlang.org/packages/fl… 实现了调用支付宝进行支付的功能，兼容android和iOS。

开源应用源码

学习一门技术，最有效的入门就是学习完基础知识后，写一个小的应用。作为今年最热门的跨平台技术（没有之一），网络上出现了一大批开源的应用源码，通过阅读这些源码，我们可以快速的深入Flutter应用开发。

flutter-go

github.com/alibaba/flu…

由阿里巴巴前端技术团队开发的Flutter 开发者帮助 APP，包含 flutter 常用 140+ 组件的demo 演示与中文文档，是学习Flutter开发的必备手册。

gsy_github_app_flutter

github.com/CarGuo/GSYG… GSYGithubApp系列的优势：我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全，项目框架内技术涉及面广，完成度高，持续维护，配套文章，适合全面学习，对比参考。跨平台的开源Github客户端App，更好的体验，更丰富的功能，旨在更好的日常管理和维护个人Github，提供更好更方便的驾车体验Σ(￣。￣ﾉ)ﾉ。

flutter-examples

github.com/nisrulz/flu…

包含Flutter的常见的学习示例。

flutter-osc

github.com/yubo725/flu…

基于Google Flutter的开源中国客户端，支持Android和iOS。

FlutterDouBan

github.com/kaina404/Fl…

Flutter豆瓣客户端,Awesome Flutter Project，全网最100%还原豆瓣客户端。主要功能包括首页、书影音、小组、市集及个人中心，一个不拉。

zhihu-flutter

github.com/xujiyou/zhi…

一个高仿知乎的Flutter应用，支持黑色主题切换。

flutter_shuqi

github.com/huanxsd/flu…

高仿书旗小说客户端，所有功能都是用Dart写的，iOS和Android的代码复用率达到了100%。

flutter-netease-music

github.com/boyan01/flu… 高仿网易云音乐，完成大部分功能的高仿。

NeteaseCloudMusic

github.com/fluttercand…

高仿最新版的网易云音乐，接口使用Binaryify大佬的 - NeteaseCloudMusicApi

Morec

github.com/Mayandev/mo…

这是一个非常精美的 Flutter 版电影客户端，利用豆瓣现有的 Api，打造了一个完整的电影展示 App。细节十分完善，是一个经过完整设计的产品而非 Demo。

flutter_boss

github.com/heruijun/fl… 一个仿Boss直聘的Flutter应用。

awesome-flutter-cn

github.com/crazycodebo…

Flutter是Google出品的一款用于开发高性能、高保真、跨平台App(Android iOS)的SDK。awesome-flutter-cn是Flutter的学习资料库，初学者可以参考它进行学习。

学习分享，共勉

程序员是一个需要不断学习成长的岗位，特别是大前端，题外话，我在大厂工作5年的时间里，通过

语言： Java 、Kotlin 、JavaScript 、 Dart ；
框架： React Native 、Weex 、Spring 、Flutter ；
开发模型：MVC、MVP、MVVM 、DI、AOP 、Reactive

等等的学习，虽有个人兴趣，也有工作所迫，但在学习技术的路上，只要你在行业内就很难停下来。
而在学习路线上，包括我自己，很多人都会有 “是不是学多就不精了” 的疑问。确实，学的东西多了，不可能在工作中都能有所应用，而且每项技术的探索可能都会深浅不一，所以避免跟风学习是前提。
但是回归到 “精通” 这个词，在不学多的情况下，你又是否真的在学精呢？ 每个人都有自己的路线和学习风格，而我对自己的定位，更多是在自己的技术栈内去拓展技能。

最后希望大家都能形成自己的技术栈，要学会对自己的技术点懂得归纳总结。

话不多请看下图↓↓↓ (把所有的知识+每日一题整理了）

可以进裙回复【333】获取完整资料