flutter_vignettes
A collection of fun Flutter experiments, created by gskinner, in partnership with Google.
A gallery of polished Flutter animation experiments by gskinner and Google, each a self-contained mini-project showing a specific visual technique like parallax scrolling, 3D card folding, or physics-based particle effects.
Flutter Vignettes is a collection of interactive UI experiments built with Flutter, Google's framework for making apps that run on iOS, Android, and the web from a single codebase. The collection was created by the design studio gskinner in partnership with Google. Each vignette is a self-contained mini-project that demonstrates a specific visual or interaction technique.
The README is structured as a gallery. Each entry shows an animated preview and a short description of what it demonstrates. Examples include a travel card list that uses layered widgets to create a parallax scrolling effect, a screen transition styled like stretched putty that uses physics calculations to simulate tension, a boarding pass card that folds open in 3D, a swipe-to-delete animation that emits particles, an animated navigation bar with icons that bounce and change shape when tapped, and a starfield background whose animation speed responds to how fast the user is scrolling.
Several of the vignettes demonstrate techniques that go beyond Flutter's standard building blocks. Some use the Canvas drawing API to paint custom shapes and animations directly, rather than composing pre-built widgets. Others combine gesture detection with physics simulations or timed animation sequences to produce effects that feel physical and responsive.
All code is MIT licensed, meaning anyone can copy and adapt it freely. A companion showcase website at flutter.gskinner.com/vignettes displays the vignettes with live previews. The project is intended as a source of inspiration for developers and designers who want to see what kinds of polished interfaces are possible in Flutter without relying on external animation libraries.
Where it fits
- Copy a vignette project into your Flutter app to add a polished animation like a parallax card list or a physics-based swipe gesture.
- Study how the Flutter Canvas API is used to paint custom shapes and animations beyond what pre-built widgets can produce.
- Use a vignette as a starting point when pitching a UI concept to show a client what Flutter can produce visually.
- Learn how to combine Flutter gesture detection with physics simulations to create animations that feel physical and responsive.