0 purchases
Description:
rivership
Rivership #
Rivership is a set of opinionated tools that will get you shipping your Flutter app in no time if you are using riverpod and flutter_hooks.
Installation 💻 #
Install via dart pub add or flutter pub add:
dart pub add rivership
copied to clipboard
What's included 📦 #
Rivership includes a diverse set of hooks, type extensions, and utilities that will help you build your app faster and more efficiently. Everything is documented extensively, but here's a quick overview over the highlights:
Hooks #
useTweenAnimation
A super helpful hook that lets you use the power of TweenAnimationBuilder without any nesting.
final bool isActive;
Widget build(BuildContext context, WidgetRef ref) {
// This will start at 0 and animate to 1 when isActive is true.
// It will also keep animating each transition after that.
final scale = useTweenAnimation<double>(
Tween(begin: 0.0, end: isActive ? 1.0 : 0.0),
);
return Transform.scale(
scale: scale,
child: const Text('Hello World'),
);
}
copied to clipboard
For even terser code, you can use the useTweenedValue convenience hook, that will initialize the Tween for you:
final bool isActive;
Widget build(BuildContext context, WidgetRef ref) {
// This will automatically animate each transition when changing isActive.
final scale = useTweenedValue<double>(isActive ? 1.0 : 0.0);
return Transform.scale(
scale: scale,
child: const Text('Hello World'),
);
}
copied to clipboard
useDelayed
A hook that will help you model delayed UI changes in a declarative way.
This can be super helpful for all kinds of animations, popovers, toasts, etc.
Let's say for example that we want to color a counter text red for 1 second every time its value changes.
final int value;
Widget build(BuildContext context, WidgetRef ref) {
// This will restart with true every time value changes.
final isRed = useDelayed(
delay: const Duration(seconds: 1),
before: true,
after: false,
keys: [value],
);
return Text(
'Value: $value',
style: TextStyle(color: isRed ? Colors.red : Colors.black),
);
}
copied to clipboard
If you don't want the text to start red, but instead only color it when value changes for the first time, you can set startDone to true:
final isRed = useDelayed(
delay: const Duration(seconds: 1),
before: true,
after: false,
startDone: true,
keys: [value],
);
copied to clipboard
usePage
A hook that will return the current page from a given PageController which can help you achieve complex animations and transitions in PageViews.
Widget build(BuildContext context, WidgetRef ref) {
final pageController = usePageController();
final page = usePage(pageController);
return Text('Current page: $page');
}
copied to clipboard
[!WARNING] Be mindful of rebuilds
Similar to hooks like useAnimation, this hook will trigger a rebuild on every frame while the page is being dragged or animating.
Make sure to call this from a widget that is cheap to rebuild, ideally a leaf of your widget tree.
Design Utilities #
Rivership includes a few helper tools for working with Colors and other UI properties.
SimpleWidgetStates
A subclass of WidgetStateProperty that purposefully doesn't trades flexibility for simplicity.
Simply define states like this:
return TextButton(
style: TextButton.styleFrom(
color: SimpleWidgetStates.from(
normal: Colors.blue,
pressed: Colors.blue[800],
disabled: Colors.grey,
),
),
child: Text("Button"),
onPressed: () {},
);
copied to clipboard
The values you don't pass will fall back to those you did pass, so you can define only the states you need.
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files In This Product:
Customer Reviews
There are no reviews.
