GSY Flutter Demo

April 9, 2026 · View on GitHub

GSY Flutter Demo

English Document

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

Github Actions

相关文章

Web 版在线测试

APK 下载

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

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

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

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

demoRoutes（按分类表格）

基础控件（39）

#名称页面文件
1文本输入框简单的 Controllerwidget/basic/controller_demo_page.dart
2实现控件圆角不同组合widget/basic/clip_demo_page.dart
6展示渐变带边框的文本widget/basic/gradient_text_demo_page.dart
7Transform 效果展示widget/basic/transform_demo_page.dart
8计算另类文本行间距展示widget/basic/text_line_height_demo_page.dart
9简单上下刷新widget/basic/refresh_demo_page.dart
10简单上下刷新2widget/basic/refresh_demo_page2.dart
11简单上下刷新3widget/scroll/custom_pull/refresh_demo_page3.dart
12通过绝对定位布局widget/basic/positioned_demo_page.dart
13气泡提示框widget/basic/bubble/bubble_demo_page.dart
14Tag效果展示widget/basic/tag_demo_page.dart
15共享元素跳转效果widget/basic/honor_demo_page.dart
17warpContent实现widget/basic/wrap_content_page.dart
18状态栏颜色修改（仅 App）widget/basic/statusbar_demo_page.dart
19键盘弹出与监听（仅 App）widget/basic/keyboard_demo_page.dart
22全局悬浮按键效果widget/basic/floating_touch_demo_page.dart
23全局设置字体大小widget/basic/text_size_demo_page.dart
24旧版实现富文本widget/basic/rich_text_demo_page.dart
25官方实现富文本widget/basic/rich_text_demo_page2.dart
28验证码输入框widget/basic/verification_code_input_demo_page.dart
29验证码输入框2widget/basic/verification_code_input_demo_page2.dart
30自定义布局展示效果widget/basic/custom_multi_render_demo_page.dart
31自定义布局实现云词图展示widget/basic/cloud/cloud_demo_page.dart
35键盘顶起展示（仅 App）widget/basic/input_bottom_demo_page.dart
42下弹筛选展示效果widget/basic/drop_select_menu/drop_select_demo_page.dart
48使用 overflow 处理图片widget/basic/overflow_image_page.dart
49展示 Align 排布控件widget/basic/align_demo_page.dart
50通过不同尺寸计算方式展示比例widget/basic/card_item_page.dart
59一个有趣的圆形选择器widget/basic/bottom_anim_nav_page.dart
60一个类似探探堆叠卡片例子widget/basic/index_stack_drag_card_demo_page.dart
61一个类似探探堆叠卡片例子2widget/basic/index_stack_drag_card_demo_page2.dart
70彩色进度条widget/basic/color_progress_demo_page.dart
72首尾添加数据不会抖动widget/basic/chat_list_scroll_demo_page.dart
73首尾添加数据不会抖动2widget/basic/chat_list_scroll_demo_page_2.dart
74测试路由嵌套widget/basic/route_demo_page.dart
89png shadowwidget/basic/png_shadow_demo_page.dart
93异步调用的顺序执行widget/basic/async_to_sync_call_page.dart
110Black holewidget/visual/black_hole_simulation_page.dart
114破坏杀·罗针widget/basic/akaza_page.dart

列表滚动（31）

#名称页面文件
3列表滑动监听widget/scroll/scroll_listener_demo_page.dart
4滑动到指定位置widget/scroll/scroll_to_index_demo_page.dart
5滑动到指定位置2widget/scroll/scroll_to_index_demo_page2.dart
16滑动验证widget/scroll/slider_verify_page.dart
26第三方 viewpager 封装实现widget/scroll/viewpager_demo_page.dart
27列表滑动过程控件停靠效果widget/scroll/sliver_list_demo_page.dart
32列表滑动停靠 （Stick）widget/scroll/stick/stick_demo_page.dart
33列表滑动停靠 （Stick）+ 展开收回widget/scroll/stick/stick_demo_page2.dart
34列表滑动停靠效果2 （Stickwidget/scroll/sliver_stick_demo_page.dart
40列表滑动过程 item 停靠动画效果widget/scroll/list_anim/list_anim_demo_page.dart
41列表滑动过程 item 停靠动画效果2widget/scroll/list_anim_2/list_anim_demo_page.dart
44强大的自定义滑动与停靠结合展示widget/scroll/custom_sliver/scroll_header_demo_page.dart
45自定义列表内sliver渲染顺序widget/scroll/custom_viewport/custom_viewport_page.dart
47列表停靠展开+回到当前头部widget/scroll/stick_sliver_list_demo_page.dart
51多列表+顶部Tab效果展示widget/scroll/sliver_tab_demo_page.dart
52多列表+顶部Tab效果展示2widget/scroll/sliver_tab_demo_page2.dart
53多列表+顶部Tab效果展示3widget/scroll/sliver_tab/sliver_tab_demo_page3.dart
58一个有趣的底部跟随和停靠例子widget/scroll/scroll_inner_content_demo_page.dart
68类似 boss 直聘我的页面联动效果widget/scroll/link_sliver/link_sliver_demo_page.dart
77ListView 嵌套 ViewPager 解决斜着滑动问题widget/scroll/vp_list_demo_page.dart
78垂直 ViewPager 嵌套垂直 ListViewwidget/scroll/vp_list_demo_page.dart
79垂直 ListView 嵌套垂直 ViewPagerwidget/scroll/vp_list_demo_page.dart
80垂直 ListView 联动 ListViewwidget/scroll/vp_list_demo_page.dart
91列表联动 BottomSheet 效果widget/scroll/list_link_bottomsheet_demo_page.dart
92DraggableSheet 的 stick 效果widget/scroll/demo_draggable_sheet_stick_page.dart
94点击爆炸的五角星（ChatGPT 生成代码）widget/scroll/star_bomb_button_page.dart
97自适应横竖列表widget/scroll/unbounded_listview.dart
98PageView嵌套PageViewwidget/scroll/pageview_in_pageview_demo_page.dart
100link scrollwidget/scroll/link_scroll_page.dart
115骚气滑动列表widget/scroll/tornado_scroll_demo.dart
121Shock Wave Chatwidget/scroll/shock_wave_chat_page.dart

