@roaakdm: Flutter Tips & Widgets
Random Flutter tips about cool widgets, best-practices, and performance optimization tips. These are tips I mainly share on Twitter and wanted to have a place to include them all in this article.
Tip #2 — Widget Constructor Assertions
Tip #3 — Prevent TabView rebuild on Tab Switch
Tip #4 — RefreshIndicator Widget
Tip #6 — CachedNetworkImage Package
Tip #10 — ReorderableListView Widget
Tip #1 — Optimistic Updating
For a better user experience, update your UI before sending the API request and in case of error revert back to original state (aka Optimistic Updating)
Imagine a switch that toggles a boolean value, it won’t be cool if the user clicked and the switch didn’t respond to the user input right away!
Tip #2 — Widget Constructor Assertions
use widget constructor assertions to avoid hard-to-trace errors for a better development experience.
Tip #3 — Prevent TabView rebuild on Tab Switch
Use AutomaticKeepAliveClientMixin with your TabBarView children widgets to prevent rebuilding them on each tab switch
Here’s an example, here each tab sends an API request in its initState(), so every time it gets rebuilt! So without the AutomaticKeepAliveClientMixin it will send the request on each switch! Not cool 🙅🏽♀️
Tip #4 — RefreshIndicator Widget
use the RefreshIndicator widget to allow your users to refresh a page’s content.
Tip #5 — IgnorePointer Widget
Use the IgnorePointer widget to disable all pointer events for any section of your app!
An example usage would be if some API request is still loading and you don’t want the user to be able to do anything until it’s done!
Tip #6 — CachedNetworkImage Package
use the amazing CachedNetworkImage package to cache network images for a faster & smoother app flow 🔥! And don’t forget to utilize the placeholder and the errorWidget widget builders for a better user experience!
Bonus tip: Create a wrapper widget for it with your own placeholder and errorWidget implementations for UI consistency and to avoid code repetition
View a more detailed wrapper widget code in this gist
Tip #7 — RichText Widget
use the RichText widget to be able to change the text style of specific words or portions inside your paragraph.
Check out the code in this Gist
Tip #8 — SafeArea Widget
use the #SafeArea widget to make sure your content is not hidden by any operating system elements like the status bar at the top or the iOS home indicator at the bottom. You might need this if your page doesn’t have an app bar for example.
Tip #9 — ScrollBar Widget
wrap your long scrollable widget with a ScrollBar widget to display a scrollbar for a better user experience.
By default, the ScrollBar widget is platform dependent and reflects native behavior (like iOS’s haptic feedback)
Tip #10 — ReorderableListView Widget
use the ReorderableListView widget to easily create lists that the user can reorder
Check out the code in this Gist
Tip #11 — SliverToBoxAdapter & SliverList Widgets
if you want to sneak 🥷🏽 in a normal box widget between your slivers widgets (in a CustomScrollView, for example), you can use the #SliverToBoxAdapter widget!
But be careful not to overuse it! Because slivers are built only as they appear in the scroll view, which is awesome for performance! 🔥 ↗️
But the SliverToBoxAdapter cancels this behavior, so if you have multiple normal-box widgets, put them in a SliverList instead
Tip #12 — Better Performance For Long Lists
For long lists, use the builder() constructor with your ListView or GridView widgets. This way your list/grid items will only be built on-demand as they are scrolled into view
This list is always updated with new Tweets & Tips 🔥
