customizable_space_bar

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

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.

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

Libraries

customizable_space_bar