GSY Flutter Demo
April 9, 2026 · View on GitHub
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
-
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 )
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-componentsdepends on exactpackage:paths, so keep paths in sync betweenpubspec.yamlandlib/routes/demo_routes.dart.- When adding/moving demos, update both:
- deferred import entries in
lib/routes/demo_routes.dart deferred-components.librariesinpubspec.yaml
- deferred import entries in
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
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: guoshuyu@gmail.com
- WeChat Official Account: GSYTech
- Blog: http://guoshuyu.cn
If you find this project helpful, please give it a ⭐️ Star!