The brief
Showcase Flutter's capabilities to create apps that feel at home on every platform and device: iOS, Android, Mac, Linux, Windows, and the Web.
Walkthrough of the app @ Flutter Engage
Outcome
For Google's Flutter Engage event we launched Flutter Folio, a scrapbooking app that purposefully considers the capabilities, user expectations, input devices and idioms for each platform.
Impressively, over 95% of the code base was shared between platforms.
Our approach
We built an app that respects the norms and leverages the strengths of each platform it runs on; mobile focuses on content gathering (snapping pics), desktop/tablet on creation, and the web on sharing.
To encourage direct learning we open sourced Flutter Folio with an MIT license. Visit GitHub
Custom OS title bars for Linux, Windows 10 and MacOS
Native controls, custom elements.
We worked to combine native look and feel, with custom elements to create title bars that feel right at home, but aren't utilitarian.
Adapting to screen size & input devices
User interface controls adapt their density, hit areas, and presentation based on screen size and whether the user is using touch or mouse/keyboard.
Keyboard shortcuts, scroll wheel, and right-click accelerate tasks when available.
Right click controls are swapped for buttons on tablet + touch devices
A modal control is swapped for a sheet for mobile
Platform adaptive menus & panels
Modal overlays on desktop & sheets on mobile reflect the expectation of users and maximize usability. Flutter let us adjust layouts or even navigation flows easily for each platform.
Deep link & browser support
The full app works online, but it also supports a read-only mode for sharing scrapbooks with friends or family.
Flutter made adding support for the web a walk in the park
Download
Download Flutter Folio for any platform
learnings from flutter folio
We're always excited to share our experiences with Flutter on our blog. We'll be sharing more about what we learned building Flutter Folio in the coming weeks.
