GSY Flutter Demo

English Document

不同于 GSYGithubAppFlutter 项目，本项目将逐步完善各种 Flutter 独立例子，方便新手学习上手。

相关文章

• ## Flutter系列文章专栏

• ### 同款 Flutter 完整项目版本 （ https://github.com/CarGuo/gsygithubapp_flutter ）
• ### 同款 Android Compose 版本（ https://github.com/CarGuo/GSYGithubAppCompose ）
• ### 同款 React Native 版 （ https://github.com/CarGuo/GSYGithubApp ）
• ### 同款 Android Kotlin View 版本（ https://github.com/CarGuo/GSYGithubAppKotlin ）
• ### 同款 Weex 版 （ https://github.com/CarGuo/GSYGithubAppWeex ）

• ## Flutter 完整开发实战详解 Gitbook 预览下载

Web 版在线测试

APK 下载

目前开始逐步补全完善，主要提供一些有用或者有趣的例子，如果你也有好例子，欢迎提交 PR 。

运行须知：配置好Flutter开发环境(目前Flutter SDK 版本 3.35 以上版本)。

如果克隆太慢或者图片看不到，可尝试从码云地址下载

| 公众号 | 掘金 | 知乎 | CSDN | 简书 |---------|---------|--------- |---------|---------| | GSYTech | 点我 | 点我 | 点我 | 点我

| | | | | | |------------------------------|------------------|------------------|------------------|------------------| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

demoRoutes（按分类表格）

基础控件（39）

| # | 名称 | 页面文件 | |---|---|---| | 1 | 文本输入框简单的 Controller | widget/basic/controllerdemopage.dart | | 2 | 实现控件圆角不同组合 | widget/basic/clipdemopage.dart | | 6 | 展示渐变带边框的文本 | widget/basic/gradienttextdemo_page.dart | | 7 | Transform 效果展示 | widget/basic/transformdemopage.dart | | 8 | 计算另类文本行间距展示 | widget/basic/textlineheightdemopage.dart | | 9 | 简单上下刷新 | widget/basic/refreshdemopage.dart | | 10 | 简单上下刷新2 | widget/basic/refreshdemopage2.dart | | 11 | 简单上下刷新3 | widget/scroll/custompull/refreshdemo_page3.dart | | 12 | 通过绝对定位布局 | widget/basic/positioneddemopage.dart | | 13 | 气泡提示框 | widget/basic/bubble/bubbledemopage.dart | | 14 | Tag效果展示 | widget/basic/tagdemopage.dart | | 15 | 共享元素跳转效果 | widget/basic/honordemopage.dart | | 17 | warpContent实现 | widget/basic/wrapcontentpage.dart | | 18 | 状态栏颜色修改（仅 App） | widget/basic/statusbardemopage.dart | | 19 | 键盘弹出与监听（仅 App） | widget/basic/keyboarddemopage.dart | | 22 | 全局悬浮按键效果 | widget/basic/floatingtouchdemo_page.dart | | 23 | 全局设置字体大小 | widget/basic/textsizedemo_page.dart | | 24 | 旧版实现富文本 | widget/basic/richtextdemo_page.dart | | 25 | 官方实现富文本 | widget/basic/richtextdemo_page2.dart | | 28 | 验证码输入框 | widget/basic/verificationcodeinputdemopage.dart | | 29 | 验证码输入框2 | widget/basic/verificationcodeinputdemopage2.dart | | 30 | 自定义布局展示效果 | widget/basic/custommultirenderdemopage.dart | | 31 | 自定义布局实现云词图展示 | widget/basic/cloud/clouddemopage.dart | | 35 | 键盘顶起展示（仅 App） | widget/basic/inputbottomdemo_page.dart | | 42 | 下弹筛选展示效果 | widget/basic/dropselectmenu/dropselectdemo_page.dart | | 48 | 使用 overflow 处理图片 | widget/basic/overflowimagepage.dart | | 49 | 展示 Align 排布控件 | widget/basic/aligndemopage.dart | | 50 | 通过不同尺寸计算方式展示比例 | widget/basic/carditempage.dart | | 59 | 一个有趣的圆形选择器 | widget/basic/bottomanimnav_page.dart | | 60 | 一个类似探探堆叠卡片例子 | widget/basic/indexstackdragcarddemo_page.dart | | 61 | 一个类似探探堆叠卡片例子2 | widget/basic/indexstackdragcarddemo_page2.dart | | 70 | 彩色进度条 | widget/basic/colorprogressdemo_page.dart | | 72 | 首尾添加数据不会抖动 | widget/basic/chatlistscrolldemopage.dart | | 73 | 首尾添加数据不会抖动2 | widget/basic/chatlistscrolldemopage_2.dart | | 74 | 测试路由嵌套 | widget/basic/routedemopage.dart | | 89 | png shadow | widget/basic/pngshadowdemo_page.dart | | 93 | 异步调用的顺序执行 | widget/basic/asynctosynccallpage.dart | | 110 | Black hole | widget/visual/blackholesimulation_page.dart | | 114 | 破坏杀·罗针 | widget/basic/akaza_page.dart |

