Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to customize the SliverAppBar widget in flutter?

Tags:

flutter

dart

enter image description here

I would like to add some more information in the green area, but when user scrolls up, I keep the _ SliverAppBar on the top..., like this:

enter image description here

Here is my current source code:

body: new CustomScrollView(slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 300.0, // TODO: check out later
            flexibleSpace: const FlexibleSpaceBar(
              title: const Text('_SliverAppBar')
            ),
          ),
          new SliverList(delegate: new SliverChildListDelegate(_galleryListItems()))
        ]),
like image 489
DNB5brims Avatar asked Apr 20 '18 13:04

DNB5brims


People also ask

How do you use SliverAppBar Flutter?

In Flutter, SliverAppBar is a successor to the AppBar widget, which allows you to create the floating app bar effect. The SliverAppBar expands the AppBar when the screen is scrolled up and collapsed on scroll down. You can also completely remove or hide the AppBar when the user is scrolling down a long list.

How do you use custom scroll view in Flutter?

Now lets start implementation of CustomScrollView in Flutter First of all, create a basic project and return a Custom Scroll View widget. Then, add a silver app bar and then add a silver grid. Here we only used two child widgets in the custom scroll view. The Entry point of code.

How do I hide the title in SliverAppBar?

Set the bottom property of the SliverAppBar to PreferredSize widget. Set the preferredSize property of this bottom widget to 0 (Size. fromHeight(0)), so that the sliver app bar's height will become the height for the app bar when the sliver is collapsed. Show activity on this post.


1 Answers

The FlexibleSpaceBar has a background property the accepts any Widget

Use to build the information you need:

FlexibleSpaceBar(
  title: Text('_SliverAppBar'),
  background: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Info'),
    ],
  ),
),

Here is a more complete example that adds a subtitle and hides it when the user scrolls.

like image 60
Ian Avatar answered Nov 15 '22 09:11

Ian