GSY Flutter Demo

中文文档

Unlike the GSYGithubAppFlutter project, this project will gradually improve various Flutter independent examples, making it easier for beginners to learn and get started.

Related Articles

• Flutter Article Series Column

---

• Flutter Complete Project Version ( https://github.com/CarGuo/gsy_github_app_flutter )

• Android Compose Version ( https://github.com/CarGuo/GSYGithubAppCompose )

• React Native Version ( https://github.com/CarGuo/GSYGithubApp )

• Android Kotlin View Version ( https://github.com/CarGuo/GSYGithubAppKotlin )

• Weex Version ( https://github.com/CarGuo/GSYGithubAppWeex )

• Flutter Complete Development Guide Gitbook Preview & Download

Web Version Online Testing

APK Download

Currently gradually completing and improving, mainly providing some useful or interesting examples. If you have good examples, please submit a PR.

Running Instructions: Configure Flutter development environment (currently requires Flutter SDK version 3.35 or above).

If cloning is too slow or images cannot be displayed, try downloading from Gitee

WeChat Official Account	Juejin	Zhihu	CSDN	Jianshu
GSYTech	Link	Link	Link	Link

GSY Book: 《Flutter Development Guide》 Available at: JD.com / Dangdang / E-book JD Reading and Kindle

demoRoutes (Grouped Tables)

Basics (39)

#	Name	Page File
1	Simple text input controller	widget/basic/controller_demo_page.dart
2	Different rounded corner combinations	widget/basic/clip_demo_page.dart
6	Gradient text with border	widget/basic/gradient_text_demo_page.dart
7	Transform effectdemo	widget/basic/transform_demo_page.dart
8	Custom text line-height demo	widget/basic/text_line_height_demo_page.dart
9	Simple pull refresh	widget/basic/refresh_demo_page.dart
10	Simple pull refresh2	widget/basic/refresh_demo_page2.dart
11	Simple pull refresh3	widget/scroll/custom_pull/refresh_demo_page3.dart
12	Absolute positioned layout	widget/basic/positioned_demo_page.dart
13	Bubble tooltip	widget/basic/bubble/bubble_demo_page.dart
14	Tageffectdemo	widget/basic/tag_demo_page.dart
15	Shared element transition	widget/basic/honor_demo_page.dart
17	warpContent	widget/basic/wrap_content_page.dart
18	Status bar color update(App only)	widget/basic/statusbar_demo_page.dart
19	Keyboard show/hide listener(App only)	widget/basic/keyboard_demo_page.dart
22	Global floating action button	widget/basic/floating_touch_demo_page.dart
23	Global font size setting	widget/basic/text_size_demo_page.dart
24	Legacy rich text implementation	widget/basic/rich_text_demo_page.dart
25	Official rich text implementation	widget/basic/rich_text_demo_page2.dart
28	Verification code input	widget/basic/verification_code_input_demo_page.dart
29	Verification code input2	widget/basic/verification_code_input_demo_page2.dart
30	Custom layout demo	widget/basic/custom_multi_render_demo_page.dart
31	Word cloud with custom layout	widget/basic/cloud/cloud_demo_page.dart
35	Keyboard insets demo(App only)	widget/basic/input_bottom_demo_page.dart
42	Dropdown filter demo	widget/basic/drop_select_menu/drop_select_demo_page.dart
48	Image overflow demo	widget/basic/overflow_image_page.dart
49	Align layout demo	widget/basic/align_demo_page.dart
50	Ratio by size calculation	widget/basic/card_item_page.dart
59	Circular selector demo	widget/basic/bottom_anim_nav_page.dart
60	Stacked card demo	widget/basic/index_stack_drag_card_demo_page.dart
61	Stacked card demo2	widget/basic/index_stack_drag_card_demo_page2.dart
70	Color progress bar	widget/basic/color_progress_demo_page.dart
72	Stable list when prepend/append	widget/basic/chat_list_scroll_demo_page.dart
73	Stable list when prepend/append2	widget/basic/chat_list_scroll_demo_page_2.dart
74	Nested route test	widget/basic/route_demo_page.dart
89	png shadow	widget/basic/png_shadow_demo_page.dart
93	Ordered async calls	widget/basic/async_to_sync_call_page.dart
110	Black hole	widget/visual/black_hole_simulation_page.dart
114	Destructive Compass Needle	widget/basic/akaza_page.dart

Scrolling (31)

#	Name	Page File
3	List scroll listener	widget/scroll/scroll_listener_demo_page.dart
4	Scroll to target position	widget/scroll/scroll_to_index_demo_page.dart
5	Scroll to target position2	widget/scroll/scroll_to_index_demo_page2.dart
16	Slider verification	widget/scroll/slider_verify_page.dart
26	Third-party ViewPager wrapper	widget/scroll/viewpager_demo_page.dart
27	Sticky items while scrolling	widget/scroll/sliver_list_demo_page.dart
32	List sticky header (Stick)	widget/scroll/stick/stick_demo_page.dart
33	List sticky header (Stick)	widget/scroll/stick/stick_demo_page2.dart
34	List sticky headereffect2 (Stick	widget/scroll/sliver_stick_demo_page.dart
40	Sticky item animation	widget/scroll/list_anim/list_anim_demo_page.dart
41	Sticky item animation2	widget/scroll/list_anim_2/list_anim_demo_page.dart
44	Advanced custom scroll + sticky	widget/scroll/custom_sliver/scroll_header_demo_page.dart
45	Custom sliver render order	widget/scroll/custom_viewport/custom_viewport_page.dart
47	Demo	widget/scroll/stick_sliver_list_demo_page.dart
51	Multi-list + top tabs	widget/scroll/sliver_tab_demo_page.dart
52	Multi-list + top tabs2	widget/scroll/sliver_tab_demo_page2.dart
53	Multi-list + top tabs3	widget/scroll/sliver_tab/sliver_tab_demo_page3.dart
58	Bottom follow + sticky demo	widget/scroll/scroll_inner_content_demo_page.dart
68	BOSS-style linked page	widget/scroll/link_sliver/link_sliver_demo_page.dart
77	ListView nested ViewPager fix diagonal gesture conflict	widget/scroll/vp_list_demo_page.dart
78	Vertical ViewPager nestedVertical ListView	widget/scroll/vp_list_demo_page.dart
79	Vertical ListView nestedVertical ViewPager	widget/scroll/vp_list_demo_page.dart
80	Vertical ListView ListView	widget/scroll/vp_list_demo_page.dart
91	BottomSheet effect	widget/scroll/list_link_bottomsheet_demo_page.dart
92	DraggableSheet stick effect	widget/scroll/demo_draggable_sheet_stick_page.dart
94	Tap-to-explode star(ChatGPT )	widget/scroll/star_bomb_button_page.dart
97	Adaptive list orientation	widget/scroll/unbounded_listview.dart
98	PageViewnestedPageView	widget/scroll/pageview_in_pageview_demo_page.dart
100	link scroll	widget/scroll/link_scroll_page.dart
115	Fancy scrolling list	widget/scroll/tornado_scroll_demo.dart
121	Shock Wave Chat	widget/scroll/shock_wave_chat_page.dart

Animation (24)

#	Name	Page File
20	Combined widget animations()	widget/animation/anima_demo_page.dart
21	Expand animation	widget/animation/anima_demo_page2.dart
37	Morphing animation	widget/animation/animation_container_demo_page.dart
39	Switch animation	widget/animation/anima_demo_page4.dart
43	Text pop animation	widget/animation/anima_demo_page5.dart
46	Tap animation tip	widget/animation/anim_tip_demo_page.dart
54	Book page flip animation(APP)	widget/animation/book_page/book_page.dart
55	Particle animation effect	widget/animation/particle/particle_page.dart
56	Animated background effect	widget/animation/anim_bg_demo_page.dart
62	Animated button demo	widget/animation/anim_button/anim_button_demo_page.dart
63	QQ-style image send animation	widget/animation/anim_progress_img_demo_page.dart
64	Tantan-style scan animation	widget/animation/anim_scan_demo_page.dart
65	Arc SeekBar(APP)	widget/animation/arc_seek_bar_demo_page.dart
66	Impressive animation demo	widget/animation/anim_bubble_gum.dart
71	Animated font package demo	widget/animation/anim_text_demo_page.dart
76	Widget switch animation	widget/animation/anim_switch_layout_demo_page.dart
96	Text tear animation	widget/animation/tear_text_demo_page.dart
104	Particle animation	widget/animation/attractor_page.dart
105	Fibonacci sphere animation	widget/animation/fibonacci_sphere_page.dart
107	Neon slider, full highlight	widget/animation/neon_slider_page.dart
109	Cool boom particles	widget/animation/boom_particle_page.dart
116	effect	widget/animation/particle_morphing_page.dart
117	Cool Christmas tree	widget/animation/combined_scene_page.dart
122	Particle Effect	widget/animation/particle_effect_screen.dart

Canvas & Shader (15)

#	Name	Page File
36	Blur Gaussian blur effect	widget/canvas/blur_demo_page.dart
38	Clock animation drawing	widget/canvas/tick_click_demo_page.dart
57	Gesture effect	widget/canvas/matrix_custom_painter_page.dart
67	Canvas alarm clock	widget/canvas/canvas_click_demo_page.dart
69	Matrix drag interaction	widget/canvas/drag_img_demo_page.dart
75	Canvas shadow test	widget/canvas/shader_canvas_demo_page.dart
85	Canvas transform demo	widget/canvas/transform_canvas_demo_page.dart
90	path path png effect	widget/canvas/custom_shader_path_demo_page.dart
99	Gesture password	widget/basic/gesture_password/gesture_password_demo_page.dart
101	glass	widget/canvas/glass_demo_page.dart
102	liquid glass	widget/canvas/liquid_glass_demo.dart
103	liquid glass 2	widget/canvas/liquid_glass_demo2.dart
108	Radial lines	widget/canvas/radial_lines_page.dart
125	Jaw Control	widget/canvas/dynamic_jaw_control_page.dart
126	Fire Shader	widget/canvas/fire_shader_demo_page.dart

3D & Visual (17)

#	Name	Page File
81	3D perspective card	widget/visual/card_perspective_demo_page.dart
82	3D card rotation	widget/visual/card_3d_demo_page.dart
83	advanced 3D card rotation	widget/visual/card_real_3d_demo_page.dart
84	3D Dash	widget/visual/dash_3d_demo_page.dart
86	rive Juejin logo	widget/visual/anim_juejin_logo_demo_page.dart
87	Juejin 3d logo	widget/visual/juejin_3d_logo_demo_page.dart
88	Juejinenhanced 3d logo	widget/visual/juejin_3d_box_logo_demo_page.dart
95	Interesting gallery	widget/visual/photo_gallery_demo_page.dart
106	Nebula animation	widget/visual/galaxy_scene_page.dart
111	Fluid Taichi	widget/visual/stream_taichi_page.dart
112	Black hole fluid	widget/visual/black_hole_page.dart
113	Taichi particles	widget/visual/taichi_page.dart
118	Cool QR code	widget/visual/notion_qrcode_page.dart
119	Cool Disco Sphere	widget/visual/disco_sphere_page.dart
120	Cool Spatial Grid	widget/visual/spatial_grid_page.dart
123	Mosaic Scanner	widget/visual/mosaic_scanner_page.dart
124	Koi Fish	widget/visual/koi_fish_animation.dart

Code Structure After Home Categorization

• Route registry: lib/routes/demo_routes.dart
• Home and category logic: lib/home/demo_home_page.dart
• Category rule config (keywords/priority/manual overrides): lib/home/demo_category_config.dart
• Localization resources: lib/l10n/
• Example files are organized by home categories:
  • lib/widget/basic/
  • lib/widget/scroll/
  • lib/widget/animation/
  • lib/widget/canvas/
  • lib/widget/visual/

Deferred Compatibility Notes

• deferred-components depends on exact package: paths, so keep paths in sync between pubspec.yaml and lib/routes/demo_routes.dart.
• When adding/moving demos, update both:
  • deferred import entries in lib/routes/demo_routes.dart
  • deferred-components.libraries in pubspec.yaml

Commands to Run Web with Specified Address Instead of Localhost

flutter run -d web-server --web-hostname 127.0.0.1 --web-port 8989

flutter build web --web-renderer canvaskit  # Specify render mode
flutter build web --release --web-renderer html 

cp -r ./build/app/intermediates/flutter/release/flutter_assets/ ./build/web/assets

Related Articles

• Latest Flutter Articles

• Flutter Complete Development Series Articles Column

• Flutter Extra World Series Articles Column

---

• Flutter Github Client

• Flutter Complete Development Guide Gitbook Preview & Download

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Star History

Contributors

Thanks to all contributors! 🎉

Contact

• Author: Shuyu Guo (CarGuo)
• Email: [email protected]
• WeChat Official Account: GSYTech
• Blog: http://guoshuyu.cn

---

If you find this project helpful, please give it a ⭐️ Star!