A beautiful design and useful project for Building a flutter knowledge architecture

Overview

Flutter Dojo

license Flutter dojo Release apk

Change log

Flutter Dojo Change Log

我的网站

https://xuyisheng.top/

Wiki

Flutter Dojo Wiki

体验APK

Github Actions APK download

认识Flutter是在18年,移动端开发日趋成熟的情况下,很多开发者都在寻求跨平台开发的终极法门,在经过了webview、RN的痛苦之后,Flutter的出现,给跨平台开发带来了一线曙光。自此,便开始了Flutter的学习之路,布道师之路,修仙之路。

筑基

Flutter的学习曲线很奇怪,像坐过山车一样,初学很简单,上手几天,很快就能写一些基本的界面,但是很快就遇到了瓶颈,因为官方的Widget越来越多,越来越复杂,学了忘,忘了学,有些人突破了,成为了一代先驱,有些人则被搞的一团雾水,大骂一声,垃圾Flutter,毁我青春。

相信大部分上手的开发者,都会抱怨两个问题,一是Widget太多,二是嵌套太多。嵌套太多的问题,没什么好解释的,大部分有这种抱怨的人,都是因为不知道如何正确的使用茫茫多的Widget而恼羞成怒的。

对于UI界面来说,树形结构是表现UI最好的方式,当然可以通过很多其它的方式来减少嵌套,但simple is fast,Android xml布局中,嵌套近十层的布局比比皆是,这对于写UI来说,并不会造成什么困扰。

但是Widget太多,确实是一个比较麻烦的问题,这里的学习什么考验开发者的学习能力,Flutter虽然在设计Widget方面略显随意,但是官方所给出的Widget,几乎都是比较实用的,覆盖了开发的方方面面,只用常用的那些Widget,确实也可以完成大部分UI的开发,但是,掌握更多的官方Widget,会让你的开发更加方便。

我在学习的过程中,自然也遇到了这些问题,经过一年多的沉淀,逐渐对整个架构有了一些认识,所以也萌生了一些想法,想通过一个Flutter App,来帮助初学者、进阶者快速掌握Flutter,这才有了Flutter Dojo的雏形。

Dojo,源自日语「道場」。我希望的是通过Flutter Dojo让初学者快速掌握官方Widget的常用使用方法,让进阶者掌握Flutter开发组件、封装组件的基本思路,让学有小成者更加高效、更加快速的进行Flutter开发。

所以,我在最开始的时候,将Flutter Dojo分为了下面几个部分:

  • Widgets
  • UI Pattern
  • Animations
  • Back-end Util

Flutter Dojo的设计主要围绕下面三个部分展开:

  • 良好的演示效果
  • 简单明了的代码
  • 好看的界面设计

整个项目的代码都以上面几点作为目标,代码力图简洁,不使用复杂的架构设计和抽象,每一部分的演示代码几乎都可以单独使用,同时尽可能的美化UI。

Widgets

Widgets部分的设计思路是为了演示Flutter中茫茫多的Widget的具体使用场景和功能,虽然只使用Flutter提供的一些基本Widget,已经可以实现大部分的界面、功能开发,但是,了解更多的Widget,可以让开发者的开发思路更广,使用更加合适的Widget来完成合适的开发场景。

经过迭代,Widgets部分已经完善了官方的所有Widget,以及官方在Category中未列举但是有很大实用价值的Widget。

UI Pattern

UI Pattern部分的设计思路是为了帮助开发者了解如何使用Flutter来拆分大部分APP中的界面模板,通过Flutter实现一个个UI组件,来组合成完整的Flutter界面。

通过UI Pattern的学习,可以让开发者了解Flutter的具体解题思路,如何拆分UI的实现套路。

Animations

Animations部分的设计思路是为了让开发者对Flutter的动画有一个完整的认识,针对不同的场景使用不同的动画方案,同时,对大部分常见的动画场景进行梳理,完成动画场景的归类。

Back-end Util

Back-end Util这部分主要是针对Flutter中的非UI场景知识点进行的梳理,包括数据持久化、解析、状态管理等等。

最初的这一版,在GitHub的私有仓库迭代了将近一年,才终于基本定型Release出来。

出窍

