A showcase app for the Flutter SDK. Wonderous will educate and entertain as you uncover information about some of the most famous structures in the world.

Overview

Wonderous

wonderous-banner-800w

Navigate the intersection of history, art, and culture. Wonderous will educate and entertain as you uncover information about some of the most famous structures in the world.

Built by gskinner in partnership with the Flutter team, Wonderous deliberately pushes visual fidelity, effects and transitions to showcase what Flutter is truly capable of on modern mobile hardware.

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

App Downloads

To try the app you can download it from your favorite app store:

Installation

If you're new to Flutter the first thing you'll need is to follow the setup instructions.

Once Flutter is setup, you can use the latest beta channel:

  • flutter channel beta
  • flutter upgrade

Once on beta you're ready to run the app on your local device or simulator:

  • flutter run -d ios
  • flutter run -d android

Impeller Rendering Layer

Impeller is Flutter's next-generation rendering layer, that takes full advantage of modern hardware-accelerated graphics APIs. It is currently available as an early adopter preview, but is not yet feature-complete or fully optimized.

The version of Wonderous available in the iOS app store uses Impeller, but by default this code base does not. If you'd like to enable Impeller for iOS, follow these steps:

Edit the Info.plist file and set FLTEnableImpeller to true:

<key>FLTEnableImpeller</key>
<true/>

Then, switch to the master channel and build as normal:

  • flutter channel master
  • flutter upgrade
  • flutter run -d ios

Note: Currently, when Impeller is enabled testing in Simulator will not work, you will need to test on a physical device.

About gskinner

We build innovative digital experiences for smart clients, and we love how Flutter unleashes our creativity when building multi-platform apps. Don't hesitate to stop by our site to learn more about what we do, or check out other innovative Flutter projects we've built. We'd love to hear from you!

License

This application is released under the MIT license. You can use the code for any purpose, including commercial projects.

license

