News and views on the world of interactive media from the gskinner team
Category / Code
RoutedWidgetSwitcher is intended as a complimentary package for any Router (aka Nav2) implementation, including popular routing solutions like GoRouter, RouteMaster or VRouter etc. It is read-only, and simply binds to the current Router location and renders the matching widget.
Switching widgets based on location is useful for two primary use cases:
when you have scaffolding around your Navigator, like a SideBar or a TitleBar and you would like it to react to location changes
when multiple paths resolve to the same Page and you want to move subsequent routing further down the tree
It is based on Flutters AnimatedSwitcher widget, so it has support for a custom transition and duration. For path matching it uses the popular PathToRegExp package which is also used by many of the implementations including GoRouter and VRouter.
Using RoutedWidgetSwitcher provides a few benefits to your code:
no need to add pattern matching logic to your outer scaffolding and inner sub-tree. Instead express the location bindings in a simple declarative format which is more flutter-like
Decouple your ui from any particular routing package, making it easier to change packages later or migrate code across projects
Recently we took a deep dive into the new skeleton template included in the Flutter SDK. As noted in the article, one of the big missing pieces in the template is a scalable state management solution with dependency injection and data-binding.
Given that, we thought it would be informative to convert it to use a couple of popular state management libraries, specifically riverpod and GetItMixin.
If you’re not familiar with GetIt, it is a robust implementation of the classic service locator pattern, which allows you to register objects by their type and then look them up from anywhere in the app. Recently it gained a sibling package named GetItMixin which provides reactive widget binding hooks. Combined these two packages make up one of the simplest and cleanest methods of managing state within a Flutter application. Let’s take a look!
Today we’re going to look at 3 of the more popular libraries for basic state management in Flutter: GetIt, Provider and riverpod.
For each of the libraries, we’ll look at how you can perform data-binding, data-injection, and how you might mock them for testing. To follow along with the examples below, check out the code on github.
For many years Flutter has provided the basic “Counter App” each time you created a new project. While that example provides a nice introduction to the foundational concepts of StatefulWidget and basic font/asset management, it does not really resemble the structure of a “complete app”. This has left developers without guidance for anything beyond a basic single page app.
One thing that has always felt a little limiting in Flutter for us has been its inability to perform hit-testing for a button or gesture detector that is outside the parents bounds. This has been a popular issue in the Flutter bug-base over the years, getting something around 150+ upvotes if you add up all incarnations of the issue.
In a previous post we looked at a method for binding directly to the keyboard. While this is handy for quick spikes, or truly global listeners, it is a little dangerous as it is easy to forget to remove these listeners. In this post we’ll look at a couple of different ways to do this a little more safely.
Alpha video in HTML5 should be easy right? Not quite, certainly not as easy as Flash was. In an article a long long time ago, from an internet far far away … I wrote about alpha video in Flash 8. (remember Flash?). Back then alpha video was a huge new feature that allowed developers to create a .flv with a transparent background that worked in all browsers. Allowing us to do all sorts of fancy effects. With Flash being a thing of the past, modern browsers are not in agreement on what video format we should use on the web. It makes things a little more muddled today.