有了具体的设计思路后,我就开始构思如何来实现了,Flutter Dojo,首先是一个Demo,即演示类的App,所以,它一定是重在代码,但却可以通过Demo的分解,将功能演示出来,其次,虽然说是Demo,但绝不是一个粗制滥造的UI,长得好看,才叫Flutter Dojo,长的丑,只能叫Flutter Demo。所以,最后的设计风格调整了好几次,最终定稿如下。

这四个部分,是Flutter Dojo的核心功能,分别对应了上面提到的四个部分。

Widgets

Widgets部分的设计完全按照官方的Flutter Widget Category来进行分类。

一级分类和二级分类,分类整理了官方的所有Widget和简介。

当然,核心是每个Widget的使用场景的展示。

这里只展示了几个Widget的演示界面,更多的Widget,请自行使用。

UI Pattern

UI Pattern的分类,我是按照组件的功能进行划分的。

Animations

Animations的分类同样是根据动画构建类型来进行分类的。

Back-end Util

Flutter虽然说是一个UI跨平台框架,但是其征途依然是星辰大海,所以即使是非UI的东西,Flutter依然会包含,所以,这部分就展示的是各种非UI的Flutter开发技术点。

有了这四部分的加持,Flutter Dojo的核心功能就算是完备了,当然,这里面的分类和Demo依然在不停的更新中,所以,Flutter Dojo只会越来越完善,不过万变不离其宗,其设计思想依然是围绕着这四个方面展开的。

至此,Flutter Dojo 1.0 发布。

分神

在设计完这四个核心的方向之后,我开始自己使用Flutter Dojo来巩固Flutter的学习,在使用过程中,逐渐发现了一些不足,比如在使用App的时候,不能查看代码,虽然场景设计的是通过界面来掌握Flutter Widget的学习,但是,并不是所有的场景都能完美的让你学到这个Widget的使用精髓,所以,在App端查看代码是一个刚需,在学习场景的时候,遇到不懂的地方,可以直接通过查看代码来了解具体的使用原理。

其次,Flutter Dojo的代码设计为copy anywhere的,Demo中的代码,几乎全部是可以完全复制使用的,这也是为了初学者考虑,整个代码不包含复用、继承等架构设计,开发者通过单个的Demo示例就可以完全掌握,而不是要先了解其它基类、抽象的实现等等,所以要实现代码的轻松copy功能。

另外,由于Widget和Pattern分类越来越多,查看起来经常会忘记分类的具体位置,所以,搜索功能也是亟需添加的。

因此,在Flutter Dojo 1.0的基础之上,2.0版本新增了搜索、查看源代码以及分享功能。

搜索功能非常强大,支持模糊匹配、前后缀匹配,效率高、速度快。

查看源代码功能,使用Markdown解析源代码,可以直接在App中查看代码。

分享功能可直接将源代码分享出去,实现copy anywhere。

至此,Flutter Dojo 2.0 发布。

合体

Flutter Dojo经过两个版本的迭代,不仅仅在功能上更加完善了,分类和Demo的拆解也更加优秀了,所以,在Flutter Dojo 3.0上,我增加了一些信息流的设计,让开发者在学习这些现有知识的基础上,能够更加好的接触到一些更新的Flutter文章,所以,这里我设计了一个Feed功能,将掘金上的Flutter Tag下的文章聚合到Flutter Dojo中。

至此,Flutter Dojo 3.0 发布。

渡劫

本篇是Flutter Dojo解析文章的总纲,后面会有一系列文章来进行分析Flutter Dojo中那些不为人知的秘密。

详情请参考Wiki Flutter Dojo Wiki

飞升

Flutter Dojo具体该怎么使用呢?首先,大家可以在GitHub下载最新的Flutter Dojo Apk

Github Actions APK download

或者在【百度应用市场】【小米应用市场】搜索【Flutter dojo】下载最新的Apk文件安装。

先熟悉整体结构,在空闲时间,对感兴趣的Demo进行学习,遇到难点,可以通过App内置的查看代码功能查看具体代码,或者通过分析功能将代码copy出来分析。

当你觉得整体差不多后,可以将整个工程clone下来,针对代码和工程做进一步的学习。

修仙

Flutter Dojo开源至今,受到了很多Flutter学习者和爱好者的喜爱,也有越来越多的人加入到Flutter的学习中来,所以我建了个Flutter修仙群,但是人数太多,所以分成了【Flutter修仙指南】【Flutter修仙指北】两个群,对Flutter感兴趣的朋友,可以添加我的微信,注明加入Flutter修仙群。

当然,开源不易,国际惯例。

编译环境

Flutter 1.17.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8af6b2f038 (4 weeks ago) • 2020-06-30 12:53:55 -0700
Engine • revision ee76268252
Tools • Dart 2.8.4

Flutter Dojo 3.0 在GitHub Action CI编译通过。

Stargazers over time

Comments
  • 项目下载下来有问题,运行不了

    项目下载下来有问题,运行不了

    `Compiler message: lib/widgets/touchinteractions/dragtarget.dart:73:28: Error: The argument type 'Null Function(double)' can't be assigned to the parameter type 'void Function(Object)'.

    • 'Object' is from 'dart:core'. onLeave: (double value) { ^ Target kernel_snapshot failed: Exception: Errors during snapshot creation: null build failed.

    FAILURE: Build failed with an exception.

    • Where: Script 'D:\Flutter\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 801

    • What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command 'D:\Flutter\flutter\bin\flutter.bat'' finished with non-zero exit value 1

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.`
    opened by xhcui2008 4
  • Not found: 'package:image/image.dart' import 'package:image/image.dart' as image;

    Not found: 'package:image/image.dart' import 'package:image/image.dart' as image;

    Compiler message: Error: Could not resolve the package 'image' in 'package:image/image.dart'. lib/category/animation/simulation/particle.dart:9:8: Error: Not found: 'package:image/image.dart' import 'package:image/image.dart' as image; ^ lib/category/animation/simulation/particle.dart:92:28: Error: Type 'image.Image' not found. void separatePixels(List<image.Image> blankLayers, image.Image fullImage, int width, int height) { ^^^^^^^^^^^ lib/category/animation/simulation/particle.dart:92:54: Error: Type 'image.Image' not found. void separatePixels(List<image.Image> blankLayers, image.Image fullImage, int width, int height) { ^^^^^^^^^^^ lib/category/animation/simulation/particle.dart:103:10: Error: Type 'image.Image' not found. Future<image.Image> convertWidget2Image() async { ^^^^^^^^^^^ lib/category/animation/simulation/particle.dart:111:30: Error: Type 'image.Image' not found. Widget convertImage2Widget(image.Image png) { ^^^^^^^^^^^ lib/category/animation/simulation/particle.dart:82:11: Error: 'Image' isn't a type. image.Image fullImage = await convertWidget2Image(); ^^^^^ lib/category/animation/simulation/particle.dart:85:16: Error: 'Image' isn't a type. List<image.Image> blankLayers = List.generate(widget.numberOfLayers, (i) => image.Image(width, height)); ^^^^^ lib/category/animation/simulation/particle.dart:85:81: Error: Method not found: 'Image'. List<image.Image> blankLayers = List.generate(widget.numberOfLayers, (i) => image.Image(width, height)); ^^^^^ lib/category/animation/simulation/particle.dart:92:34: Error: 'Image' isn't a type. void separatePixels(List<image.Image> blankLayers, image.Image fullImage, int width, int height) { ^^^^^ lib/category/animation/simulation/particle.dart:92:60: Error: 'Image' isn't a type. void separatePixels(List<image.Image> blankLayers, image.Image fullImage, int width, int height) { ^^^^^ lib/category/animation/simulation/particle.dart:108:12: Error: Method not found: 'decodeImage'. return image.decodeImage(pngBytes); ^^^^^^^^^^^ lib/category/animation/simulation/particle.dart:111:36: Error: 'Image' isn't a type. Widget convertImage2Widget(image.Image png) { ^^^^^ lib/category/animation/simulation/particle.dart:112:41: Error: Method not found: 'encodePng'. Uint8List data = Uint8List.fromList(image.encodePng(png)); ^^^^^^^^^ lib/category/widgets/touchinteractions/dragtarget.dart:86:28: Error: The argument type 'Null Function(double)' can't be assigned to the parameter type 'void Function(Object)'.

    • 'Object' is from 'dart:core'. onLeave: (double value) { ^
    opened by live17909 2
  • 错误的路径导致App内无法查看源码

    错误的路径导致App内无法查看源码

    源文件的名称是下划线区分单词,而跳转markdown显示源代码的时候却是 MaterialPageRoute( builder: (context) => MarkdownPage(codePath + title.toLowerCase() + '.dart'), ) 直接将‘页面标题’转为小写字母,导致很多界面,点击查看源码的时候打开的路径异常而无法获取到正确的源码文件,从而没法实现跳转。

    help wanted 
    opened by jaredtech 2
  • 兄弟,你的图标就离谱

    兄弟,你的图标就离谱

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    opened by jing108 1
  •    > Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-reflect:1.3.21)

    > Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-reflect:1.3.21)

    FAILURE: Build failed with an exception.
    
    * What went wrong:
    A problem occurred configuring project ':shared_preferences'.
    > Could not resolve all artifacts for configuration ':shared_preferences:classpath'.
       > Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-reflect:1.3.21)
          > Could not get resource 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-reflect/1.3.21/kotlin-reflect-1.3.21.jar'.
             > Could not GET 'https://d29vzk4ow07wi7.cloudfront.net/a3065c822633191e0a3e3ee12a29bec234fc4b2864a6bb87ef48cce3e9e0c26a?response-content-disposition=attachment%3Bfilename%3D%22kotlin-reflect-1.3.21.jar%22&Policy=eyJTdGF0ZW1lbnQiOiBbeyJSZXNvdXJjZSI6Imh0dHAqOi8vZDI5dnprNG93MDd3aTcuY2xvdWRmcm9udC5uZXQvYTMwNjVjODIyNjMzMTkxZTBhM2UzZWUxMmEyOWJlYzIzNGZjNGIyODY0YTZiYjg3ZWY0OGNjZTNlOWUwYzI2YT9yZXNwb25zZS1jb250ZW50LWRpc3Bvc2l0aW9uPWF0dGFjaG1lbnQlM0JmaWxlbmFtZSUzRCUyMmtvdGxpbi1yZWZsZWN0LTEuMy4yMS5qYXIlMjIiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1ODIyNjk2Mzh9LCJJcEFkZHJlc3MiOnsiQVdTOlNvdXJjZUlwIjoiMC4wLjAuMC8wIn19fV19&Signature=c-T3jrsJeAtFfbjH7FwfvHRBv6k5hUxL3lFdTJfMPAIUBWs39--HLFfHst1NGYJSA629BLF7LM-RWa3U2kEt3GSsqHQMf47I97XRXR7sUVT9RNc-fTL1SY6gNKBGCSnvvV~5pwbAG6fixZTougP83K7U46ogJu~uU4m5GH2HqNB5qkZo6dB47pTj8MvRrFvX6rX3uxJBKKN0Jz598NKU-euqjQiiAkyGM9RzQ6Y9vJ2EpSbuj4dS1gDJgHEAUMSz3cOaZo9M6o4vqSTOj8EYB-2~eZFnmsLnHrBtTJAmRLOJoTMTJr3W6IYK3H8guscL6TsTIK8LK2Oz8ULwgUxPvw__&Key-Pair-Id=APKAIFKFWOMXM2UMTSFA'.
                > Received close_notify during handshake
    > Failed to notify project evaluation listener.
       > Could not get unknown property 'android' for project ':shared_preferences' of type org.gradle.api.Project.
       > Could not find method implementation() for arguments [project ':shared_preferences_macos'] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
       > Could not find method implementation() for arguments [project ':shared_preferences_web'] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
    
    opened by jinfagang 1
  • Global search

    Global search

    1算法增加了广度优先搜索字典树(广度优先搜索是为了结果的顺序),搜索任意位置关键字的方法 2算法增加kmp算法和直接用字符串contain的方法可供以后调整 3优化代码结构,把匹配策略放到search_strategy中,后续可以扩展 4支持keyword字段用空格分隔成多个关键字 5优化ui,搜索框右边增加一个删除已输入字符串的小按钮,搜索结果显示title和subtitle 6输入多关键字时,用来分隔关键字的逗号改成了空格,比较符合一般的搜索习惯

    opened by lzr2005987 0
  • simple search page and algorithm

    simple search page and algorithm

    添加了一个搜索页面,入口在主页左上角的FlutterLogo 算法封装在了search_utils里,添加完List类型的字典后可支持模糊搜索和前缀搜索,以及两者的组合,其中模糊搜索可以指定容错率。

    目前字典数据仅仅自己做了一点用来测试,而且暂时还没有支持点击跳转,后期可以用map把关键词映射到页面来实现。

    opened by lzr2005987 0
Owner
xuyisheng
Android & Flutter Developer 《Android群英传》《Android群英传-神兵利器》作者
xuyisheng
⚒️ A monorepo containing a collection of packages that provide useful functionality for building CLI applications in Dart.

⚒️ Dart CLI Utilities A monorepo containing a collection of packages that provide useful functionality for building CLI applications in Dart. Document

Invertase 14 Oct 17, 2022
Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.

Flutter Architecture Blueprints Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to dev

Katsuyuki Mori 2 Apr 9, 2022
Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.

Flutter Architecture Blueprints Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to dev

Daichi Furiya 1.5k Dec 31, 2022
Flutter Architecture inspired by Domain Driven Design, Onion and Clean Architecture

Inspiring Domain Driven Design Flutter Architecture Please take a look at my slides to learn more Strategic Domain Driven Design For Improving Flutter

Majid Hajian 324 Dec 25, 2022
Hassan 1 Sep 27, 2022
Ouday 25 Dec 15, 2022
Bilgi Testi Flutter - A knowledge testing app built with Flutter

Bilgi Testi 7 sorudan oluşan puanlama mekaniği olan, modern tasarımlı, flutter i

null 0 Feb 9, 2022
A flutter application that allows users to test their knowledge through quizzes made for specific topics.

Quiz_App A flutter application that allows users to test their knowledge through quizzes made for specific topics. Setup The application consists of a

null 0 Dec 29, 2021
A Flutter Weather App primarily developed to showcase my technical knowledge as well as practices I believe are the best.

Weather One This is a Flutter Weather App primarily developed to showcase my technical knowledge as well as practices I believe are the best. The weat

Phumudzo Muvhango 1 Apr 27, 2022
An e-learning Application for students to gather knowledge across various domains from the web.

EduHub A new Flutter App with advanced features to help students to access varoius study materials and contents without seraching loads of websites an

SAGNIK SANYAL 5 Jul 22, 2022
Flutter-clean-architecture - A simple flutter project developed with TDD and using Clean Architecture principles.

Clean Architecture This is a study project to practice TDD and a good approach of Clean Architecture for flutter projects. It is based on Reso Coder s

Luiz Paulo Franz 8 Jul 21, 2022
UI Design-The second phase of building the project for Flutter

project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

mohammed alhelou 1 May 9, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
Flutter starter project - boilerPlate for Clean Architecture with Domain-Driven-Design with commonly used dependencies

flutter_starter_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you

MJ Montes 0 Jan 2, 2022
Proyect with Clean Architecture / Hexagonal Architecture - Patron BLoC - The MovieDB API

flutter_movies_db A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

null 2 Sep 22, 2022
Flutter App Templete is a project that introduces an approach to architecture and project structure for developing Flutter apps.

Flutter App Template "Flutter App Template" is a project that introduces an approach to architecture and project structure for developing Flutter apps

Altive 126 Jan 5, 2023
GetX Architecture for large scale project, This project include - pagination, pull to refresh, localization, network call and advance error handling

GetX Architecture for large scale project, This project include - pagination, pull to refresh, localization, network call and advance error handling

Wai Han Ko 5 Nov 29, 2022
A collection of useful algorithms in Dart with keeping performance and flexibility on mind.

algorithmic A collection of useful algorithms in Dart with keeping performance and flexibility on mind. Usage The following import will give you acces

Sudipto Chandra 7 Jan 1, 2023
Kc - A Simple App Solution for Calculation Fraction (Kali) size of a Lehenga. this is very useful for Fashion designers and tailors. Simple UI with best User Experience.

kc A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is yo

Praveen Suthar 0 Jan 8, 2022