Comments
  • Stuttering on iOS

    Stuttering on iOS

    Hi - the app looks amazing! One thing I noticed, is that the "text on image" section e.g "the longest man-made structure in the world" is stuttering when scrolling slowly over it, especially when scrolling up and down on it to "play" with the animation. I tested this on an iPhone 12mini.

    opened by dkbast 8
  • Stuck on loading screen on Android when system is not set to English

    Stuck on loading screen on Android when system is not set to English

    Downloaded app from Play Store (v. 1.7.0).
    Tried to launch the app but it stays on loading (splash) screen and not going forward to home screen.

    After a few tries, just full grey screen ( assuming it is flutter error )

    Device: One Plus 8 Pro with Android 12.

    opened by jpsiitonen 8
  • Blend issues with impeller

    Blend issues with impeller

    Using the latest master, with code like:

    Image(
      image: ...,
      color: Colors.black,
      colorBlendMode: BlendMode.color,
      opacity: AlwaysStoppedAnimation(0.2),
    ),
    

    We are seeing blending issues: image

    Without impeller: image

    opened by esDotDev 6
  • Swapping locales feature

    Swapping locales feature

    • added LocaleButton to intro and menu
    • tested and fixed switching on the fly for wonder views, intro, timeline, artifacts, and menu
    • added LocaleLogic.isEnglish helper, swapped to use in _results_grid and _scrolling_content

    https://user-images.githubusercontent.com/932757/188753700-82d4b52d-1210-4f23-902f-cf42770f7530.MP4

    • ~stubbed in placeholder button for testing locale switching (see demo below)~
    • ~TODO:~
      • ~needs design polish and direction on whether the button is available at all times or just in menu~
      • ~there is a cast exception on startup, probably due to the strings being used in the button in app scaffold (before the bootstrap has chance to populate $strings property). 🤔 Quick fix could be to just use "简体中文" and "English" in the Text? Might be a non-issue if the swap button is moved to the menu only (instead of being globally available in app scaffold)~ ~https://user-images.githubusercontent.com/932757/188741589-66c99de8-969c-47cc-abb5-2fe49d71dd16.png~ ~https://user-images.githubusercontent.com/932757/188741600-208e65f6-849a-431b-b0cc-a0ead0dd221b.png~

    ~Demo:~ ~https://user-images.githubusercontent.com/932757/188741671-54bf1d47-93f6-4212-a30f-9de1c843301e.mp4~

    opened by eddie-at-work 5
  • Native map view sticking to bottom of editorial view

    Native map view sticking to bottom of editorial view

    To Reproduce

    • Scroll down on the Editorial View, until the native maps is shown
    • Scroll back up to the top
    • Notice that the map is still stuck on the bottom of the screen, underneath the tab bar

    image

    impeller 
    opened by esDotDev 3
  • Error launching it on iphone 14 simulator

    Error launching it on iphone 14 simulator

    got the following error while trying to run the project in simulator

    Swift Compiler Error (Xcode): Stored properties cannot be marked potentially
    unavailable with '@available'
    /Users/henryhe/.pub-cache/hosted/pub.dartlang.org/flutter_inappwebview-5.4.3+7/i
    os/Classes/Types/UserScript.swift:12:5
    
    
    Uncategorized (Xcode): Command SwiftCompile failed with a nonzero exit code
    
    
    Could not build the application for the simulator.
    Error launching application on iPhone 14.
    
    opened by Henryhehe 3
  • In the “browse artifacts” view, keyboard is not dismissable by swiping

    In the “browse artifacts” view, keyboard is not dismissable by swiping

    On iOS, I would expect that when you start scrolling on the browse artifacts page after initiating search, the keyboard would be dismissed automatically.

    opened by leighajarett 3
  • Use GradientContainer to optimize raster performance

    Use GradientContainer to optimize raster performance

    This optimization is part of the _CollapsingPullQuoteImage widget class, which is used on each Wonder screen. Switching from a BlendMask to a GradientContainer provides a 33% performance gain (3ms) on the rendering layer shown here. When each frame should render in 16ms, 3ms can be the difference between a janky frame and a performant frame.

    Before: Screen Shot 2022-09-13 at 5 27 40 PM

    After: Screen Shot 2022-09-13 at 5 25 44 PM

    Before (left) After (right)

    opened by kenzieschmoll 3
  • White Box on Timeline

    White Box on Timeline

    What is normally a white border with vertical dashed line, is rendering as a white square, only when using Impeller on a real device.

    It seems to be caused by the simple:

    Container(
      decoration: BoxDecoration(border: Border.all(color: borderColor))
    )
    

    image

    Should be: image

    impeller 
    opened by esDotDev 1
  • Handle even number as gridSize in PhotoGallery

    Handle even number as gridSize in PhotoGallery

    Hi,

    First of all thanks for sharing this code, the app is awesome! Actually I'm trying to implement the PhotoGallery feature. I have a 36 images that I want to display by setting the _gridSize at 6 so _imgCount fits perfectly with the number of images that I have. But I'm getting some trouble with handling the Offset returned by the _calculateCurrentOffset(double padding, Size size) method. As you can see here the Offset isn't right.

    photo_2022-12-07_02-40-48

    The offset seems to be correct only when the _gridSize is an odd number. Does someone have any suggestion to get the right Offset? Thanks.

    opened by NohchoBx 1
  • Minimum system requirements ?

    Minimum system requirements ?

    Hello, I tried building the app on an iPad Mini 2 with Impeller enabled. When monitoring in dev tools I am seeing a lot of performances issues.

    Is my device too old ?

    Thanks

    Capture d’écran 2022-12-05 à 10 49 41

    opened by jjboy91 1
  • Add another quality level for self-hosted Unsplash images

    Add another quality level for self-hosted Unsplash images

    Currently max size is 2400, there has been a request for another size beyond that for hi-dpi tablet devices. Maybe 3600?

    • [ ] Run the unsplash_download_service fetching the new set of images
    • [ ] Upload to the dreamhost FTP for wonderous.info
    opened by esDotDev 0
  • Main page looks like it stutters a bit on iPad Pro?

    Main page looks like it stutters a bit on iPad Pro?

    I was testing Wonderous on my iPad pro and it looks like maybe some frames are dropped when scrolling past images. See video below. I think it looks smoother on my iPhone. Let me know if you need more info!

    iPad

    https://user-images.githubusercontent.com/21065911/208455043-0af94bd9-779d-472c-9b93-ae6e46cccbbb.mov

    iPhone

    https://user-images.githubusercontent.com/21065911/208455064-e29a1034-f088-4933-815f-d0a2aae25502.mov

    opened by leighajarett 1
  • [Android] [ui] Red artefacts while rendering collection placeholders

    [Android] [ui] Red artefacts while rendering collection placeholders

    App version: 1.9.5 (downloaded from the Play Store) Device: Samsung Galaxy A13 Android version: 12 (latest for this device) One UI Core version 4.1 (latest for this device) Google Play system update: October 1 2022 (latest for this device)

    in the "Collection" page, red artefacts are visible around the borders of the svgs (or the images, not sure the format) that serve as placeholders, see the screenshot in full screen to understand:

    opened by mariopepe 1
  • Wonderous build error with android MainActivity.kt

    Wonderous build error with android MainActivity.kt

    I tried to test flutter with wonderous latest commit. My flutter channel is beta and latest version. But once I build this app with android studio, below errors are shown. How can I fix this error? Thank you. e: E:\project\flutter\flutter-wonderous-app\android\app\src\main\kotlin\com\gskinner\flutter\wonders\MainActivity.kt: (5, 7): Redeclaration: MainActivity e: E:\project\flutter\flutter-wonderous-app\android\app\src\main\kotlin\com\gskinner\wonders\MainActivity.kt: (8, 7): Redeclaration: MainActivity

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':app:compileDebugKotlin'.

    Compilation error. See log for more details

    opened by khsbory 0
  • Tablet Support Polish Items

    Tablet Support Polish Items

    Editorial

    • [x] On tall ratios/devices, gap between clipped image and curved text title when scrolling (animates down to close gap) IMG_EAE8CEA0998F-1

    Menu

    • [x] Ideally menu X is in same position as the menu open button (top left)

    Illustrations

    • [ ] Clouds not scaling down or re-adjusting in smaller editorial illustration view — the scale of the clouds in the large tablet view don't fit well in ShortMode.

    Collection

    • [ ] Max height + aligned to bottom reset collection button (does appear in release build). IMG_E0B8FE1B7EEA-1
    opened by jaredbell 0
