explaingit

gskinnerteam/flutter_vignettes

★ 4,745DartAudience · developerComplexity · 3/5LicenseSetup · easy

TLDR

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.

Mindmap

mindmap
  root((flutter-vignettes))
    What it is
      UI animation showcase
      Self-contained demos
      Copy-ready Flutter code
    Techniques shown
      Parallax scrolling
      3D card folding
      Physics simulations
      Canvas painting
    Built by
      gskinner studio
      Google partnership
      MIT licensed
    Audience
      Flutter developers
      UI and motion designers
      Mobile app builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Copy a vignette project into your Flutter app to add a polished animation like a parallax card list or a physics-based swipe gesture.

USE CASE 2

Study how the Flutter Canvas API is used to paint custom shapes and animations beyond what pre-built widgets can produce.

USE CASE 3

Use a vignette as a starting point when pitching a UI concept to show a client what Flutter can produce visually.

USE CASE 4

Learn how to combine Flutter gesture detection with physics simulations to create animations that feel physical and responsive.

Tech stack

DartFlutter

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, copy and adapt freely for any purpose including commercial projects, with no restrictions beyond keeping the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
I want to add a parallax scrolling effect to a card list in my Flutter app. Show me how the flutter_vignettes travel card demo implements layered widget parallax as the user scrolls.
Prompt 2
How does the flutter_vignettes boarding pass demo implement the 3D card fold animation? What Flutter APIs does it use for perspective transforms?
Prompt 3
Show me how to use the Flutter Canvas API to paint a custom animated starfield background, similar to the flutter_vignettes example, that speeds up based on the user scroll velocity.
Prompt 4
I want a particle burst animation when a user swipes to delete a list item in Flutter. How does the flutter_vignettes swipe-to-delete vignette implement this effect?
Open on GitHub → Explain another repo

← gskinnerteam on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.