Section Scroll In Flutter

Section Scroll In Flutter :

Screenshot :

adsorptiondatabin.dart

import 'package:flutter/material.dart';

class AdsorptionData {
  bool isHeader = false;
  GlobalKey adsorptionKey = new GlobalKey();
}

adsorptionlistbin.dart

import 'adsorptiondatabin.dart';

class AdsorptionListBin extends AdsorptionData{
  AdsorptionListBin( this.headerName);

  String headerName;

  @override
  String toString() {
    return 'AdsorptionListBin{headerName: $headerName}';
  }
}

adsorptionview_flutter.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'adsorptiondatabin.dart';

typedef Widget GetHearWidget<M extends AdsorptionData>(M bin);
typedef Widget GetGeneralItem<M extends AdsorptionData>(M bin);

class AdsorptionView<T extends AdsorptionData> extends StatefulWidget {
  final List<T> adsorptionDatas;
  final GetHearWidget<T> headChild;
  final GetGeneralItem<T> generalItemChild;
  final double itemHeight;
  final double itemWidth;
  final double cacheExtent;

  AdsorptionView({
    @required this.adsorptionDatas,
    @required this.headChild,
    @required this.generalItemChild,
    this.itemHeight: 50.0,
    this.itemWidth: double.infinity,
    this.cacheExtent: 30.0,
  }) : assert(
          adsorptionDatas != null,
          generalItemChild != null && headChild != null,
        );

  @override
  State<StatefulWidget> createState() {
    return new AdsorptionViewState<T>();
  }
}

class AdsorptionViewState<T extends AdsorptionData>
    extends State<AdsorptionView<T>> {
  ScrollController scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        new AdsorptionListView(
          scrollController: scrollController,
          adsorptionDatas: widget.adsorptionDatas,
          generalItemChild: widget.generalItemChild,
          headChild: widget.headChild,
          itemHeight: widget.itemHeight,
          itemWidth: widget.itemWidth,
          cacheExtent: widget.cacheExtent,
        ),
        new GestureDetector(
          onTap: () {
            double pixels = scrollController.position.pixels;
            int a = pixels ~/ widget.itemHeight;
            for (int i = a; i >= 0; i--) {
              if (widget.adsorptionDatas[i].isHeader) {
                scrollController.animateTo(i * widget.itemHeight,
                    duration: new Duration(milliseconds: 200),
                    curve: Curves.linear);
                break;
              }
            }
          },
          child: new HeaderView(
            scrollController: scrollController,
            headChild: widget.headChild,
            adsorptionDatas: widget.adsorptionDatas,
            itemWidth: widget.itemWidth,
            itemHeight: widget.itemHeight,
          ),
        ),
      ],
    );
  }
}

class AdsorptionListView<T extends AdsorptionData> extends StatefulWidget {
  final ScrollController scrollController;
  final double itemHeight;
  final double itemWidth;
  final double cacheExtent;
  final List<T> adsorptionDatas;
  final GetHearWidget<T> headChild;
  final GetGeneralItem<T> generalItemChild;

  AdsorptionListView({
    @required this.adsorptionDatas,
    @required this.headChild,
    @required this.generalItemChild,
    this.itemHeight: 50.0,
    this.itemWidth: double.infinity,
    this.cacheExtent: 30.0,
    @required this.scrollController,
  }) : assert(
          adsorptionDatas != null,
          generalItemChild != null && headChild != null,
        );

  @override
  State<StatefulWidget> createState() {
    return AdsorptionListViewState<T>();
  }
}

class AdsorptionListViewState<T extends AdsorptionData>
    extends State<AdsorptionListView<T>> {
  ScrollPhysics scrollPhysics = new ClampingScrollPhysics();

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      physics: scrollPhysics,
      cacheExtent: widget.cacheExtent,
      controller: widget.scrollController,
      itemCount: widget.adsorptionDatas.length,
      itemBuilder: (context, index) {
        if (widget.adsorptionDatas[index].isHeader) {
          return new Container(
            width: widget.itemWidth,
            height: widget.itemHeight,
            child: widget.headChild(widget.adsorptionDatas[index]),
          );
        } else {
          return new Container(
            width: widget.itemWidth,
            height: widget.itemHeight,
            child: widget.generalItemChild(widget.adsorptionDatas[index]),
          );
        }
      },
    );
  }
}

