[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9136":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":28,"discoverSource":29},9136,"flutter_vignettes","gskinnerTeam\u002Fflutter_vignettes","gskinnerTeam","A collection of fun Flutter experiments, created by gskinner, in partnership with Google.","https:\u002F\u002Fflutter.gskinner.com",null,"Dart",4752,1012,122,4,0,3,11,2,31.02,"MIT License",false,"master",[],"2026-06-12 02:02:03","\n\u003Cbr \u002F>\n\u003Cp align=\"center\">\n\u003Cimg width=\"215\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F736973\u002F187334196-b79e48b2-dbb8-4ea7-8aac-04dbc7e5159f.png#gh-dark-mode-only\">\n\u003Cimg width=\"215\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F736973\u002F187334195-9821c031-a566-4f8e-b4e3-3158f733c6e5.png#gh-light-mode-only\">\n\u003C\u002Fp>\n\u003Cbr \u002F>\n\n### The Flutter Vignettes\n\nA collection of explorations into the exciting user experience possibilities enabled by the Flutter platform. Built by [gskinner](https:\u002F\u002Fgskinner.com) in partnership with Google, these vignettes range from the practical to the novel. They aim to inspire both developers and designers to build delightful and beautiful experiences with Flutter.\n\nIn addition to forking and reviewing the [MIT licensed code](LICENSE.md) available here, you can also check out more information on the [Vignette Showcase Website](https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002F).\n\n\u003Cbr\u002F>\n\n### About gskinner\n\nWe exist to build inovative digital experiences for smart clients, and we love how easy Flutter makes that. Don't hesitate to [stop by our site](https:\u002F\u002Fgskinner.com) to learn more about what we do. We'd love to hear from you!\n\n\u003Cbr\u002F>\n\n### The Vignettes\n\n\u003Cbr \u002F>  \n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparallax_travel_cards_list\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fparallax_list_edited_sm.gif?\" width=\"237\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparallax_travel_cards_list\">\u003Ch3>Travel Cards\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Use a Stack widget to create a parallax effect inside of a list, while also using a Transform to give it a 3D card effect. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparallax_travel_cards_list\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fgooey_edge\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fgooey_edge_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fgooey_edge\">\u003Ch3>Mindfulness Gooey Transition\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Draw curved vector paths and use them to mask content. Utilizes a small physics simulation to calculate tension between a set of points.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fgooey_edge\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fticket_fold\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fboarding_pass_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fticket_fold\">\u003Ch3>Boarding Pass Cards\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Uses the Transform widget to create a folding card effect. In this case a boarding pass with multiple folds, each fold containing a child widget.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fticket_fold\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparticle_swipe\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fparticle_swipe_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparticle_swipe\">\u003Ch3>Inbox Swipe Particles\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Demonstrates how you can use particles in your Flutter app and how to tie multiple actions to a list swipe.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparticle_swipe\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fbubble_tab_bar\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fbubble_tab_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fbubble_tab_bar\">\u003Ch3>Icon Flip Button Bar\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Example of a bespoke NavigationBar with animated buttons that change size, shape, and color when selected. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fbubble_tab_bar\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdrink_rewards_list\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fdrink_rewards_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdrink_rewards_list\">\u003Ch3>Liquid Rewards Cards\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Shows how to easily create resizeable list items using AnimatedContainer; also uses the Canvas API to simulate a liquid effect. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdrink_rewards_list\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdog_slider\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fdog_slider_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdog_slider\">\u003Ch3>Dog Toy Slider\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Use a Flare animation to create a custom Slider control. Creates a custom FlareControl class for playback while the slider itself is painted on a Canvas.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdog_slider\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fconstellations_list\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fconstellations_list_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fconstellations_list\">\u003Ch3>Guide To the Stars Particles\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Shows how to use an animated Canvas as the primary background for your app. In this case, a starfield effect that controls its animation speed based on user scrolling and page transitions.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fconstellations_list\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparallax_travel_cards_hero\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fparallax_hero_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparallax_travel_cards_hero\">\u003Ch3>Paris Travel Hero Transition\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Shows how you can create a custom Hero effect that contains complex animations and retains its state between pages. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fparallax_travel_cards_hero\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Ffluid_nav_bar\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fliquid_nav_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Ffluid_nav_bar\">\u003Ch3>Fluid Button Bar\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Uses a Canvas to create a fluid-style navigation bar that has a fun bouncy feel to it; also shows how to use the Path API to draw, and animate some custom icons. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Ffluid_nav_bar\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fproduct_detail_zoom\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fproduct_detail_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fproduct_detail_zoom\">\u003Ch3>Product Zoom Transition\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Example of an animated png sequence within a Hero animation; also uses a Canvas to render and animate a product detail overlay.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fproduct_detail_zoom\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdark_ink_transition\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fdarkmode_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdark_ink_transition\">\u003Ch3>Article Dark Mode\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Shows how a png sequence can be used to mask an arbitrary widget. Here that technique is used in a page transition between light and dark themes.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fdark_ink_transition\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fbasketball_ptr\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fbasketball_ptr_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fbasketball_ptr\">\u003Ch3>Sports App Pull To Refresh\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Shows how to create a custom pull to refresh animation. In this example, we used a sprite sequence to render a basketball spinning around the hoop as it loads. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fbasketball_ptr\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fplant_forms\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fplant_form_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fplant_forms\">\u003Ch3>Plant Shopping Cart\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>An example of multi-part form validation and the ability to customize the form contents based on the country the user has selected.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fplant_forms\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Findie_3d\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Findie3d_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Findie_3d\">\u003Ch3>Feature Artist Carousel\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Uses a custom 3D model renderer and blending mask to create a fun and unique background effect. \u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Findie_3d\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fsparkle_party\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fsparkle_party_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fsparkle_party\">\u003Ch3>Sparkle Party Particles\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Uses the drawVertices API to draw a ton of particles extremely quickly. The particles are animated using a sprite sheet and comes with 4 different presets.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fsparkle_party\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fspending_tracker\">\u003Cimg src=\"https:\u002F\u002Fflutter.gskinner.com\u002Fvignettes\u002Fpreviews\u002Fspending_tracker_edited_sm.gif?\" width=\"237\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fspending_tracker\">\u003Ch3>BudgetTracker Graphs\u003C\u002Fh3>\u003C\u002Fa>\n\u003Cp>Demonstrates how charts and graphs can be implemented using the Canvas API. It also provides an example of arbitrary panning and scrolling in a view.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FgskinnerTeam\u002Fflutter_vignettes\u002Ftree\u002Fmaster\u002Fvignettes\u002Fspending_tracker\">View Code\u003C\u002Fa>\n\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\u003Cbr\u002F>\n\n\u003Cbr\u002F>\n\n### Installation\n\nIf you're new to Flutter the first thing you'll need is to follow the [setup instructions](https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fget-started\u002Finstall). Once you're set up and can compile the sample Flutter app, you're ready to run some vignettes!\n\nEach vignette is stored in its own folder in the repository. Using your IDE of choice, open the vignette directory you'd like to run. Then, using the terminal inside your IDE, run `flutter pub get` to fetch any dependencies, and `flutter run` to deploy to your connected device or simulator.\n\nIf you would like to try these for Flutter for web, you can use `flutter run -d chrome`. Note that Flutter for web is currently a technical preview and not all of the vignettes will work correctly. For more information on enabling Flutter for web follow the [setup instructions](https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fget-started\u002Fweb).\n\n\u003Cbr\u002F>\n\n### License\n\n\u003Cbr\u002F>\n\nThese vignettes are released under the [MIT license](LICENSE.md). You can use the code for any purpose, including commercial projects.\n\n[![license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\n\u003Cbr\u002F>\n\n\n","Flutter Vignettes 是由 gskinner 与 Google 合作创建的一系列有趣的 Flutter 实验项目，旨在探索 Flutter 平台所能实现的丰富用户体验。该项目通过使用 Dart 语言展示了如何利用 Stack、Transform 等核心 Flutter 组件来构建从实用到新颖的各种交互效果，如视差列表、3D 卡片翻转及基于物理模拟的过渡动画等。它适合希望深入了解 Flutter 框架潜力，并寻找灵感以创造出既美观又具吸引力应用程序界面的开发者和设计师们参考学习。","2026-06-11 03:21:22","top_language"]