动画交互（24）

#名称页面文件
20控件动画组合展示（旋转加放大圆）widget/animation/anima_demo_page.dart
21控件展开动画效果widget/animation/anima_demo_page2.dart
37控件动画变形效果widget/animation/animation_container_demo_page.dart
39按键切换动画效果widget/animation/anima_demo_page4.dart
43文本弹出动画效果widget/animation/anima_demo_page5.dart
46点击弹出动画提示widget/animation/anim_tip_demo_page.dart
54仿真书本翻页动画（仅APP）widget/animation/book_page/book_page.dart
55粒子动画效果widget/animation/particle/particle_page.dart
56动画背景效果widget/animation/anim_bg_demo_page.dart
62动画按键例子widget/animation/anim_button/anim_button_demo_page.dart
63类似QQ发送图片的动画widget/animation/anim_progress_img_demo_page.dart
64类似探探扫描的动画效果widget/animation/anim_scan_demo_page.dart
65圆弧形的 SeekBar（仅APP）widget/animation/arc_seek_bar_demo_page.dart
66一个国外友人很惊艳的动画效果widget/animation/anim_bubble_gum.dart
71第三方的动画字体widget/animation/anim_text_demo_page.dart
76控件动画切换效果widget/animation/anim_switch_layout_demo_page.dart
96有趣的文本撕裂动画widget/animation/tear_text_demo_page.dart
104粒子动画widget/animation/attractor_page.dart
105斐波那契球体动画widget/animation/fibonacci_sphere_page.dart
107霓虹滑块，100%高亮widget/animation/neon_slider_page.dart
109炫酷爆炸粒子widget/animation/boom_particle_page.dart
116骚气粒子效果widget/animation/particle_morphing_page.dart
117炫酷圣诞树widget/animation/combined_scene_page.dart
122Particle Effectwidget/animation/particle_effect_screen.dart

绘制与Shader（15）

#名称页面文件
36Blur 高斯模糊效果widget/canvas/blur_demo_page.dart
38时钟动画绘制展示widget/canvas/tick_click_demo_page.dart
57手势效果widget/canvas/matrix_custom_painter_page.dart
67纯 Canvas 绘制闹钟widget/canvas/canvas_click_demo_page.dart
69结合 Matrix 的拖拽widget/canvas/drag_img_demo_page.dart
75测试 canvas 阴影widget/canvas/shader_canvas_demo_page.dart
85展示 canvas transformwidget/canvas/transform_canvas_demo_page.dart
90path 路径 png 效果widget/canvas/custom_shader_path_demo_page.dart
99手势密码widget/basic/gesture_password/gesture_password_demo_page.dart
101glasswidget/canvas/glass_demo_page.dart
102liquid glasswidget/canvas/liquid_glass_demo.dart
103liquid glass 2widget/canvas/liquid_glass_demo2.dart
108Radial lineswidget/canvas/radial_lines_page.dart
125Jaw Controlwidget/canvas/dynamic_jaw_control_page.dart
126Fire Shaderwidget/canvas/fire_shader_demo_page.dart

3D与视觉（17）

#名称页面文件
813D 透视卡片widget/visual/card_perspective_demo_page.dart
823D 卡片旋转widget/visual/card_3d_demo_page.dart
83硬核 3D 卡片旋转widget/visual/card_real_3d_demo_page.dart
843D Dashwidget/visual/dash_3d_demo_page.dart
86rive 掘金 logowidget/visual/anim_juejin_logo_demo_page.dart
87掘金 3d logowidget/visual/juejin_3d_logo_demo_page.dart
88掘金更 3d logowidget/visual/juejin_3d_box_logo_demo_page.dart
95有趣画廊widget/visual/photo_gallery_demo_page.dart
106星云动画widget/visual/galaxy_scene_page.dart
111流体太极widget/visual/stream_taichi_page.dart
112黑洞流体widget/visual/black_hole_page.dart
113太极粒子widget/visual/taichi_page.dart
118炫酷二维码widget/visual/notion_qrcode_page.dart
119Cool Disco Spherewidget/visual/disco_sphere_page.dart
120Cool Spatial Gridwidget/visual/spatial_grid_page.dart
123Mosaic Scannerwidget/visual/mosaic_scanner_page.dart
124Koi Fishwidget/visual/koi_fish_animation.dart

首页分类后的代码目录

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

Deferred 兼容说明

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

指定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

相关文章

公众号