by shawn.blais

Flutter: Simplify Platform & Screen Size Detection

In the never-ending quest to reduce boilerplate and DRY up our code in Flutter, we have noticed that using the MediaQuery class can be a bit cumbersome, and it’s also missing a couple of key pieces of information.

The issues we see are:

  • MediaQuery.of(context) is a bit verbose on its face
  • Checking for orientation especially is too long:
    bool isLandscape = MediaQuery.of(context).orientation == Orientation.landscape
  • There is no diagonal size parameter, so you can’t easily get the true screen size of the device, helpful for determining your form factor
  • There is no way to get the size in inches, which can be useful when thinking about breakpoints (for most people, 4.5″ is easier to picture, than 720 logical pixels)

To that end, we have small Screen helper class, that we use across all our new projects:

Continue reading →
by shawn.blais

Flutter: WidgetView – A Simple Separation of Layout and Logic

One of the most interesting aspects of Flutter, is the way it mixes declarative markup-style code, with imperative business logic style code, all within the same Dart programming language and file. This creates a really nice coupling between interface and function. When compared to editing XAML for UWP apps, or XML for native Android, building interfaces in Flutter can be a very rapid workflow.

While this is really nice from a productivity standpoint, it also manifests as one of Flutters biggest issues…

Continue reading →
by shawn.blais

Flutter: Creating a Flippable Box with TweenAnimationBuilder

One of the great things about Flutter, is how you can use composition to combine multiple built-in Widgets, creating unique UI’s very quickly and easily.

Today, we’re going to create a FlippableBox, which is a double-sided card, that holds two pieces of content and automatically re-sizes to match its content, whenever it’s flipped over.

It will end up looking something like this:

Final State
Continue reading →
by Michæl Graves

Google, Adobe, gskinner | Flutter Interact ’19

Flutter is a mobile UI toolkit that combines fast development, expressive and beautiful UIs, with native performance. To test-drive the platform, Grant Skinner & Mike Chambers recently built Redrix: a mobile companion app for Destiny 2.

Download Redrix on iOS or Android
Continue reading →
by Kia Valdez Bettcher

The Camp.site Design: How the Concept Came to Be

Back in May, the organizer of CAMP approached gskinner to create a site to promote their festival. For those who don’t know, CAMP is a festival held in Calgary every year that describes itself as: “…a non-profit organization celebrating the art and technology of creative storytelling. We bring together like-minded professionals, artists, educators and students to share and shape experiences that educate, challenge and inspire.” 

Continue reading →
by Kia Valdez Bettcher

Not Your Typical Walk Cycle

Warning: There is a GIF at the bottom of the post with flashing images.

Like many of you, I was inspired by the impressive visuals of Spider-Man: Into the Spider-Verse (which, by the way, has a website built using gskinner’s CreateJS libraries that power dynamic interfaces much like those in a bitcoin casino game I prototyped for fun) and wanted to try to apply some of that style into one of my animations.

On top of that, I’ve had the idea of making a walk cycle with an astronaut for a while and decided it was time to make it. 

Continue reading →