Flutter 不可错过的学习资源

蔚落 2023-07-23 11:00 31阅读 0赞

![20200407205255537.png][]

> 老孟导读：今天给大家分享一下我在学习Flutter的过程中整理的资料，这些文章或者开源项目都是精挑细选的，希望可以帮助到到家。另外相关资料会在Github一直更新，欢迎大家fork，如果喜欢的话给个小星星，非常感谢，Github 地址：[https://github.com/781238222/flutter-do][https_github.com_781238222_flutter-do]

## Flutter 控件 ##

1.  Google官方控件视频，每周更新一集：[https://www.youtube.com/watch?v=b\_sQ9bMltGU&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG][https_www.youtube.com_watch_v_b_sQ9bMltGU_list_PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG]
2.  超过170多个控件的详细介绍：[http://laomengit.com/][http_laomengit.com]

## Flutter 动画 ##

### 动画相关文章 ###

1.  25种动画组件超全总结：[http://laomengit.com/flutter/module/animated\_1/][http_laomengit.com_flutter_module_animated_1]
2.  组合动画:[http://laomengit.com/flutter/module/animation\_combined][http_laomengit.com_flutter_module_animation_combined]
3.  Google工程师带你选择Flutter动画控件:[http://laomengit.com/flutter/module/animated\_choose][http_laomengit.com_flutter_module_animated_choose]

### 带动画效果的PageView ###

*  [Travel Cards][]
 *  [Mindfullness Gooey Transition][]
 *  [page-transformer][]
 *  [transformer\_page\_view][transformer_page_view]
 *  [smooth\_page\_indicator][smooth_page_indicator]

### 带动画效果的底部导航 ###

*  [Fluid Button Bar][]
 *  [Icon Flip Button Bar][]
 *  [fancy\_bottom\_navigation][fancy_bottom_navigation]
 *  [circular\_bottom\_navigation][circular_bottom_navigation]
 *  [bottom\_navy\_bar][bottom_navy_bar]
 *  [titled\_navigation\_bar][titled_navigation_bar]

## Flutter 完整项目及功能性项目 ##

1.  Flutter Fly（展翅高飞）：[https://github.com/781238222/flutter-do/tree/master/flutter\_fly][https_github.com_781238222_flutter-do_tree_master_flutter_fly]
2.  Flutter App升级功能：[https://github.com/781238222/flutter-do/tree/master/flutter\_upgrade][https_github.com_781238222_flutter-do_tree_master_flutter_upgrade]
3.  FlutterExampleApps 收集了大量youtube视频：[https://github.com/iampawan/FlutterExampleApps][https_github.com_iampawan_FlutterExampleApps]
4.  flutter-go，不解释，或许这是你最早接触的Flutter资源：[https://github.com/alibaba/flutter-go][https_github.com_alibaba_flutter-go]
5.  FlutterScreens,漂亮的UI库，学习阶段建议不要使用[https://github.com/samarthagarwal/FlutterScreens][https_github.com_samarthagarwal_FlutterScreens]
6.  Flutter豆瓣客户端，完成度比较高的项目：[https://github.com/kaina404/FlutterDouBan][https_github.com_kaina404_FlutterDouBan]
7.  MVC模式的项目结构：[https://github.com/brianegan/flutter\_architecture\_samples][https_github.com_brianegan_flutter_architecture_samples]
8.  开源Github客户端：[https://github.com/CarGuo/gsy\_github\_app\_flutter][https_github.com_CarGuo_gsy_github_app_flutter]
9.  HistoryOfEverything,非常酷炫的项目：[https://github.com/2d-inc/HistoryOfEverything][https_github.com_2d-inc_HistoryOfEverything]
10. WanAndroid客户端：[https://github.com/Sky24n/flutter\_wanandroid][https_github.com_Sky24n_flutter_wanandroid]
11. Best-Flutter-UI-Templates，非常漂亮的一个App：[https://github.com/mitesh77/Best-Flutter-UI-Templates][https_github.com_mitesh77_Best-Flutter-UI-Templates]
12. flutter\_deer:[https://github.com/simplezhli/flutter\_deer][https_github.com_simplezhli_flutter_deer]
13. FlutterFoodybite:[https://github.com/JideGuru/FlutterFoodybite][https_github.com_JideGuru_FlutterFoodybite]
14. 开源中国客户端:[https://github.com/yubo725/flutter-osc][https_github.com_yubo725_flutter-osc]
15. Flutter 高仿知乎 UI:[https://github.com/xujiyou/zhihu-flutter][https_github.com_xujiyou_zhihu-flutter]
16. 高仿书旗小说 Flutter版:[https://github.com/huanxsd/flutter\_shuqi][https_github.com_huanxsd_flutter_shuqi]
17. flutter 下拉刷新：[https://github.com/xuelongqy/flutter\_easyrefresh][https_github.com_xuelongqy_flutter_easyrefresh]
18. 仿网易云音乐:[https://github.com/boyan01/flutter-netease-music][https_github.com_boyan01_flutter-netease-music]
19. 玩Android客户端:[https://github.com/phoenixsky/fun\_android\_flutter][https_github.com_phoenixsky_fun_android_flutter]
20. Flutter淘宝App:[https://github.com/GanZhiXiong/GZXTaoBaoAppFlutter][https_github.com_GanZhiXiong_GZXTaoBaoAppFlutter]
21. 交错GridView（可以实现瀑布流）：[https://github.com/letsar/flutter\_staggered\_grid\_view][https_github.com_letsar_flutter_staggered_grid_view]
22. 渲染Markdown：[https://github.com/flutter/flutter\_markdown][https_github.com_flutter_flutter_markdown]
23. 图表： [https://github.com/imaNNeoFighT/fl\_chart][https_github.com_imaNNeoFighT_fl_chart]
24. 城市列表，联系人列表，索引&悬停:[https://github.com/flutterchina/azlistview][https_github.com_flutterchina_azlistview]

## Flutter 相关网站及博客 ##

1.  Flutter 官方网站（英文）：[https://flutter.dev/][https_flutter.dev]
2.  Flutter 官方网站（中文）：[https://flutter-io.cn/][https_flutter-io.cn]

## 相关文章 ##

1.  全网最全 Flutter 与 React Native 深入对比分析：[https://www.jianshu.com/p/da80214720eb][https_www.jianshu.com_p_da80214720eb]
2.  致Flutter初学者的一封信：[http://laomengit.com/][http_laomengit.com]
3.  Flutter学习路线：[http://laomengit.com/flutter/roadmap/][http_laomengit.com_flutter_roadmap]
4.  Flutter 开发踩坑记录（干货总结）:[https://juejin.im/post/5e58ceadf265da575918dd14][https_juejin.im_post_5e58ceadf265da575918dd14]
5.  带有Flutter的粒子动画: [https://juejin.im/post/5e1d5b9b6fb9a03013306588][https_juejin.im_post_5e1d5b9b6fb9a03013306588]
6.  Flutter中的花式背景动画: [https://juejin.im/post/5e1c38c96fb9a02fee1ed09e][https_juejin.im_post_5e1c38c96fb9a02fee1ed09e]

1.  【Flutter高级玩法-shape】Path在手，天下我有:[https://juejin.im/post/5e6196066fb9a07c8b5bbdf5][https_juejin.im_post_5e6196066fb9a07c8b5bbdf5]

1.  Flutter完整开发实战详解(二十一、 Flutter 画面渲染的全面解析):[https://juejin.im/post/5e7c8419e51d455c706ca00d][https_juejin.im_post_5e7c8419e51d455c706ca00d]

1.  【Flutter脱发录】也来实现一下灭霸效果: [https://juejin.im/post/5e7f5be55188257396515dbc][https_juejin.im_post_5e7f5be55188257396515dbc]

1.  Flutter：图像的爆炸动画 [https://juejin.im/post/5e3c17876fb9a07cab3a87fe][https_juejin.im_post_5e3c17876fb9a07cab3a87fe]

1.  你知道吗，Flutter内置了10多种show:[https://juejin.im/post/5e7362f76fb9a07c9855105b][https_juejin.im_post_5e7362f76fb9a07c9855105b]
2.  一个高自由度的Flutter 视频播放器: [https://juejin.im/post/5e1da0a55188254dfc6abde4][https_juejin.im_post_5e1da0a55188254dfc6abde4]
3.  字节跳动为什么选用Flutter：并非跨平台终极之选，但它可能是不一样的未来: [https://juejin.im/post/5e81e37f6fb9a03c7e200370][https_juejin.im_post_5e81e37f6fb9a03c7e200370]
    
    ## 交流 ##

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：[http://laomengit.com][http_laomengit.com 1] 里面包含160多个组件的详细用法。

[20200407205255537.png]: /images/20230528/3227a76c72824bbd8e748b923cc4ae53.png
[https_github.com_781238222_flutter-do]: https://github.com/781238222/flutter-do
[https_www.youtube.com_watch_v_b_sQ9bMltGU_list_PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG]: https://www.youtube.com/watch?v=b_sQ9bMltGU&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
[http_laomengit.com]: http://laomengit.com/
[http_laomengit.com_flutter_module_animated_1]: http://laomengit.com/flutter/module/animated_1/
[http_laomengit.com_flutter_module_animation_combined]: http://laomengit.com/flutter/module/animation_combined
[http_laomengit.com_flutter_module_animated_choose]: http://laomengit.com/flutter/module/animated_choose
[Travel Cards]: https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/parallax_travel_cards_list
[Mindfullness Gooey Transition]: https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/gooey_edge
[page-transformer]: https://github.com/roughike/page-transformer
[transformer_page_view]: https://github.com/best-flutter/transformer_page_view
[smooth_page_indicator]: https://github.com/Milad-Akarie/smooth_page_indicator
[Fluid Button Bar]: https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/fluid_nav_bar
[Icon Flip Button Bar]: https://github.com/gskinnerTeam/flutter_vignettes/tree/master/vignettes/bubble_tab_bar
[fancy_bottom_navigation]: https://github.com/tunitowen/fancy_bottom_navigation
[circular_bottom_navigation]: https://github.com/imaNNeoFighT/circular_bottom_navigation
[bottom_navy_bar]: https://github.com/pedromassango/bottom_navy_bar
[titled_navigation_bar]: https://github.com/pedromassango/titled_navigation_bar
[https_github.com_781238222_flutter-do_tree_master_flutter_fly]: https://github.com/781238222/flutter-do/tree/master/flutter_fly
[https_github.com_781238222_flutter-do_tree_master_flutter_upgrade]: https://github.com/781238222/flutter-do/tree/master/flutter_upgrade
[https_github.com_iampawan_FlutterExampleApps]: https://github.com/iampawan/FlutterExampleApps
[https_github.com_alibaba_flutter-go]: https://github.com/alibaba/flutter-go
[https_github.com_samarthagarwal_FlutterScreens]: https://github.com/samarthagarwal/FlutterScreens
[https_github.com_kaina404_FlutterDouBan]: https://github.com/kaina404/FlutterDouBan
[https_github.com_brianegan_flutter_architecture_samples]: https://github.com/brianegan/flutter_architecture_samples
[https_github.com_CarGuo_gsy_github_app_flutter]: https://github.com/CarGuo/gsy_github_app_flutter
[https_github.com_2d-inc_HistoryOfEverything]: https://github.com/2d-inc/HistoryOfEverything
[https_github.com_Sky24n_flutter_wanandroid]: https://github.com/Sky24n/flutter_wanandroid
[https_github.com_mitesh77_Best-Flutter-UI-Templates]: https://github.com/mitesh77/Best-Flutter-UI-Templates
[https_github.com_simplezhli_flutter_deer]: https://github.com/simplezhli/flutter_deer
[https_github.com_JideGuru_FlutterFoodybite]: https://github.com/JideGuru/FlutterFoodybite
[https_github.com_yubo725_flutter-osc]: https://github.com/yubo725/flutter-osc
[https_github.com_xujiyou_zhihu-flutter]: https://github.com/xujiyou/zhihu-flutter
[https_github.com_huanxsd_flutter_shuqi]: https://github.com/huanxsd/flutter_shuqi
[https_github.com_xuelongqy_flutter_easyrefresh]: https://github.com/xuelongqy/flutter_easyrefresh
[https_github.com_boyan01_flutter-netease-music]: https://github.com/boyan01/flutter-netease-music
[https_github.com_phoenixsky_fun_android_flutter]: https://github.com/phoenixsky/fun_android_flutter
[https_github.com_GanZhiXiong_GZXTaoBaoAppFlutter]: https://github.com/GanZhiXiong/GZXTaoBaoAppFlutter
[https_github.com_letsar_flutter_staggered_grid_view]: https://github.com/letsar/flutter_staggered_grid_view
[https_github.com_flutter_flutter_markdown]: https://github.com/flutter/flutter_markdown
[https_github.com_imaNNeoFighT_fl_chart]: https://github.com/imaNNeoFighT/fl_chart
[https_github.com_flutterchina_azlistview]: https://github.com/flutterchina/azlistview
[https_flutter.dev]: https://flutter.dev/
[https_flutter-io.cn]: https://flutter-io.cn/
[https_www.jianshu.com_p_da80214720eb]: https://www.jianshu.com/p/da80214720eb
[http_laomengit.com_flutter_roadmap]: http://laomengit.com/flutter/roadmap/
[https_juejin.im_post_5e58ceadf265da575918dd14]: https://juejin.im/post/5e58ceadf265da575918dd14
[https_juejin.im_post_5e1d5b9b6fb9a03013306588]: https://juejin.im/post/5e1d5b9b6fb9a03013306588
[https_juejin.im_post_5e1c38c96fb9a02fee1ed09e]: https://juejin.im/post/5e1c38c96fb9a02fee1ed09e
[https_juejin.im_post_5e6196066fb9a07c8b5bbdf5]: https://juejin.im/post/5e6196066fb9a07c8b5bbdf5
[https_juejin.im_post_5e7c8419e51d455c706ca00d]: https://juejin.im/post/5e7c8419e51d455c706ca00d
[https_juejin.im_post_5e7f5be55188257396515dbc]: https://juejin.im/post/5e7f5be55188257396515dbc
[https_juejin.im_post_5e3c17876fb9a07cab3a87fe]: https://juejin.im/post/5e3c17876fb9a07cab3a87fe
[https_juejin.im_post_5e7362f76fb9a07c9855105b]: https://juejin.im/post/5e7362f76fb9a07c9855105b
[https_juejin.im_post_5e1da0a55188254dfc6abde4]: https://juejin.im/post/5e1da0a55188254dfc6abde4
[https_juejin.im_post_5e81e37f6fb9a03c7e200370]: https://juejin.im/post/5e81e37f6fb9a03c7e200370
[http_laomengit.com 1]: http://laomengit.com