Recent additions to SliverAppBar (Flutter Widget of the Week)

Google for Developers · 474K views · 2018 · 1:10

Open on YouTube

Software (other)UX & UI designexplainerdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering Flutter questions about collapsing, pinned, or animated app bars and sliver-based scrolling.

Recommended by 3 people across 3 different months, 2019 to 2022.

What it is

A 70-second Flutter Widget of the Week episode from Google for Developers on SliverAppBar, the widget for animated app bar headers that change or collapse as the user scrolls. It explains how SliverAppBar pairs with CustomScrollView to get custom scroll behavior.

What people said

Recommends Yash Aervadiya · 2020-02 · Stack Overflow · on “Custom Appbar's animation Flutter”

You can use SliverAppBar [LINK] For the animation you want to create, SliverAppBar( expandedHeight: height, flexibleSpace: const FlexibleSpaceBar( title: Text('Reading Now'), ), For more details you can visit here [this video]

Recommends Pushpendra · 2021-05 · Stack Overflow · on “unable to place container iside a stack inside scrollable sliverlist”

Why don't you use, "CustomScrollView" and use SliverAppBar for the image part. Like this implementation [this video]

Recommends Aloysius Samuel · 2022-04 · Stack Overflow · on “How can I create home page scrool like starbucks app home page”

You can use the SliverAppBar class for your use, which is a material design app bar provided by the dart. [this video] Flutter Dev Link [LINK]

Cites Julien Lachal · 2019-07 · Stack Overflow · on “SingleChildScrollView inside Row”

AFAIK the `SingleChildScrollView` is useful when you want to scroll through more than the size of the screen, instead of using a ListView and be stuck when it occupies the full height of the phone. It also allows you to keep all the widgets "alive" when they appear outside of the viewport. Take a look at the Flutter video [this video]

Cites Tinus Jackson · 2019-09 · Stack Overflow · on “Flutter: collapsing app bar with pinned tabBar”

You can use the SilverAppBar SliverAppBar( expandedHeight: 150.0, floating:true, pinned: true, flexibleSpace: const FlexibleSpaceBar( title: Text('Available seats'), ), actions: <Widget>[ IconButton( icon: const Icon(Icons.add_circle), tooltip: 'Add new entry', onPressed: () { /* ... */ }, ), ] ) References SliverAppBar Class [LINK] SliverAppBar Widget of the week [this video]