Stretchy Header

pub package

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

Sample 1

Sample 2

Sample 3

Img url: https://media.giphy.com/media/1NUOenNf2oKU3YuWb1/giphy.gif

Getting started

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

dependencies:
  stretchy_header: "^1.0.0"

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 SampleStretchy1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: StretchyHeader(
          headerHeight: 250.0,
          header: Image.asset(
            "images/chichen.jpg",
            fit: BoxFit.cover,
          ),
          body: ListView.builder(
            itemCount: 15,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text("item $index"),
              );
            },
          ),
        ),
      ),
    );
  }
}

Sample 2


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

class SampleStretchy2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StretchyHeader(
        headerHeight: 200.0,
        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,
        ),
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Text(
            "Hello World!",
            style: TextStyle(fontSize: 45.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Sample 3

If you want to put a footer widget in your header that always will be visible, use headerFooter


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

class SampleStretchy3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StretchyHeader(
        headerHeight: 250.0,
        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.0),
            child: Text(
              "Machu Picchu",
              style: TextStyle(color: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Text("Long text here"),
        ),
      ),
    );
  }
}

You can follow me on twitter @diegoveloper

Libraries

stretchy_header

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]