列表滚动（31）

| # | 名称 | 页面文件 | |---|---|---| | 3 | 列表滑动监听 | widget/scroll/scrolllistenerdemo_page.dart | | 4 | 滑动到指定位置 | widget/scroll/scrolltoindexdemopage.dart | | 5 | 滑动到指定位置2 | widget/scroll/scrolltoindexdemopage2.dart | | 16 | 滑动验证 | widget/scroll/sliderverifypage.dart | | 26 | 第三方 viewpager 封装实现 | widget/scroll/viewpagerdemopage.dart | | 27 | 列表滑动过程控件停靠效果 | widget/scroll/sliverlistdemo_page.dart | | 32 | 列表滑动停靠 （Stick） | widget/scroll/stick/stickdemopage.dart | | 33 | 列表滑动停靠 （Stick）+ 展开收回 | widget/scroll/stick/stickdemopage2.dart | | 34 | 列表滑动停靠效果2 （Stick | widget/scroll/sliverstickdemo_page.dart | | 40 | 列表滑动过程 item 停靠动画效果 | widget/scroll/listanim/listanimdemopage.dart | | 41 | 列表滑动过程 item 停靠动画效果2 | widget/scroll/listanim2/listanimdemo_page.dart | | 44 | 强大的自定义滑动与停靠结合展示 | widget/scroll/customsliver/scrollheaderdemopage.dart | | 45 | 自定义列表内sliver渲染顺序 | widget/scroll/customviewport/customviewport_page.dart | | 47 | 列表停靠展开+回到当前头部 | widget/scroll/sticksliverlistdemopage.dart | | 51 | 多列表+顶部Tab效果展示 | widget/scroll/slivertabdemo_page.dart | | 52 | 多列表+顶部Tab效果展示2 | widget/scroll/slivertabdemo_page2.dart | | 53 | 多列表+顶部Tab效果展示3 | widget/scroll/slivertab/slivertabdemopage3.dart | | 58 | 一个有趣的底部跟随和停靠例子 | widget/scroll/scrollinnercontentdemopage.dart | | 68 | 类似 boss 直聘我的页面联动效果 | widget/scroll/linksliver/linksliverdemopage.dart | | 77 | ListView 嵌套 ViewPager 解决斜着滑动问题 | widget/scroll/vplistdemo_page.dart | | 78 | 垂直 ViewPager 嵌套垂直 ListView | widget/scroll/vplistdemo_page.dart | | 79 | 垂直 ListView 嵌套垂直 ViewPager | widget/scroll/vplistdemo_page.dart | | 80 | 垂直 ListView 联动 ListView | widget/scroll/vplistdemo_page.dart | | 91 | 列表联动 BottomSheet 效果 | widget/scroll/listlinkbottomsheetdemopage.dart | | 92 | DraggableSheet 的 stick 效果 | widget/scroll/demodraggablesheetstickpage.dart | | 94 | 点击爆炸的五角星（ChatGPT 生成代码） | widget/scroll/starbombbutton_page.dart | | 97 | 自适应横竖列表 | widget/scroll/unbounded_listview.dart | | 98 | PageView嵌套PageView | widget/scroll/pageviewinpageviewdemopage.dart | | 100 | link scroll | widget/scroll/linkscrollpage.dart | | 115 | 骚气滑动列表 | widget/scroll/tornadoscrolldemo.dart | | 121 | Shock Wave Chat | widget/scroll/shockwavechat_page.dart |

动画交互（24）

| # | 名称 | 页面文件 | |---|---|---| | 20 | 控件动画组合展示（旋转加放大圆） | widget/animation/animademopage.dart | | 21 | 控件展开动画效果 | widget/animation/animademopage2.dart | | 37 | 控件动画变形效果 | widget/animation/animationcontainerdemo_page.dart | | 39 | 按键切换动画效果 | widget/animation/animademopage4.dart | | 43 | 文本弹出动画效果 | widget/animation/animademopage5.dart | | 46 | 点击弹出动画提示 | widget/animation/animtipdemo_page.dart | | 54 | 仿真书本翻页动画（仅APP） | widget/animation/bookpage/bookpage.dart | | 55 | 粒子动画效果 | widget/animation/particle/particle_page.dart | | 56 | 动画背景效果 | widget/animation/animbgdemo_page.dart | | 62 | 动画按键例子 | widget/animation/animbutton/animbuttondemopage.dart | | 63 | 类似QQ发送图片的动画 | widget/animation/animprogressimgdemopage.dart | | 64 | 类似探探扫描的动画效果 | widget/animation/animscandemo_page.dart | | 65 | 圆弧形的 SeekBar（仅APP） | widget/animation/arcseekbardemopage.dart | | 66 | 一个国外友人很惊艳的动画效果 | widget/animation/animbubblegum.dart | | 71 | 第三方的动画字体 | widget/animation/animtextdemo_page.dart | | 76 | 控件动画切换效果 | widget/animation/animswitchlayoutdemopage.dart | | 96 | 有趣的文本撕裂动画 | widget/animation/teartextdemo_page.dart | | 104 | 粒子动画 | widget/animation/attractor_page.dart | | 105 | 斐波那契球体动画 | widget/animation/fibonaccispherepage.dart | | 107 | 霓虹滑块，100%高亮 | widget/animation/neonsliderpage.dart | | 109 | 炫酷爆炸粒子 | widget/animation/boomparticlepage.dart | | 116 | 骚气粒子效果 | widget/animation/particlemorphingpage.dart | | 117 | 炫酷圣诞树 | widget/animation/combinedscenepage.dart | | 122 | Particle Effect | widget/animation/particleeffectscreen.dart |

