miroslava-podybailo/flutter_sliver_header_delegate

sliver_header_delegate

This package provides a flexible sliver header delegate that allows easily customize your SliverHeader

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
    ...
    sliver_header_delegate: ^0.0.1

Import in your project:

import 'package:sliver_header_delegate/sliver_header_delegate.dart';

Inside your CustomScrollView declare SliverPersistentHeader and set FlexibleHeaderDelegate as it's delegate

CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          delegate: FlexibleHeaderDelegate(),
        ),
      ],
    );

If you want your widget to fill the status bar, specify statusBarHeight parameter:

delegate: FlexibleHeaderDelegate(
            statusBarHeight: MediaQuery.of(context).padding.top,
          ),

Examples

Complete example

https://raw.githubusercontent.com/miroslava-podybailo/flutter_sliver_header_delegate/HEAD/completed.gif

SliverPersistentHeader(
  pinned: true,
  delegate: FlexibleHeaderDelegate(
    statusBarHeight: MediaQuery.of(context).padding.top,
    expandedHeight: 240,
    background: MutableBackground(
      expandedWidget: Image.asset(
        'assets/images/mountains.jpg',
        fit: BoxFit.cover,
      ),
      collapsedColor: primaryColor,
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () {},
      ),
      IconButton(
        icon: const Icon(Icons.more_vert),
        onPressed: () {},
      ),
    ],
    children: [
      FlexibleTextItem(
        text: 'Mountains',
        collapsedStyle: collapsedStyle,
        expandedStyle: expandedStyle,
        expandedAlignment: Alignment.bottomLeft,
        collapsedAlignment: Alignment.center,
        expandedPadding: padding,
      ),
    ],
  ),
)

Mutable background

https://raw.githubusercontent.com/miroslava-podybailo/flutter_sliver_header_delegate/HEAD/mutable_background.gif

 SliverPersistentHeader(
            pinned: true,
            delegate: FlexibleHeaderDelegate(
              expandedHeight: 240,
              background: MutableBackground(
                expandedWidget: Image.network(_imageUrl, fit: BoxFit.cover),
                collapsedColor: _headerColor,
              ),
            ),
          ),

Gradient background

https://raw.githubusercontent.com/miroslava-podybailo/flutter_sliver_header_delegate/HEAD/gradient_background.gif

  SliverPersistentHeader(
            pinned: true,
            delegate: FlexibleHeaderDelegate(
              background: GradientBackground(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    _startColor,
                    _endColor,
                  ],
                ),
              ),
            ),
          ),

Modified title

https://raw.githubusercontent.com/miroslava-podybailo/flutter_sliver_header_delegate/HEAD/modified_title.gif

    SliverPersistentHeader(
              pinned: true,
              delegate: FlexibleHeaderDelegate(
                backgroundColor: Colors.white,
                children: [
                  FlexibleTextItem(
                    text: 'Modified title',
                    expandedStyle: _expandedTextStyle,
                    collapsedStyle: _collapsedTextStyle,
                    expandedAlignment: Alignment.bottomLeft,
                    collapsedAlignment: Alignment.center,
                    expandedPadding: _expandedPadding,
                  ),
                ],
              ),
            ),