feat: add a stack option to YaruChoiceChipBar

[Feichtmeier]

This introduces a third option "stack" for the choice chip bar.

Bildschirmaufnahme.2023-06-22.um.11.34.18.mov

Since it changes the parameters of the widget I thought "feat!" was correct ❓

[Jupi007]

Is it normal that the listView is visible below the nextButton but not below the previousButton in stacked mode?

[jpnurmi]

I guess feat: is fine without an exclamation mark because the widget hasn't been released yet so the change is not breaking compared to a previous release

[Feichtmeier]

ah! ok :)
will change this when I finalized the design. I have a better idea for the stack

[Feichtmeier]

@Jupi007 @jpnurmi

I thought, why show them at all if they are disable in the stack?

My questions would be just:

1. with or without a border
2. if they are round, make the chips here round as well (not everywhere)?

Bildschirmaufnahme.2023-06-22.um.12.11.17.mov

[Jupi007]

This look better 👍

I just have a few note:

• What about add a fade in/out on buttons?
• Maybe add a radius clip on the listView with the same radius as buttons, so chips border don't leak at corners.

[Feichtmeier]

Bildschirmaufnahme.2023-06-22.um.12.40.40.mov

Clip was a good idea!
AnimatedContainer does not work, any other idea?

[Jupi007]

AnimatedContainer does not work, any other idea?

Why is it not working? 🤔

[Feichtmeier]

No idea 🤷

if (_enableGoPreviousButton)
              AnimatedContainer(
                duration: const Duration(seconds: 5),
                curve: Curves.bounceInOut,
                child: Positioned(
                  left: 0,
                  child: goPreviousButton,
                ),
              ),

no animation 🤷
is it the wrong place?

[Jupi007]

You need to use AnimatedOpacity, and always include the widget in the tree (drop if (_enableGoPreviousButton)):

              AnimatedOpacity(
                opacity: _enableGoPreviousButton ? 1.0 : 0.0,
                duration: const Duration(seconds: 5),
                curve: Curves.bounceInOut,
                child: Positioned(
                  left: 0,
                  child: goPreviousButton,
                ),
              ),

[Feichtmeier]

the other way round but now it works thanks!

Bildschirmaufnahme.2023-06-22.um.13.07.17.mov

[Jupi007]

LGTM 👍

[Feichtmeier]

Eventually I could add the option to parameterize the radius of the buttons and the chips because this may look better if everything was completely round

[Feichtmeier]

@jpnurmi okay if I merge or anything you want to see changed in the design or code?

[jpnurmi]

please go ahead, no need to wait for me