Stretchy Header

This package allows us to create an elastic header, to give a good effect when you scroll down the widget.

Sample 1

Sample 2

Getting started

You should ensure that you add the router as a dependency in your flutter project.

dependencies:
  stretchy_header: "^1.0.8"

You should then run flutter packages upgrade or update your packages in IntelliJ.

Example Project

There is an example project in the example folder. Check it out. Otherwise, keep reading to get up and running.

Usage

Sample 1

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

class SampleListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StretchyHeader.listViewBuilder(
        headerData: HeaderData(
          headerHeight: 250,
          header: Image.asset(
            "images/chichen.jpg",
            fit: BoxFit.cover,
          ),
        ),
        itemCount: 15,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("item $index"),
            onTap: () {
              final snackBar = SnackBar(
                content: Text('item $index tapped'),
              );
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            },
          );
        },
      ),
    );
  }
}

Sample 2

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

class SampleCustomHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StretchyHeader.singleChild(
        headerData: HeaderData(
          headerHeight: 200,
          backgroundColor: Colors.black54,
          blurColor: Colors.yellow,
          header: UserAccountsDrawerHeader(
            accountName: Text("Diego"),
            accountEmail: Text("twitter @diegoveloper"),
            currentAccountPicture: CircleAvatar(
              backgroundColor: Colors.red,
              child: Text("DV"),
            ),
            margin: EdgeInsets.zero,
          ),
          overlay: Align(
            alignment: Alignment.bottomRight,
            child: Material(
              color: Colors.transparent,
              child: InkResponse(
                onTap: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('onTap'),
                    ),
                  );
                },
                child: Padding(
                  padding: EdgeInsets.all(12),
                  child: Icon(
                    Icons.fullscreen,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Text(
            "Hello World!",
            style: TextStyle(fontSize: 45, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Sample 3

class SampleBottomLabel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StretchyHeader.singleChild(
        headerData: HeaderData(
          headerHeight: 250,
          header: Image.asset(
            "images/machu.jpg",
            fit: BoxFit.cover,
          ),
          highlightHeaderAlignment: HighlightHeaderAlignment.bottom,
          highlightHeader: Container(
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black54,
                    Colors.black54,
                    Colors.black26,
                    Colors.black12,
                    Colors.black12,
                  ],
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                )),
            child: Padding(
              padding: const EdgeInsets.all(15),
              child: Text(
                "Machu Picchu",
                style: TextStyle(color: Colors.white, fontSize: 22),
              ),
            ),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Text(LONG_DESCRIPTION),
        ),
      ),
    );
  }
}

Sample 4

class SampleCenterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StretchyHeader.singleChild(
        headerData: HeaderData(
          headerHeight: 250,
          header: Image.asset(
            "images/machu.jpg",
            fit: BoxFit.cover,
          ),
          highlightHeaderAlignment: HighlightHeaderAlignment.center,
          highlightHeader: SizedBox(
            width: MediaQuery.of(context).size.width,
            child: GestureDetector(
              onTap: () {
                print("tap highlightHeader");
              },
              child: CircleAvatar(
                backgroundColor: Colors.red,
                child: Text("M"),
              ),
            ),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Text(LONG_DESCRIPTION),
        ),
      ),
    );
  }
}

You can follow me on twitter @diegoveloper

Comments

How to control the pull down refresh?

Hello, this is a very nice widget, and I am using it in conjunction with the pull down refresh widget. But I don't know how to make them work together, do you have any examples about pull down refresh widget?

opened by seekcx 9

GestureDetector onTap event not called inside body widget

Hi, awesome package btw.

I'm trying to place a GestureDetector inside the StretchyHeader body widget, but something is swallowing the call. Any ideas about why that might be happening?

return SafeArea(
      child: Scaffold(
        body: StretchyHeader(
          headerHeight: 250.0,
          header: Image.asset(
            "assets/hol.jpg",
            fit: BoxFit.cover,
          ),
          body: ListView.builder(
            itemCount: 15,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: GestureDetector(
                  child: Container(
                    color: Colors.blue,
                    height: 10,
                  ),
                  onTap: () {
                    print('object');
                  },
                ),
              );
            },
          ),
        ),
      ),
    );

opened by samigimix 7

GestureDetector onTap event not called inside header widget

Hi, awesome package btw.

I'm trying to place a GestureDetector inside the StretchyHeader header widget, but something is swallowing the call. If I place a GestureDetector around the StrectchyHeader it works, but then it's called for the whole view. Any ideas about why that might be happening?

Thanks

opened by danielhakimi 4
Add `overlay` widget to header

This widget will be placed on top the header container. Can be used to add clickable items to the header bottom which doesn't prevent it from scrolling.

opened by PiN73 3
[Security] Workflow release.yml is using vulnerable action actions/checkout

The workflow release.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability. The vulnerability fix that is missing by actions version could be related to: (1) CVE fix (2) upgrade of vulnerable dependency (3) fix to secret leak and others. Please consider to update the reference to the action.

opened by Ale0x78 1
SingleChildScrollView with horizontal scrollDirection produces bug

If you make StretchyHeader.singleChild with SingleChildScrollView child with scrollDirection: Axis.horizontal, it will produce weird bug:

Reproduce widget code

opened by siberder 0