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.

21 Likes
2

thanks @BlueAquilae for this post

1 Like
3

Fantastic topic!

Here’s my latest find:

8 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(),
  ),
),
3 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

4 Likes
8

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

3 Likes
9

Did you use this for a game?

10

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

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

3 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

6 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.

1 Like
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.

5 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.

1 Like
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