Why The Flutter SDK Sucks
Flutter SDK suck areas and what to do about it
Due to Google building 4 front-end frameworks, the Flutter SDK engineering team is always extremely resource constrained. While I rant on the short-comings of the Flutter SDK; I also detail the Flutter Community solutions that we, the Flutter SDK users, have created to fill the holes in the Flutter SDK.
Material ThemeData Theme Nulls
While Flutter does have a Cupertino Theme system, most have figured out that its legacy and the only true theme system in flutter is Material Design. Part of the machinery code infrastructure of ThemeData that the Flutter SDK team came up with is to fill all the component themes referenced in ThemeData will nulls.
The end app designer consequence is that we have to create 20-plus component themes for an app and those component themes for the most part the actual parameters to make non-null are color parameters. The solution from the Flutter Community has color scheme in the package name, as it generates a special color scheme and uses it to create the flutter component themes automatically. The package is Flex Color Scheme by RydMike who is an outside Flutter SDK contributor.
As an added bonus, RydMike tracks defects in the component themes and often offers workarounds via the Flex Color Scheme package.
Next up, is a decent navigation API.
A Decent Navigation API
While the Navigation 2 API in the Flutter SDK is nice, it's not declarative. The Flutter SDK team came up with Go Router and Go Router Builder so that one create the navigation route table in a declarative way with full type safety instead of using strings.
Next up is the missing adaptive scaffold pattern.
Missing Material Design 3 Adaptive Scaffold UX Pattern
While yes there is a scaffold widget in the Flutter SDK, it by itself does not support the adaptive scaffold UX pattern introduced in Material Design 2 and refined in Material Design 3. The Flutter SDK team has created the Flutter Adaptive Scaffold package to allow app designers to easily create and customize that adaptive scaffold UX pattern.
While they did create that package, it was over-engineered in the wrong direction to support foldables. Instead, to support foldables and canonical layouts on desktop one sets one body slot instead of body and sencond body and uses some layout templates from microsoft to implement canonical layouts.
Next up, Material Design 3 Canonical Layouts.
Material Design 3 Canonical Layouts
While there is no direct package supporting Material Design 3 Canonical Layouts, one can re-work the Microsoft Surface SDK examples to implement canonical layouts.
Microsoft's Surface Duo SDK Samples Flutter
Next up is platform adaptations.
Platform Adaptations
So the platform adaptations we have are:
Automatic
-Page-Nav transitions
-Platform specific Scrolling physics behavior
-TextTheme defaults to system fonts if no custom fonts supplied
-material package shows different icons on iOS compared to Android automatically
(one also has the manual Icons.adaptive constructor to use)
-haptic feedback per platform
-text editing per platform
-tap gestures per platform
Part of my personal story with flutter is that before we had adaptive constructors in the Flutter SDK I was a small contributor to the Flutter Platform Widgets package. Now that we have adaptive constructors in the SDK we no longer have to use that package. The adaptive constructors are:
Switch.adaptive
Slider.adaptive
CircularProgressIndicator.adaptive
Checkbox.adaptive
Radio.adaptive
Notice anything? Yes, no adaptive dialog from Android to iOS. Someone in the Flutter Community stepped up and created the Adaptive Dialog package that addresses this problem.
Next up, Material Design UX missing patterns.
Material Design 3 UX Missing Patterns
There are some UX patterns and widgets that were first introduced in the Material Design 2 spec, still part of Material Design 3 and still not in the Flutter SDK.
These are the current missing ones:
-Carousel With Animation
-Backdrop
-Sidesheets, both modal and standard
-Onboarding, indirectly implied
At this time backdrop and onboarding are covered while the other ones are a bit iffy.
Flutter Carousel Intro for Onboarding
Now let me tell the secret about the Material Design 3 carousel. I have not implemented my version yet, but it's a page view model structure. And using state to apply specific item scale and animation to the n+1 and the N-1 items.
And the final section is state management.
State Management
The Flutter SDK does provide one aspect of the state management data binding in the form of specialized listener observers called notifiers.
There are some better forms from the Flutter Community, such as the Observable ish package.
The Flutter Community projects the Flutter SDK team is recommending to complete the other parts of the data binding are:
Provider, it's improved inherited widget-model based
BLoC, for when you want to go beyond Provider and have actual MVVM the provider way
There are of course other state management options as well, which I will cover eventually.
Next up, there are some things missing from Dart that we need.
Things Missing From The Dart SDK
The benefits to having immutable models is it is easier to manage thread wise in less errors. But if we just use the immutable annotation it only enforces use to do certain things we still all have that manually changing how the equality is determined both for simple object models and collections.
Google and the Flutter Community have created solutions to this with:
Google's Built Value Generator
Last, how about Material Design 3 animations?
Material Design 3 Animations
None of the animations called for in the Material Design 3 spec are in the Flutter SDK. Instead, we have to depend on some other packages.
Flutter Staggered Animations, otherwise nicknamed as skeleton loading
The other Material Design 3 animations can be found in this Flutter SDK team created package:
Now that is the directly mentioned ones. However, there are some other ones that are indirectly implied in the Material Design spec. And, in fact Google has started to recommend in the Flutter Docs to use this package for those animations:
Thoughts
It feels like we need to know about APIs outside the Flutter Docs, with it being 50% outside the Flutter ADK to make a quality designed flutter app.
Fred Grott's Newsletter
Code: Flutter Bytes Hub
Demos-at-YouTube: My YouTube Channel
An ADHD'ers super focus on Flutter app design and the side hustle of designing flutter apps. Delivered, several days every weekday to your inbox.
I hold several chats during the week to answer flutter app design questions:
