Skip to content

A powerful extension library of Sliver, which include SliverToNestedScrollBoxAdapter, SliverPinnedPersistentHeader, SliverPinnedToBoxAdapter and ExtendedSliverAppbar.

License

Notifications You must be signed in to change notification settings

fluttercandies/extended_sliver

Repository files navigation

extended_sliver

pub package GitHub stars GitHub forks GitHub license GitHub issues flutter-candies

Language: English | 中文简体

Description

A powerful extension library of Sliver, which include SliverToNestedScrollBoxAdapter, SliverPinnedPersistentHeader, SliverPinnedToBoxAdapter and ExtendedSliverAppbar.

Usage

Add packages to dependencies

Add the package to pubspec.yaml under dependencies.

dependencies:
  extended_sliver: latest-version

Download with flutter packages get

SliverPinnedPersistentHeader

It's the same as SliverPersistentHeader(pinned: true), but you don't have to force values of minExtent and maxExtent.

It provides minExtentProtoType and maxExtentProtoType to calculate minExtent and maxExtent automatically.

It's useful that you don't know the final extent before the widgets are laid out.

    SliverPinnedPersistentHeader(
      delegate: MySliverPinnedPersistentHeaderDelegate(
        minExtentProtoType: Container(
          height: 120.0,
          color: Colors.red.withOpacity(0.5),
          child: FlatButton(
            child: const Text('minProtoType'),
            onPressed: () {
              print('minProtoType');
            },
          ),
          alignment: Alignment.topCenter,
        ),
        maxExtentProtoType: Container(
          height: 200.0,
          color: Colors.blue,
          child: FlatButton(
            child: const Text('maxProtoType'),
            onPressed: () {
              print('maxProtoType');
            },
          ),
          alignment: Alignment.bottomCenter,
        ),
      ),
    )

SliverPinnedToBoxAdapter

You can create a pinned Sliver easily with it.

It's useful that you don't know the final extent before the child are laid out.

    SliverPinnedToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.all(20),
        color: Colors.blue.withOpacity(0.5),
        child: Column(
          children: <Widget>[
            const Text(
                '[love]Extended text help you to build rich text quickly. any special text you will have with extended text. '
                '\n\nIt\'s my pleasure to invite you to join \$FlutterCandies\$ if you want to improve flutter .[love]'
                '\n\nif you meet any problem, please let me konw @zmtzawqlp .[sun_glasses]'),
            FlatButton(
              child: const Text('I\'m button. click me!'),
              onPressed: () {
                debugPrint('click');
              },
            ),
          ],
        ),
      ),
    )

ExtendedSliverAppbar

You can create SliverAppbar with out force the expandedHeight.

return CustomScrollView(
  slivers: <Widget>[
    ExtendedSliverAppbar(
      title: const Text(
        'ExtendedSliverAppbar',
        style: TextStyle(color: Colors.white),
      ),
      leading: const BackButton(
        onPressed: null,
        color: Colors.white,
      ),
      background: Image.asset(
        'assets/cypridina.jpeg',
        fit: BoxFit.cover,
      ),
      actions: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Icon(
          Icons.more_horiz,
          color: Colors.white,
        ),
      ),
    ),
  ],
);

SliverToNestedScrollBoxAdapter

You can create nested scrollable widget(like Webview) in CustomScrollView/NestedScrollView.

return CustomScrollView(
  slivers: <Widget>[
      SliverToBoxAdapter(
        child: Container(
          height: 100,
          color: Colors.red,
          child: const Center(
            child: Text(
              'Header',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    ValueListenableBuilder<double>(
      valueListenable: nestedWebviewController.scrollHeightNotifier,
      builder: (
        BuildContext context,
        double scrollHeight,
        Widget? child,
      ) {
        return SliverToNestedScrollBoxAdapter(
          childExtent: scrollHeight,
          onScrollOffsetChanged: (double scrollOffset) {
            double y = scrollOffset;
            if (Platform.isAndroid) {
              // https://github.com/flutter/flutter/issues/75841
              y *= window.devicePixelRatio;
      
            nestedWebviewController.webviewController
                ?.scrollTo(0, y.ceil());
          },
          child: child,
        );
      },
      child: WebView(
        initialUrl: nestedWebviewController.initialUrl,
        onPageStarted: nestedWebviewController.onPageStarted,
        onPageFinished: nestedWebviewController.onPageFinished,
        onWebResourceError:
            nestedWebviewController.onWebResourceError,
        onWebViewCreated: nestedWebviewController.onWebViewCreated,
        onProgress: nestedWebviewController.onProgress,
        javascriptChannels: <JavascriptChannel>{
          nestedWebviewController
              .scrollHeightNotifierJavascriptChannel
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    ),
    SliverToBoxAdapter(
        child: Container(
          height: 300,
          color: Colors.green,
          child: const Center(
            child: Text(
              'Footer',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
    ),
  ],
);

Complex Demo

Complex Demo

image

About

A powerful extension library of Sliver, which include SliverToNestedScrollBoxAdapter, SliverPinnedPersistentHeader, SliverPinnedToBoxAdapter and ExtendedSliverAppbar.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages