[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9366":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},9366,"flutter_dojo","xuyisheng\u002Fflutter_dojo","xuyisheng","A beautiful design and useful project for Building a flutter knowledge architecture","",null,"Dart",1419,197,32,3,0,54.89,"GNU General Public License v3.0",false,"master",true,[23,24,25,26,27],"beginner-friendly","design","flutter","ui","ui-components","2026-06-12 04:00:44","# Flutter Dojo\n\n[![license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-GPL-yellow.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002Fgpl-license)  ![Flutter dojo Release apk](https:\u002F\u002Fgithub.com\u002Fxuyisheng\u002Fflutter_dojo\u002Fworkflows\u002FFlutter%20dojo%20Release%20apk\u002Fbadge.svg)\n\n## Change log\n\n[Flutter Dojo Change Log](https:\u002F\u002Fgithub.com\u002Fxuyisheng\u002Fflutter_dojo\u002Fblob\u002Fmaster\u002FCHANGELOG.md)\n\n## 我的网站\n\n[https:\u002F\u002Fxuyisheng.top\u002F](https:\u002F\u002Fxuyisheng.top\u002F)\n\n## Wiki\n\n[Flutter Dojo Wiki](https:\u002F\u002Fgithub.com\u002Fxuyisheng\u002Fflutter_dojo\u002Fwiki)\n\n## 体验APK\n\n[Github Actions APK download](https:\u002F\u002Fgithub.com\u002Fxuyisheng\u002Fflutter_dojo\u002Freleases)\n\n认识Flutter是在18年，移动端开发日趋成熟的情况下，很多开发者都在寻求跨平台开发的终极法门，在经过了webview、RN的痛苦之后，Flutter的出现，给跨平台开发带来了一线曙光。自此，便开始了Flutter的学习之路，布道师之路，修仙之路。\n\n## 筑基\n\nFlutter的学习曲线很奇怪，像坐过山车一样，初学很简单，上手几天，很快就能写一些基本的界面，但是很快就遇到了瓶颈，因为官方的Widget越来越多，越来越复杂，学了忘，忘了学，有些人突破了，成为了一代先驱，有些人则被搞的一团雾水，大骂一声，垃圾Flutter，毁我青春。\n\n相信大部分上手的开发者，都会抱怨两个问题，一是Widget太多，二是嵌套太多。嵌套太多的问题，没什么好解释的，大部分有这种抱怨的人，都是因为不知道如何正确的使用茫茫多的Widget而恼羞成怒的。\n\n对于UI界面来说，树形结构是表现UI最好的方式，当然可以通过很多其它的方式来减少嵌套，但simple is fast，Android xml布局中，嵌套近十层的布局比比皆是，这对于写UI来说，并不会造成什么困扰。\n\n但是Widget太多，确实是一个比较麻烦的问题，这里的学习什么考验开发者的学习能力，Flutter虽然在设计Widget方面略显随意，但是官方所给出的Widget，几乎都是比较实用的，覆盖了开发的方方面面，只用常用的那些Widget，确实也可以完成大部分UI的开发，但是，掌握更多的官方Widget，会让你的开发更加方便。\n\n我在学习的过程中，自然也遇到了这些问题，经过一年多的沉淀，逐渐对整个架构有了一些认识，所以也萌生了一些想法，想通过一个Flutter App，来帮助初学者、进阶者快速掌握Flutter，这才有了Flutter Dojo的雏形。\n\nDojo，源自日语「道場」。我希望的是通过Flutter Dojo让初学者快速掌握官方Widget的常用使用方法，让进阶者掌握Flutter开发组件、封装组件的基本思路，让学有小成者更加高效、更加快速的进行Flutter开发。\n\n所以，我在最开始的时候，将Flutter Dojo分为了下面几个部分：\n\n- Widgets\n- UI Pattern\n- Animations\n- Back-end Util\n\nFlutter Dojo的设计主要围绕下面三个部分展开：\n\n- 良好的演示效果\n- 简单明了的代码\n- 好看的界面设计\n\n整个项目的代码都以上面几点作为目标，代码力图简洁，不使用复杂的架构设计和抽象，每一部分的演示代码几乎都可以单独使用，同时尽可能的美化UI。\n\n### Widgets\n\nWidgets部分的设计思路是为了演示Flutter中茫茫多的Widget的具体使用场景和功能，虽然只使用Flutter提供的一些基本Widget，已经可以实现大部分的界面、功能开发，但是，了解更多的Widget，可以让开发者的开发思路更广，使用更加合适的Widget来完成合适的开发场景。\n\n经过迭代，Widgets部分已经完善了官方的所有Widget，以及官方在Category中未列举但是有很大实用价值的Widget。\n\n### UI Pattern\n\nUI Pattern部分的设计思路是为了帮助开发者了解如何使用Flutter来拆分大部分APP中的界面模板，通过Flutter实现一个个UI组件，来组合成完整的Flutter界面。\n\n通过UI Pattern的学习，可以让开发者了解Flutter的具体解题思路，如何拆分UI的实现套路。\n\n### Animations\n\nAnimations部分的设计思路是为了让开发者对Flutter的动画有一个完整的认识，针对不同的场景使用不同的动画方案，同时，对大部分常见的动画场景进行梳理，完成动画场景的归类。\n\n### Back-end Util\n\nBack-end Util这部分主要是针对Flutter中的非UI场景知识点进行的梳理，包括数据持久化、解析、状态管理等等。\n\n最初的这一版，在GitHub的私有仓库迭代了将近一年，才终于基本定型Release出来。\n\n![](https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383cd09ef0c5a1?w=1756&h=216&f=png&s=26566)\n\n## 出窍\n\n有了具体的设计思路后，我就开始构思如何来实现了，Flutter Dojo，首先是一个Demo，即演示类的App，所以，它一定是重在代码，但却可以通过Demo的分解，将功能演示出来，其次，虽然说是Demo，但绝不是一个粗制滥造的UI，长得好看，才叫Flutter Dojo，长的丑，只能叫Flutter Demo。所以，最后的设计风格调整了好几次，最终定稿如下。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383d6655c0e3a5\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383d7463fc23a2\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383da406b44d80\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383daac0cce400\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n这四个部分，是Flutter Dojo的核心功能，分别对应了上面提到的四个部分。\n\n### Widgets\n\nWidgets部分的设计完全按照官方的Flutter Widget Category来进行分类。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383df33a52ca7b\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383df7a0c6fc74\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e0179847616\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383dec1e0ca080\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n一级分类和二级分类，分类整理了官方的所有Widget和简介。\n\n当然，核心是每个Widget的使用场景的展示。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e435b984189\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e47690e2304\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e4bd681740b\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e5243b50eab\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n这里只展示了几个Widget的演示界面，更多的Widget，请自行使用。\n\n### UI Pattern\n\nUI Pattern的分类，我是按照组件的功能进行划分的。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e7dc396c8f1\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e813b814e7c\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e85ed0b5edc\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383e8a39ba4cfd\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n### Animations\n\nAnimations的分类同样是根据动画构建类型来进行分类的。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383eb021205014\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383eb1741e7fd5\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383eb2e7684c8d\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383eb593fe43e0\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n### Back-end Util\n\nFlutter虽然说是一个UI跨平台框架，但是其征途依然是星辰大海，所以即使是非UI的东西，Flutter依然会包含，所以，这部分就展示的是各种非UI的Flutter开发技术点。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383ede7ae90252\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383edfa3c835fb\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383ee110e13e2a\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383ee23f7926df\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n有了这四部分的加持，Flutter Dojo的核心功能就算是完备了，当然，这里面的分类和Demo依然在不停的更新中，所以，Flutter Dojo只会越来越完善，不过万变不离其宗，其设计思想依然是围绕着这四个方面展开的。\n\n至此，Flutter Dojo 1.0 发布。\n\n## 分神\n\n在设计完这四个核心的方向之后，我开始自己使用Flutter Dojo来巩固Flutter的学习，在使用过程中，逐渐发现了一些不足，比如在使用App的时候，不能查看代码，虽然场景设计的是通过界面来掌握Flutter Widget的学习，但是，并不是所有的场景都能完美的让你学到这个Widget的使用精髓，所以，在App端查看代码是一个刚需，在学习场景的时候，遇到不懂的地方，可以直接通过查看代码来了解具体的使用原理。\n\n其次，Flutter Dojo的代码设计为copy anywhere的，Demo中的代码，几乎全部是可以完全复制使用的，这也是为了初学者考虑，整个代码不包含复用、继承等架构设计，开发者通过单个的Demo示例就可以完全掌握，而不是要先了解其它基类、抽象的实现等等，所以要实现代码的轻松copy功能。\n\n另外，由于Widget和Pattern分类越来越多，查看起来经常会忘记分类的具体位置，所以，搜索功能也是亟需添加的。\n\n因此，在Flutter Dojo 1.0的基础之上，2.0版本新增了搜索、查看源代码以及分享功能。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383fced5961e76\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383fd0172434f5\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383fd165271d71\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17383fe5e3f5f153\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n搜索功能非常强大，支持模糊匹配、前后缀匹配，效率高、速度快。\n\n查看源代码功能，使用Markdown解析源代码，可以直接在App中查看代码。\n\n分享功能可直接将源代码分享出去，实现copy anywhere。\n\n至此，Flutter Dojo 2.0 发布。\n\n## 合体\n\nFlutter Dojo经过两个版本的迭代，不仅仅在功能上更加完善了，分类和Demo的拆解也更加优秀了，所以，在Flutter Dojo 3.0上，我增加了一些信息流的设计，让开发者在学习这些现有知识的基础上，能够更加好的接触到一些更新的Flutter文章，所以，这里我设计了一个Feed功能，将掘金上的Flutter Tag下的文章聚合到Flutter Dojo中。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F173844c76db7fa70\" width=\"150\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F173844c89d52f06f\" width=\"150\"\u002F>\n\u003C\u002Fp>\n\n至此，Flutter Dojo 3.0 发布。\n\n## 渡劫\n\n本篇是Flutter Dojo解析文章的总纲，后面会有一系列文章来进行分析Flutter Dojo中那些不为人知的秘密。\n\n详情请参考Wiki [Flutter Dojo Wiki](https:\u002F\u002Fgithub.com\u002Fxuyisheng\u002Fflutter_dojo\u002Fwiki)\n\n## 飞升\n\nFlutter Dojo具体该怎么使用呢？首先，大家可以在GitHub下载最新的Flutter Dojo Apk\n\n[Github Actions APK download](https:\u002F\u002Fgithub.com\u002Fxuyisheng\u002Fflutter_dojo\u002Freleases)\n\n或者在【百度应用市场】【小米应用市场】搜索【Flutter dojo】下载最新的Apk文件安装。\n\n先熟悉整体结构，在空闲时间，对感兴趣的Demo进行学习，遇到难点，可以通过App内置的查看代码功能查看具体代码，或者通过分析功能将代码copy出来分析。\n\n当你觉得整体差不多后，可以将整个工程clone下来，针对代码和工程做进一步的学习。\n\n## 修仙\n\nFlutter Dojo开源至今，受到了很多Flutter学习者和爱好者的喜爱，也有越来越多的人加入到Flutter的学习中来，所以我建了个Flutter修仙群，但是人数太多，所以分成了【Flutter修仙指南】【Flutter修仙指北】两个群，对Flutter感兴趣的朋友，可以添加我的微信，注明加入Flutter修仙群。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F173845eee975fa26\" width=\"300\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F17384621ec0f5c96\" width=\"300\"\u002F>\n\u003C\u002Fp>\n\n当然，开源不易，国际惯例。\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F1738463a9fbd479f\" width=\"300\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2020\u002F7\u002F25\u002F1738463bd42440a5\" width=\"300\"\u002F>\n\u003C\u002Fp>\n\n## 编译环境\n\n```\nFlutter 1.17.5 • channel stable • https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git\nFramework • revision 8af6b2f038 (4 weeks ago) • 2020-06-30 12:53:55 -0700\nEngine • revision ee76268252\nTools • Dart 2.8.4\n```\n\nFlutter Dojo 3.0 在GitHub Action CI编译通过。\n\n[![Stargazers over time](https:\u002F\u002Fstarchart.cc\u002Fxuyisheng\u002Fflutter_dojo.svg)](https:\u002F\u002Fstarchart.cc\u002Fxuyisheng\u002Fflutter_dojo)\n\n","Flutter Dojo 是一个旨在帮助开发者构建 Flutter 知识体系的项目。它通过展示各种官方 Widget 的使用方法、UI 模式、动画效果以及后端工具来实现这一目标。项目采用 Dart 语言编写，具有良好的演示效果和简洁明了的代码结构，同时注重界面设计的美观性。Flutter Dojo 特别适合于初学者快速上手 Flutter 开发，同时也为进阶开发者提供了组件封装及复杂 UI 设计的参考思路。无论是想要学习基本 Widget 使用的新手还是希望提升开发效率的经验开发者，都能从这个项目中获益。",2,"2026-06-11 03:22:20","top_language"]