santa112358/customizable_space_bar

customizable_space_bar

pub package License: MIT

AppBar which changes the content with scrolling rate. Enables to implement "Large Title"

13063567123474

Usage

This package is expected to be used with flexibleSpace: in SliverAppBar, which means you also need to use CustomScrollView.

    CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            leading: IconButton(icon: Icon(Icons.arrow_back_ios_sharp)),
            backgroundColor: Theme.of(context).scaffoldBackgroundColor,

            /// This is the part you use this package
            flexibleSpace: CustomizableSpaceBar(
              builder: (context, scrollingRate) {
                /// Example content
                return Padding(
                  padding: EdgeInsets.only(
                      bottom: 13, left: 12 + 40 * scrollingRate),
                  child: Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      "Hello World.",
                      style: TextStyle(
                          fontSize: 42 - 18 * scrollingRate,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                );
              },
            ),
            /// End of the part

            expandedHeight: 150,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text("LIST ITEM"),
                );
              },
            ),
          )
        ],
      ),

You can control the layout in the AppBar with scrollingRate.

When the shape is fully expanded, scrollingRate is 0.0. When the shape is collapsed to AppBar, it reaches to the limit 1.0.

13063658045969

If you have any requests or questions, please feel free to ask on github.