Morioh
Login
Flutter Packages

Flutter Packages

3 months ago

An Easy-to-use & Powerful Sticky Header for Any Widget That Supports Scrolling in Flutter

easy_sticky_header 

An easy-to-use and powerful sticky header for any widget that supports scrolling.

Features 

  • Support widget for horizontal or vertical scrolling
  • Support widget for reverse scrolling
  • Allow dynamic building of header widget and support custom transition animation
  • Header widget can dynamically change stickiness
  • Support jumping to the header widget of the specified index
  • Support header widget grouping
  • Support infinite list

Usage 

Add dependency:

dependencies:
  easy_sticky_header: ^1.1.1

Import package:

import 'package:easy_sticky_header/easy_sticky_header.dart';

Example:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StickyHeader(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          // Custom header widget.
          if (index % 3 == 0) {
            return StickyContainerWidget(
              index: index,
              child: Container(
                color: Color.fromRGBO(Random().nextInt(256),
                    Random().nextInt(256), Random().nextInt(256), 1),
                padding: const EdgeInsets.only(left: 16.0),
                alignment: Alignment.centerLeft,
                width: double.infinity,
                height: 50,
                child: Text(
                  'Header #$index',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            );
          }
          // Custom item widget.
          return Container(
            width: double.infinity,
            height: 80,
            color: Colors.white,
          );
        },
      ),
    );
  }
}

For more features, please go to the example project to see the details.

Contribution 

You are welcome to contribute here πŸ˜„!

You can open an issue, if you find a bug, or want a new feature.

You can open up a PR, if you fixed a bug or implemented a new feature.

License 

MIT License

Copyright (c) 2022 crasowas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

easy_sticky_header 

    

English | δΈ­ζ–‡ 

An easy-to-use and powerful sticky header for any widget that supports scrolling.

Features 

  • Support widget for horizontal or vertical scrolling
  • Support widget for reverse scrolling
  • Allow dynamic building of header widget and support custom transition animation
  • Header widget can dynamically change stickiness
  • Support jumping to the header widget of the specified index
  • Support header widget grouping
  • Support infinite list

Usage 

Add dependency:

dependencies:
  easy_sticky_header: ^1.1.1

Import package:

import 'package:easy_sticky_header/easy_sticky_header.dart';

Example:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StickyHeader(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          // Custom header widget.
          if (index % 3 == 0) {
            return StickyContainerWidget(
              index: index,
              child: Container(
                color: Color.fromRGBO(Random().nextInt(256),
                    Random().nextInt(256), Random().nextInt(256), 1),
                padding: const EdgeInsets.only(left: 16.0),
                alignment: Alignment.centerLeft,
                width: double.infinity,
                height: 50,
                child: Text(
                  'Header #$index',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            );
          }
          // Custom item widget.
          return Container(
            width: double.infinity,
            height: 80,
            color: Colors.white,
          );
        },
      ),
    );
  }
}

For more features, please go to the example project to see the details.

Screenshots 

   
   
   

Contribution 

You are welcome to contribute here πŸ˜„!

You can open an issue, if you find a bug, or want a new feature.

You can open up a PR, if you fixed a bug or implemented a new feature.

License 

MIT License

Copyright (c) 2022 crasowas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add easy_sticky_header

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  easy_sticky_header: ^1.1.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:easy_sticky_header/easy_sticky_header.dart';

example/lib/main.dart

import 'package:easy_sticky_header/easy_sticky_header.dart';
import 'package:flutter/material.dart';

import 'examples/example0.dart';
import 'examples/example1.dart';
import 'examples/example10.dart';
import 'examples/example11.dart';
import 'examples/example12.dart';
import 'examples/example2.dart';
import 'examples/example3.dart';
import 'examples/example4.dart';
import 'examples/example5.dart';
import 'examples/example6.dart';
import 'examples/example7.dart';
import 'examples/example8.dart';
import 'examples/example9.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Sticky Header Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Easy Sticky Header Demo'),
      // showPerformanceOverlay: true,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        shadowColor: Colors.transparent,
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
        title: Text(widget.title),
      ),
      body: StickyHeader(
        child: ListView.builder(
          physics: const AlwaysScrollableScrollPhysics(
            parent: BouncingScrollPhysics(),
          ),
          itemCount: 15,
          itemBuilder: (context, index) {
            if (index == 0) {
              return _buildHeader(index, 'Getting Started');
            } else if (index == 1) {
              return _buildItem(index, 'Example 0 - Vertical scroll axis',
                  () => _push(context, const Example0()));
            } else if (index == 2) {
              return _buildItem(index, 'Example 1 - Horizontal scroll axis',
                  () => _push(context, const Example1()));
            } else if (index == 3) {
              return _buildItem(
                  index,
                  'Example 2 - ScrollController with initialScrollOffset',
                  () => _push(context, const Example2()));
            } else if (index == 4) {
              return _buildItem(
                  index,
                  'Example 3 - Building header widget by sticky amount',
                  () => _push(context, const Example3()));
            } else if (index == 5) {
              return _buildItem(
                  index,
                  'Example 4 - Scrolls to the top after the header widget is tapped',
                  () => _push(context, const Example4()));
            } else if (index == 6) {
              return _buildItem(
                  index,
                  'Example 5 - Jumps to the header widget of the specified index',
                  () => _push(context, const Example5()));
            } else if (index == 7) {
              return _buildItem(
                  index,
                  'Example 6 - Building header widget by group',
                  () => _push(context, const Example6()));
            } else if (index == 8) {
              return _buildHeader(index, 'More features');
            } else if (index == 9) {
              return _buildItem(index, 'Example 7 - GridView',
                  () => _push(context, const Example7()));
            } else if (index == 10) {
              return _buildItem(index, 'Example 8 - CustomScrollView',
                  () => _push(context, const Example8()));
            } else if (index == 11) {
              return _buildItem(index, 'Example 9 - SingleChildScrollView',
                  () => _push(context, const Example9()));
            } else if (index == 12) {
              return _buildItem(index, 'Example 10 - SliverPersistentHeader',
                  () => _push(context, const Example10()));
            } else if (index == 13) {
              return _buildItem(index, 'Example 11 - Multiple SliverList',
                  () => _push(context, const Example11()));
            } else if (index == 14) {
              return _buildItem(index, 'Example 12 - Infinite list',
                  () => _push(context, const Example12()));
            }
            return Container();
          },
        ),
      ),
    );
  }

  Widget _buildHeader(int index, String title) => StickyContainerWidget(
        index: index,
        child: Container(
          color: Colors.grey.shade600,
          padding: const EdgeInsets.only(left: 16.0),
          alignment: Alignment.centerLeft,
          width: double.infinity,
          height: 50,
          child: Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          ),
        ),
      );

  Widget _buildItem(int index, String title, GestureTapCallback? onTap) =>
      Column(
        children: <Widget>[
          ListTile(
            tileColor: Colors.white,
            title: Text(
              title,
              style: const TextStyle(
                color: Colors.black,
                fontSize: 16,
              ),
            ),
            visualDensity: const VisualDensity(vertical: 2),
            onTap: onTap,
          ),
          Divider(
            height: 1.0,
            thickness: 1.0,
            color: Colors.grey.shade200,
            indent: 16.0,
          ),
        ],
      );

  void _push(BuildContext context, Widget widget) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => widget,
    ));
  }
}

Download details:

Author: crasowas.dev

Source: https://github.com/crasowas/easy_sticky_header

#flutter #android #ios

An Easy-to-use & Powerful Sticky Header for Any Widget That Supports Scrolling in Flutter
1.05 GEEK