class HeaderView<T extends AdsorptionData> extends StatefulWidget {
  final ScrollController scrollController;
  final double itemHeight;
  final double itemWidth;
  final GetHearWidget<T> headChild;
  final List<T> adsorptionDatas;

  HeaderView({
    @required this.scrollController,
    this.itemHeight: 50.0,
    this.itemWidth: double.infinity,
    @required this.headChild,
    @required this.adsorptionDatas,
  });

  @override
  State<StatefulWidget> createState() {
    return new HeaderViewState<T>();
  }
}

class HeaderViewState<T extends AdsorptionData> extends State<HeaderView<T>> {
  double headerOffset = 0.0;
  T headerStr;
  double beforeScroll = 0.0;

  @override
  void initState() {
    headerStr = widget.adsorptionDatas.first;

    widget.scrollController.addListener(() {
      double pixels = widget.scrollController.position.pixels;
      int a = pixels ~/ widget.itemHeight;
      double b = pixels % widget.itemHeight;
      double currentScrollPosition =
          widget.scrollController.position.extentBefore;
      if (widget.adsorptionDatas[a + 1].isHeader) {
        setState(() {
          if (currentScrollPosition - beforeScroll < 0) {
            for (int i = a; i >= 0; i--) {
              if (widget.adsorptionDatas[i].isHeader) {
                headerStr = widget.adsorptionDatas[i];
                break;
              }
            }
          }
          beforeScroll = currentScrollPosition;
          headerOffset = -b;
        });
      } else {
        for (int i = a; i >= 0; i--) {
          if (widget.adsorptionDatas[i].isHeader) {
            if (headerStr != widget.adsorptionDatas[i]) {
              setState(() {
                headerStr = widget.adsorptionDatas[i];
              });
            }
            break;
          }
        }
        if (headerOffset != 0) {
          setState(() {
            headerOffset = 0.0;
          });
        }
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      transform: Matrix4.translationValues(0.0, headerOffset, 0.0),
      width: widget.itemWidth,
      height: widget.itemHeight,
      child: widget.headChild(headerStr),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'adsorptionlistbin.dart';
import 'adsorptionview_flutter.dart';

void main() => runApp(new MaterialApp(
      title: 'AdsorptionViewDemo',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new AdsorptionViewDemo(),
    ));

class AdsorptionViewDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    List<AdsorptionListBin> adsorptionDatas = new List();
    AdsorptionListBin adsorptionData;

    adsorptionData = new AdsorptionListBin("A");
    adsorptionData.isHeader = true;
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Apple");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Anjou");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Aubergine");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("B");
    adsorptionData.isHeader = true;
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Berry");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Bean");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("C");
    adsorptionData.isHeader = true;
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Crispin");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Cherry");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Cerise");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Clementine");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Citron");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("D");
    adsorptionData.isHeader = true;
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Daikon");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("P");
    adsorptionData.isHeader = true;
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Persimmon");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Peaches");
    adsorptionDatas.add(adsorptionData);

    adsorptionData = new AdsorptionListBin("Pinto");
    adsorptionDatas.add(adsorptionData);

    return new AdsorptionViewState(adsorptionDatas);
  }
}

class AdsorptionViewState extends State<AdsorptionViewDemo> {
  AdsorptionViewState(this.adsorptionDatas);

  List<AdsorptionListBin> adsorptionDatas;
  double itemHeight = 50.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Header Section Scroll in flutter"),
      ),
      body: new AdsorptionView(
        adsorptionDatas: adsorptionDatas,
        generalItemChild: (AdsorptionListBin bin) {
          return new Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 0.0),
            child: new Text(
              bin.headerName,
              style: new TextStyle(fontSize: 18.0, color: Colors.grey),
            ),
          );
        },
        headChild: (AdsorptionListBin bin) {
          return new Container(
            color: Colors.grey,
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 0.0),
            child: new Text(
              bin.headerName,
              style: new TextStyle(fontSize: 20.0, color: Colors.black),
            ),
          );
        },
      ),
    );
  }
}

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