1384: Include categories in SliverAppBar

[andrew8er]

Short Description

Move the category filter bar into the main app bar. I currently use the flexibleSpace slot of the SliverAppBar, which turned out to work better than the bottom slot. Both approaches have the problem that they need a preferred height to be set, which is not optimal, since we have a dynamic list of categories to filter on.

Another approach would be to implement a complete SliverPersistentHeader, component, which is considerable more work.

Opinions and advice very welcome.

Proposed Changes

• Move the category filter bar into the main app bar as flexibleSpace component.
• Add VS Code launch settings for frontend.
• Rename widgets to better reflect their type.
• Enable Sentry reporting only for release builds.

Side Effects

Testing

Resolved Issues

Fixes: #1384

[f1sh1918]

I tested a lot of approaches f.e. calculated the categories container and setting the height with that, using LayoutBuilder. All of that doesn't work really good and will bring a lot of maybe error prone code with it.

I think your way is a okay solution, as i don't think the amount of categories will differ a lot.
But to make it a little bit more stable, we could calculate with the device width and the amount of categories if we have to render one line or two lines and set the particular height.

With the current amount of categories, we have only issues with 13" devices (1 line).

I know that this is not an ideal solution but i think its acceptable.
I tested that with all common devices sizes

[andrew8er]

@f1sh1918
I'm currently trying this approach: https://gist.github.com/aklehm/cd2eb6462f85f6fabd07e660bd5f0ce1
Not working yet, but might be the best one yet.

[f1sh1918]

https://gist.github.com/aklehm/cd2eb6462f85f6fabd07e660bd5f0ce1

Okay i tried sth similar and didn't get it work so far because it didn't work really before build. Give it a try but i wouldn't waste too much time

[andrew8er]

• I adjusted the paddings and set the appropriate background color to match the design.
• The design also states that we should use a new icon for mobility, but changing one logo might result in a bit of an out-of-place look, and we need to sync it up with the maplibre-style. Would it be better to change all icons in an extra issue and use an established icon set (something like https://tabler.io/icons) with a more modern look?

[connium]

* The design also states that we should use a new icon for mobility, but changing one logo might result in a bit of an out-of-place look, and we need to sync it up with the maplibre-style. Would it be better to change all icons in an extra issue and use an established icon set (something like https://tabler.io/icons) with a more modern look?

@simomps mentioned in their research, that most of the icons look outdated. We will change them in the future, so I don't think we should exchange just a single icon right now.

[f1sh1918]

* The design also states that we should use a new icon for mobility, but changing one logo might result in a bit of an out-of-place look, and we need to sync it up with the maplibre-style. Would it be better to change all icons in an extra issue and use an established icon set (something like https://tabler.io/icons) with a more modern look?

@simomps mentioned in their research, that most of the icons look outdated. We will change them in the future, so I don't think we should exchange just a single icon right now.

Yes all the logos must align with
https://github.com/digitalfabrik/ehrenamtskarte-maplibre-style/tree/gh-pages

Acutally the icons are really restricited, since you need single path svgs as far as i can remember. So depending on the icon source, there have to be many adjustments and conversion made.
It's really annoying update the logos and regenerate the icon spite 🙈

But yes separate task.

[f1sh1918]

Looks good so far.

One improvement that i would have in my mind that we also limit the amount of categories per row to 5 and center it horizontally and vertically.
It may looks better than having 10 categories in a row (13" devices)

[andrew8er]

@f1sh1918
I tried an approach, where I calculate the necessary height of the filter bar depending on the number of categories. It is an approximation but should be good enough for this usage and should accommodate wide and narrow devices.

As for the balancing of items across the rows, Wrap does not natively allow this. It could be done manually with multiple Rows. Instead I changed the WrapAlignment to center, which looks pretty decent, maybe even better. What do you think?

[f1sh1918]

For 13inch ipad i get
"Bottom overflowed by 12pixels"

Same for 11inch devices

normal smartphones like iPhoneSE (lots of space)

[f1sh1918]

🔧 i think this value should be reused from filter_bar_button LN90 or better declared somewhere globally and used in both cases