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