Home Flexfold ColorScheme ColorPicker
Talo Grid Issues Blog

Flexfold

Flexfold is a responsive and adaptive Scaffold package for Flutter. A live web demo of an example app using the package can be seen and tested here. It is my intention to open source this demo application after the Flexfold package itself has been published.

A beta version of the Flutter Flexfold package is being used in this demo, but it has not been published on pub.dev yet, it is still pending documentation. Some Flutter APIs it is using are also not yet available on Flutter’s stable channel. To avoid releasing separate versions, one for the stable channel and another one for the beta/dev/master channels, it is being held back until the used APIs land in the stable channel too. OK, you got me, it’s really the darn docs that I have not had time to complete.

Flexfold in Action

A key feature of the Flexfold scaffold is that navigation mode changes are animated as shown below.

Animated Flexfold

If desired the animations can be customized to make it really wild, not necessarily recommended for a real app, but it looks cool in a demo.

Crazy Animated Flexfold

Flexfold and DevicePreview

The Flexfold demo app uses the wonderful DevicePreview package by Aloïs Deniel, this makes it possible to test and verify configured responsive behavior on different device approximations.

Animated Flexfold DevicePreview

Flexfold API Tooltips

When you try the Flexfold demo app you will notice that on the Settings page, all the settings have tooltips that show the API used to control the setting and its current value. This feature in the demo app is an interactive way to help you find the right Flexfold API and value, to configure its behavior in a way that fits your use case.

The tooltips in the demo app can be turned OFF via yet another setting. Generally tooltips tend to get in the way when you are very familiar with an app and no longer need them. I always recommend implementing a global tooltip toggle offered to users in advanced settings. Flexfold support this by offering an API for turning OFF all tooltips used in the package.

Flexfold API tooltips

Flexfold Feature Demos

A walk through of Flexfold’s features can be found in this Tweet thread. It uses animated GIF screen recordings to show the impact of the most frequently used settings.

Flexfold 03

Flexfold does Undraw

There are some playful extras in the Flexfold demo app that are not really relevant to the Flexfold package. One such thing are the lovely Undraw SVG drawings made by Katerina Limpitsouni. In the demo app they change color and are themed to match the color of the primary color of selected FlexColorScheme based theme. Like the theme changes in Flutter, the colors also animate in the SVG drawings while theme changes.

The SVG drawings also animate in and out between a few selected ones related to the page they are on. The display order is random between the ones that are included for each page. On the Slivers page in the demo we go nuts and display hundreds of Undraw SVGs, where each one gets a random color and is animated in/out to another random image at random time intervals. This is just a wild test to stress Flutter on different platforms, especially on Web. I doubt it is really relevant to any real world use case, nevertheless it is interesting to see that it actually works. On desktop builds it is actually really smooth in release mode, in Web builds it is a bit janky, but it works OK.

Flexfold undraw

Flexfold goes Plasma

Last but not least of the wild things, is a toggle that enables an animated plasma background effect on the side bar and Flexfold Home page. This plasma effect is something I found in Felix Blaschke’s simple_animations_package. He also has a Flutter web app called Liquid Studio where you can try it and design custom plasma effects.

The Plasma effects I used are defined in code and tied to the primary theme color and light/dark mode, so that it always fits as a page background effect. It looks cooler in dark mode though.

Flexfold plasma


Page updated 21.12.2020