Widgets you never knew existed

Resources
,
1

Present a widget that you never knew was implemented but now you can’t unsee.
If possible explain and post an example where it can be applied.

I start with SnapshotWidget

It build and store a ui.Image of its children so you can compound complex effects while keeping effective display performance.

25 Likes
2

thanks @BlueAquilae for this post

2 Likes
3

Fantastic topic!

Here’s my latest find:

11 Likes
4

I found Badge and Banner widget few weeks ago.

6 Likes
5

Cool shares…

Not necessary a widget, but a combination of Transitions that I like to use when showing a widget sliding from the bottom of the screen.

ScaleTransition(
  scale: Tween<double>(begin: 0.8, end: 1.0).animate(
    CurvedAnimation(
      parent: ModalRoute.of(context)!.animation!,
      curve: Curves.easeOut,
    ),
  ),
  child: FadeTransition(
    opacity: ModalRoute.of(context)!.animation!,
    child: Card(),
  ),
),
4 Likes
6

I didn’t need this until I was creating a Rive animation that extends beyond the parent bounds.

7

I think it’d be really great if when people share a widget that they found that they explain the use case of when they used it

5 Likes
8

A Widget which is really cool to display zoomable and movable objects

3 Likes
9

Did you use this for a game?

1 Like
10

Just 2 minutes ago I learned about LimitedBox thanks to @RandalSchwartz video

There’s even a video about it from 5 years ago

5 Likes
11

@dominik not sure I fully understand its usefulness? Is it just to allow me to define a widget that can be used in listviews but also in parents that have bounds?
Wondering what the difference is to just wrapping the List items in SizedBox ?

12

SizedBox always poses constraints. LimitedBox only constraints when unbounded.

A typical example is let’s you have a loading widget that’s used across your app. Inside of a list or a sliver you need that to have a definite size but if its constrained already by some other widget it makes sense for the loading indicator to fill up the entire widget.

So when you want something that’s allowed to fill up the parent but handle itself in situations where the parent doesn’t constrain the child, LimitedBox is useful

8 Likes
13

Thanks! The Badge widget just let me drop some ugly hackery I did with Stack. I’m using Badge.count() to enhance an in-app messaging “Inbox” tab.

2 Likes
14

I recently discovered the SizedOverflowBox widget.

For me, it was quite handy when I was creating a custom Sliver version of the RefreshIndicator.
I used the SizedOverflowBox with a Size.fromHeight(double.minPositive) to render an almost invisible SliverToBoxAdapter, and then I used a Transform.translate to actually display the inner refresh indicator body with a size and an offset equals to the overscroll value.

Something like this:

Widget build(BuildContext context) {
  return SliverToBoxAdapter(
    child: SizedOverflowBox(
      size: const Size.fromHeight(double.minPositive),
      alignment: Alignment.topCenter,
      child: Transform.translate(
        offset: Offset(0, -overscroll),
        child: SizedBox(
          height: overscroll,
          child: RefreshIndicatorBody(),
        ),
      ),
    ),
  );
}

This could also be achieved with RenderSlivers, of course.

7 Likes
15

Thanks! I now understand what I can use it for. (I had never understood it before.)

I think the name is confusing, especially if you already know OverflowBox. I sometimes use OverflowBox to ignore the side paddings and display a carousel in full screen width, and I assumed SizedOverflowBox could be used instead. It actually cannot be used for the same purpose.

2 Likes
16

Just want to reply to say thanks for sharing an example of when it’d be good to use, I found your example to be great!

2 Likes
17

Such a good thread

1 Like
18

Mine is Visibility. The moment I started using it, I couldn’t stop :joy::joy:
So no need for if statement in my UI code

19

It’s really nice of y’all to plan the next few Widgets of the Week for us. :slight_smile:

In all seriousness, though, I didn’t know about several of these myself, so thanks!

6 Likes
20

Offstage in Flutter

Offstage can be used to measure the dimensions of a widget without bringing it on screen (yet).
To hide a widget from view while it is not needed, prefer removing the widget from the tree entirely rather than keeping it alive in an Offstage subtree.

Learn more about Offstage

3 Likes