Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
android Initial public commit Dec 11, 2019
assets Initial public commit Dec 11, 2019
ios Initial public commit Dec 11, 2019
lib Initial public commit Dec 11, 2019
web Initial public commit Dec 11, 2019
.gitignore Initial public commit Dec 11, 2019
.metadata Initial public commit Dec 11, 2019 Fixed type in readme files, `flutter get` now reads `flutter pub get` Jan 27, 2020
pubspec.lock Initial public commit Dec 11, 2019
pubspec.yaml Initial public commit Dec 11, 2019

Article Dark Mode

Give your eyes a break and switch this Article App to dark mode. Switch it anywhere in the article and see a great transition across all content and the UI.

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.

The Flutter Vignettes

This vignette is part of a collection of explorations into the exciting user experience possibilities enabled by the Flutter platform. Built by gskinner in partnership with Google, these vignettes range from practical to novel. They aim to inspire both developers and designers to build delightful and beautiful experiences with Flutter. You can view all of the vignettes in the main GitHub repo.

In addition to reviewing and forking the MIT-licensed code available here, you can also check out more information on the Vignette Showcase Website.


If you're new to Flutter the first thing you'll need is to follow the setup instructions. Once you're set up and can compile the sample Flutter app, you're ready to run some vignettes!

Each 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 youre IDE, run flutter pub get to fetch any dependencies, and flutter run to deploy to your connected device or simulator.

If 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.


These vignettes are released under the MIT license. You can use the code for any purpose, including commercial projects.


About gskinner

We 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 to learn more about what we do. We'd love to hear from you!

You can’t perform that action at this time.