Owner
gskinner team
We collaborate with smart, motivated clients to conceptualize, design, and build world-class interactive experiences.
gskinner team
A set of real world timelines to showcase the use of timeline_tile package, built with Flutter.

beatiful_timelines Beautiful timelines built with Flutter and timeline_tile. Current examples: Timeline Showcase Football Timeline Activity Timeline S

null 233 Dec 21, 2022
Flutter-world-time-practice - World Time Tutorial App For Flutter

world_time Result of Flutter Tutorial for Beginners Navigation: pushNamed, pop r

Seonghyeon Cho 1 Feb 7, 2022
World Time App - World time application made using flutter

World Time App Flutter Application to view time in different parts of world. This was my first app built while learning flutter App Screenshots Loadin

Akash Rajpurohit 0 Jan 17, 2020
The prime objective of this app is to store the real time information of the user using firebase cloud firestore and also can delete, remove and update the customer information

crud_firestore A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Muhammad Zakariya 0 Mar 15, 2022
MQuote provides you +700 Motivational & Inspirational quotes by famous authors, celebrities. Powered by Flutter

MQuote MQuote provides you +700 Motivational & Inspirational quotes by famous authors, celebrities. you can select your favorite quotes, you can share

Aybars 22 Jan 27, 2022
Experimenting with 6 examples of different types of simple and complex JSON structures in Flutter

Parsing complex JSON in Flutter Gives a detailed explanation of working with simple and complex JSON structures using dart:convert library in Flutter

Pooja Bhaumik 488 Jan 6, 2023
Implementation of data structures and algorithms in Dart programming language.

Algorithms in Dart Implementation of several algorithms with Dart programming language. Use dartdoc to generate documentation. Lists List data structu

Mafinar Khan 197 Dec 24, 2022
Prepare for Data Structures & Algorithms questions for your upcoming interviews with this Flutter App made by Parker Shamblin.

flutter_data_structures_and_algorithms Prepare for Data Structures & Algorithms questions for your upcoming interviews with this Flutter App made by P

Parker Shamblin 3 Jun 12, 2022
The simple way to show the user some information on your selected widget.

Info Popup The simple way to show the user some information on your selected widget. Features Info holder with dynamic size Fully editable content are

Salih Can 9 Nov 23, 2022
An introduction to one of the famous flutter package called bloc

BLoC Tutorial - Udemy The full documentation on BLoC package is available in bloclibrary.dev. This video tutorial is also available on youtube. If you

Md. Siam 1 Mar 26, 2022
Flutter guide + SDK. Check Community repository for common information.

freeRASP for Flutter freeRASP for Flutter is a part of security SDK for the app shielding and security monitoring. Learn more about provided features

Talsec 63 Dec 26, 2022
BubbleShowcase is a small but power flutter package that allows you to highlight specific parts of your app to explain them to the user or to showcase your app new features.

BubbleShowcase BubbleShowcase is a small but powerful flutter package that allows you to highlight specific parts of your app (to explain them to the

Hugo Delaunay 38 Oct 26, 2022
A Flutter package allows you to Showcase/Highlight your widgets step by step.👌🔝🎉

ShowCaseView A Flutter package allows you to Showcase/Highlight your widgets step by step. Preview Installing Add dependency to pubspec.yaml Get the l

Simform Solutions 1.1k Jan 2, 2023
SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

Domingo 4 Mar 4, 2022
A most easily usable cookie management library in Dart. With SweetCookieJar, you can easily manage cookie on your application.

A most easily usable cookie management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use SweetCookieJar 1

Kato Shinya 9 Oct 27, 2022
A most easily usable cache management library in Dart. With CacheStorage, you can easily manage cache on your application.

A most easily usable cache management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use CacheStorage 1.2.

Kato Shinya 1 Dec 13, 2021
A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Kato Shinya 2 Apr 7, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Johannes Milke 46 Dec 6, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Johannes Milke 45 Dec 15, 2022