How to achieve a "One UI" like Sliver AppBar using Flutter

Question

Inspired by Samsung's new One UI, I wanted to implement something similar using SliverAppBar in Flutter. But I am unable to figure out...

As per One UI implementation, The SliverAppBar title should appear right in the center (both vertically and horizontally) of the expanded App Bar. At the same time, it should stick to the left when collapsed.

NOTE: In my case, the App Bar contains Background Image also... So, trying to wrap the FlexibleSpaceBar with Column widget seems to make the background look weird.

I also want to get rid of extra padding on the left (which is available by default even when no "leading" widget is placed) when collapsed. Also, it would be better if the actions appear at the bottom of the SliverAppBar when expanded, so that users can reach them one-handedly...

One UI:

---

Left ⇒ Expanded:                    Right ⇒ Collapsed:

- Actions on bottom                 - Actions as usual
- title is centered                 - title is on the left
                                      (no unwanted padding on the left of title)

Solution

I've created the One Ui Scroll View.

You can also add actions, and customize any others.

Comments

[Rémi Rousselet]

SliverAppBar is a material design app bar. If you want a custom design, use SliverPersistentHeader

[Melvin Abraham]

@RémiRousselet Thanks a lot for that suggestion. I successfully implemented my custom AppBar... 💗

[willy wijaya]

Could you share your code @MelvinAbraham

[Melvin Abraham]

@willywijaya I didn't implement the exact "One UI" like appbar, rather I took a gist of it and tried to implement my own version. You can click here to view the code for my implementation of custom appbar. You just need to plug MySliverPersistenceHeaderDelegate in SliverPersistentHeader as its delegate.

[Jeremi]

life saving! Thank you!