Header Scroll Animation In Flutter

Header Scroll Animation In Flutter :

Header scroll animation in flutter :this type of header scroll called sticky header scroll animation.

Header Scroll Animation Image 1 :

Header Scroll Animation In Flutter

Header Scroll Animation In Flutter Screenshot :

Header Scroll Animation In Flutter

main.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FindSchoolWidget(),
    );
  }
}

class FindSchoolWidget extends StatefulWidget {
  const FindSchoolWidget({
    Key key,
  }) : super(key: key);

  _FindSchoolWidgetState createState() => _FindSchoolWidgetState();
}

class _FindSchoolWidgetState extends State<FindSchoolWidget> {
  double _headerSize = 450;
  double _offset = 0.0;
  double highlightPosition = 0.0;
  ScrollController _scrollController;
  bool isFromSearch = false;
  bool buildLinks = false;
  bool buildMap = false;
  bool buildFincancial = false;
  List<bool> buildExpandedStatus = [false, false, false, false];

  @override
  void initState() {
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: MediaQuery.of(context).size.width,
        child: isFromSearch
            ? Scaffold(
                appBar: AppBar(
                    leading: IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    centerTitle: false,
                    title: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('Name',
                              style: TextStyle(
                                fontSize: 15,
                                fontWeight: FontWeight.bold,
                              )),
                          Text('State', style: TextStyle(fontSize: 11)),
                        ])),
                body: scaffoldBody(),
              )
            : Scaffold(body: scaffoldBody()));
  }

  Widget scaffoldBody() {
    highlightPosition = (_offset >= 0.0 ? -_offset : 0.0);
    return Stack(children: <Widget>[
      SizedBox(
        child: ClipRect(
            clipper: HeaderClipper(_headerSize - _offset),
            child: Container(
                child: CachedNetworkImage(
              imageUrl: '',
              placeholder: (BuildContext context, String val) {
                return Container(
                    child: Image.asset(
                  "assets/images/placeholder.png",
                  fit: BoxFit.cover,
                ));
              },
              errorWidget: (BuildContext context, String val, Object o) {
                return Container(
                    child: Image.asset(
                  "assets/images/placeholder.png",
                  fit: BoxFit.cover,
                ));
              },
              fit: BoxFit.cover,
            ))),
        height: _scrollController.hasClients &&
                _scrollController.position.extentAfter == 0.0
            ? _headerSize
            : _offset <= _headerSize ? _headerSize - _offset : 0.0,
        width: MediaQuery.of(context).size.width,
      ),
      NotificationListener<ScrollNotification>(
          onNotification: (notification) {
            if (notification is ScrollUpdateNotification) {
              setState(() {
                _offset = notification.metrics.pixels;
              });
            }
            return;
          },
          child: ListView(
              controller: _scrollController,
              physics: BouncingScrollPhysics(
                  parent: AlwaysScrollableScrollPhysics()),
              children: <Widget>[
                Stack(children: <Widget>[
                  SizedBox(height: _headerSize),
                  Positioned.fill(
                      top: 380,
                      child: Container(height: 70, color: Colors.grey[600])),
                  Positioned.fill(
                      top: 200,
                      child: Container(
                          height: 290, color: Colors.black.withOpacity(0.5))),
                  Positioned.fill(
                      top: 200,
                      child: Container(
                          height: 480,
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Column(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    _buildItem('100', 'Population'),
                                    SizedBox(height: 5),
                                    _buildItem('200', 'Average ACT'),
                                    SizedBox(height: 5),
                                    _buildItem('300', 'Out-of-state Tuition'),
                                    SizedBox(height: 5),
                                    _buildIcons(
                                        Icon(
                                          Icons.home,
                                          color: Colors.yellow,
                                          size: 29,
                                        ),
                                        'College',
                                        Colors.white)
                                  ],
                                ),
                                Column(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    _buildItem('100', 'Population'),
                                    SizedBox(height: 5),
                                    _buildItem('200', 'Average ACT'),
                                    SizedBox(height: 5),
                                    _buildItem('300', 'Out-of-state Tuition'),
                                    SizedBox(height: 5),
                                    _buildIcons(
                                        Icon(
                                          Icons.home,
                                          color: Colors.yellow,
                                          size: 29,
                                        ),
                                        'College',
                                        Colors.white)
                                  ],
                                ),
                                Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                    children: <Widget>[
                                      _buildItem('100', 'Java'),
                                      SizedBox(height: 5),
                                      _buildItem('200', 'PHP'),
                                      SizedBox(height: 5),
                                      _buildItem('300', 'Android'),
                                      SizedBox(height: 5),
                                      _buildIcons(
                                          Icon(
                                            Icons.home,
                                            color: Colors.yellow,
                                            size: 29,
                                          ),
                                          'College',
                                          Colors.white)
                                    ])
                              ])))
                ]),
                Container(
                    child: Column(children: <Widget>[
                  Container(
                      color: Colors.grey[100],
                      padding: EdgeInsets.symmetric(vertical: 13),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          _buildIcons(
                              Icon(
                                Icons.sort,
                                color: Colors.blue,
                                size: 29,
                              ),
                              'Sort',
                              Colors.black),
                          _buildIcons(
                              Icon(
                                Icons.adjust,
                                color: Colors.blue,
                                size: 29,
                              ),
                              'Organize',
                              Colors.black),
                          _buildIcons(
                              Icon(
                                Icons.add_to_queue,
                                color: Colors.blue,
                                size: 29,
                              ),
                              'Compare',
                              Colors.black),
                          _buildIcons(
                              Icon(
                                Icons.favorite_border,
                                color: Colors.blue,
                                size: 29,
                              ),
                              'Add Favourite',
                              Colors.black)
                        ],
                      )),
                  Divider(height: 2, color: Colors.grey)
                ]))
              ])),
      SizedBox.shrink()
    ]);
  }

  Widget _buildItem(number, item) {
    return Column(children: <Widget>[
      Text('$number',
          style: TextStyle(
              color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold)),
      Text('$item', style: TextStyle(color: Colors.white, fontSize: 11.3))
    ]);
  }

  Widget _buildIcons(Widget icons, String item, Color textColor) {
    return Column(children: <Widget>[
      icons,
      SizedBox(height: 5),
      Text('$item', style: TextStyle(color: textColor, fontSize: 12))
    ]);
  }
}

class HeaderClipper extends CustomClipper<Rect> {
  final double height;

  HeaderClipper(this.height);

  @override
  getClip(Size size) => Rect.fromLTRB(0.0, 0.0, size.width, this.height);

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}

pubspec.yaml

name: flutter_app
description: A new Flutter application.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  font_awesome_flutter:
  cached_network_image:

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
    - assets/images/

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in