绘制与Shader（15）

| # | 名称 | 页面文件 | |---|---|---| | 36 | Blur 高斯模糊效果 | widget/canvas/blurdemopage.dart | | 38 | 时钟动画绘制展示 | widget/canvas/tickclickdemo_page.dart | | 57 | 手势效果 | widget/canvas/matrixcustompainter_page.dart | | 67 | 纯 Canvas 绘制闹钟 | widget/canvas/canvasclickdemo_page.dart | | 69 | 结合 Matrix 的拖拽 | widget/canvas/dragimgdemo_page.dart | | 75 | 测试 canvas 阴影 | widget/canvas/shadercanvasdemo_page.dart | | 85 | 展示 canvas transform | widget/canvas/transformcanvasdemo_page.dart | | 90 | path 路径 png 效果 | widget/canvas/customshaderpathdemopage.dart | | 99 | 手势密码 | widget/basic/gesturepassword/gesturepassworddemopage.dart | | 101 | glass | widget/canvas/glassdemopage.dart | | 102 | liquid glass | widget/canvas/liquidglassdemo.dart | | 103 | liquid glass 2 | widget/canvas/liquidglassdemo2.dart | | 108 | Radial lines | widget/canvas/radiallinespage.dart | | 125 | Jaw Control | widget/canvas/dynamicjawcontrol_page.dart | | 126 | Fire Shader | widget/canvas/fireshaderdemo_page.dart |

3D与视觉（17）

| # | 名称 | 页面文件 | |---|---|---| | 81 | 3D 透视卡片 | widget/visual/cardperspectivedemo_page.dart | | 82 | 3D 卡片旋转 | widget/visual/card3ddemo_page.dart | | 83 | 硬核 3D 卡片旋转 | widget/visual/cardreal3ddemopage.dart | | 84 | 3D Dash | widget/visual/dash3ddemo_page.dart | | 86 | rive 掘金 logo | widget/visual/animjuejinlogodemopage.dart | | 87 | 掘金 3d logo | widget/visual/juejin3dlogodemopage.dart | | 88 | 掘金更 3d logo | widget/visual/juejin3dboxlogodemo_page.dart | | 95 | 有趣画廊 | widget/visual/photogallerydemo_page.dart | | 106 | 星云动画 | widget/visual/galaxyscenepage.dart | | 111 | 流体太极 | widget/visual/streamtaichipage.dart | | 112 | 黑洞流体 | widget/visual/blackholepage.dart | | 113 | 太极粒子 | widget/visual/taichi_page.dart | | 118 | 炫酷二维码 | widget/visual/notionqrcodepage.dart | | 119 | Cool Disco Sphere | widget/visual/discospherepage.dart | | 120 | Cool Spatial Grid | widget/visual/spatialgridpage.dart | | 123 | Mosaic Scanner | widget/visual/mosaicscannerpage.dart | | 124 | Koi Fish | widget/visual/koifishanimation.dart |

首页分类后的代码目录

• 路由注册文件：lib/routes/demo_routes.dart
• 首页与分类逻辑：lib/home/demohomepage.dart
• 分类规则配置（关键词/优先级/手动覆盖）：lib/home/democategoryconfig.dart
• 多语言资源：lib/l10n/
• 示例代码按首页分类整理：

Deferred 兼容说明

• deferred-components 依赖 package: 路径，请保持 pubspec.yaml 与 lib/routes/demo_routes.dart 的路径一致。
• 新增/移动示例时，必须同时更新：

指定web地址而不是 localhost 的运行命令

flutter run -d web-server --web-hostname 127.0.0.1 --web-port 8989
flutter build web --web-renderer canvaskit 指定渲染模式 flutter build web --release --web-renderer html
cp -r ./build/app/intermediates/flutter/release/flutter_assets/ ./build/web/assets

相关文章

• ### 各种最新 Flutter 文章
• ### Flutter 完整实战实战系列文章专栏
• ### Flutter 番外的世界系列文章专栏

• ## Flutter Github客户端

• ## Flutter 完整开发实战详解 Gitbook 预览下载