如何使用 Flutter 实现像 Sliver AppBar 这样的“一个 UI”

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)

Answer 1

I've created the One Ui Scroll View .

You can also add actions , and customize any others.

Answer 2

NestedScrollView(
    headerSliverBuilder:
        (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
                SliverAppBar(
                    backgroundColor: Palette.primaryBackgroundColor,
                    expandedHeight: 180.0,
                    pinned: true,
                    elevation: 0,
                    centerTitle: true,
                    flexibleSpace: FlexibleSpaceBar(
                        centerTitle: true,
                        title: Text("Attachments", style: Styles.appBarTitle),
                    ),
                ));

You can use this to get the ONE UI look that you want. The height can be changed on the expandedHeight.