Wonderous: Explore the World with Flutter

A reference app that shows how to develop tailored UI using Flutter

Our vision for Flutter is to provide a blank canvas for you to design and paint beautiful apps without limitation. Recently, we teamed up with the amazing group at gskinner to make this vision a reality, by creating a new mobile app, Wonderous. Wonderous uses Flutter to create a highly expressive user interface, tailored to the mobile form factor, and doesn’t conform to a stock design system. Instead, Wonderous realizes the creative vision of its designer.

Screenshots from the Wonderous App

When developing Wonderous, we had a few goals in mind:

1. Create an interesting and useful app. Wonderous isn’t just a demonstration, it’s a fully functional app that allows users to navigate the intersection of history, art, and culture by exploring the Wonders of the World. At a time when travel is difficult for many, Wonderous leverages stunning illustrations and amplified animations to bring the wonder of these sites to life directly on your device.
2. Showcase high-quality UX. We wanted Wonderous to be comparable in quality to any app in the system framework. Wonderous captures the audience with its tailored, imaginative design, while using familiar gestures and behaviors to ensure a seamless user experience.
3. Create an app for testing and benchmarking. We’re already using Wonderous to test Impeller, the new rendering engine that is now available in preview on iOS. We’ve been pleased with the results so far, which have helped validate our hypotheses for improved performance. The version of the app available for download from the Apple App Store uses Impeller, and we’re eager to see how it performs on a broader variety of iOS devices in real-world conditions.
4. Provide a reference, open-source example app that demonstrates best practices. The Wonderous code features development best practices for custom design, engaging interactions, and novel animations — all while keeping accessibility top of mind.
5. Create a source for learning materials and documentation. Over the course of the next few weeks, the gskinner team will be launching more content surrounding Wonderous — including details on how the animations were created, how accessibility was incorporated, and best practices for app performance. Stay tuned!

After downloading Wonderous from the Apple App Store or the Google Play Store there are a few characteristics you might want to explore:

• Transitions that would likely be difficult without Flutter, these are especially noticeable when swiping left to right between Wonders
• Unique scroll patterns as you move through the global timeline.
• Tailored buttons and icons that match the Wonderous design system.

We’re so excited to share Wonderous with the world, let us know what you think!