How to scroll to the next item in the ListView - flutter

Question

I am trying to make a scrollable ListView to the next element so that it is always at the beginning (or center) of the page (as in PageView)
My problem is inertia, the backward movement of an element after scrolling.
How can I implements item's behavior without inertia?
Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<ScrollController> _horizontalControllers;
ScrollController _verticalController;
var _itemCountHorizontal = 15;
bool _inProgress;
Orientation get isPortrait => MediaQuery.of(context).orientation;
double get _height => MediaQuery.of(context).size.height;
double get _width => MediaQuery.of(context).size.width;
double get horizontalPadding {
double _padd;
if (isPortrait == Orientation.portrait) {
_padd = _width * 0.01;
} else {
_padd = _width * 0.01;
}
return _padd;
}
double get verticalPadding {
double _padd;
if (isPortrait == Orientation.portrait) {
_padd = cardHeight * 0.005;
} else {
_padd = (_height - cardHeight) / 2;
}
return _padd;
}
double get cardHeight {
double cardH;
if (isPortrait == Orientation.portrait) {
cardH = cardWidth * 1.7;
} else {
cardH = _height * 0.9;
}
return cardH;
}
double get cardWidth {
var cardW = _width * 0.99;
if (cardW > _height / 1.7) {
cardW = _height / 1.77;
}
return cardW;
}
#override
void initState() {
_horizontalControllers = [
ScrollController(),
ScrollController(),
ScrollController(),
ScrollController(),
ScrollController(),
];
_verticalController = ScrollController();
_inProgress = false;
super.initState();
}
#override
void dispose() {
_horizontalControllers.forEach((element) {
element.dispose();
});
_verticalController.dispose();
super.dispose();
}
void _onEndScrollVertical(ScrollMetrics metrics) {
print("scroll before = ${metrics.extentBefore}");
print("scroll after = ${metrics.extentAfter}");
print("scroll inside = ${metrics.extentInside}");
print("index = ${metrics.axisDirection}");
print("item HEIGHT => $cardHeight");
final topPadd = MediaQuery.of(context).padding.top;
print('TOPPPPPPPPPP $topPadd');
/* int point = metrics.extentAfter ~/ (_height - topPadd);
var offset = (_height - topPadd) * point;
_inProgress = true;
Future.delayed(Duration(milliseconds: 100), () {
_verticalController.animateTo(offset,
duration: Duration(milliseconds: 1000), curve: Curves.fastOutSlowIn);
});
_inProgress = false;
*/
var halfOfTheHeight = cardHeight / 2;
var offsetOfItem = metrics.extentBefore % cardHeight;
if (offsetOfItem < halfOfTheHeight) {
final offset = metrics.extentBefore - offsetOfItem;
print("offsetOfItem1 = $offsetOfItem offset = $offset");
Future.delayed(Duration(milliseconds: 50), () {
_verticalController.animateTo(offset,
duration: Duration(milliseconds: 1000),
curve: Curves.fastOutSlowIn);
});
} else if (offsetOfItem > halfOfTheHeight) {
final offset = metrics.extentBefore + offsetOfItem;
print("offsetOfItem2 = $offsetOfItem offset = $offset");
Future.delayed(Duration(milliseconds: 50), () {
_verticalController.animateTo(offset,
duration: Duration(milliseconds: 1000),
curve: Curves.fastOutSlowIn);
});
}
}
void _onEndScrollHorizontal(ScrollMetrics metrics, int index) {
print("scroll before = ${metrics.extentBefore}");
print("scroll after = ${metrics.extentAfter}");
print("scroll inside = ${metrics.extentInside}");
print("item WIDTH => $cardWidth");
var halfOfTheWidth = _width / 2;
var offsetOfItem = metrics.extentBefore % _width;
if (offsetOfItem < halfOfTheWidth) {
final offset = metrics.extentBefore - offsetOfItem;
print("offsetOfItem1 = $offsetOfItem offset = $offset");
_inProgress = true;
Future.delayed(Duration(milliseconds: 10), () {
_horizontalControllers[index].animateTo(offset,
duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
});
_inProgress = false;
} else if (offsetOfItem > halfOfTheWidth) {
_inProgress = true;
final offset = metrics.extentBefore + offsetOfItem;
print("offsetOfItem2 = $offsetOfItem offset = $offset");
Future.delayed(Duration(milliseconds: 10), () {
_horizontalControllers[index].animateTo(offset,
duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
});
_inProgress = false;
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollEndNotification &&
scrollNotification.depth == 0) {
if (!_inProgress) {
print('ScrollEndNotification ===> $scrollNotification');
_onEndScrollVertical(scrollNotification.metrics);
}
}
return null;
},
child: buildListViewVertical(),
),
),
);
}
Widget buildListViewVertical() {
return ListView.builder(
itemCount: _itemCountHorizontal,
itemExtent: cardHeight,
controller: _verticalController,
itemBuilder: (BuildContext context, int index) {
return NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollEndNotification &&
scrollNotification.depth == 0) {
print('ScrollEndNotification ===> $scrollNotification');
_onEndScrollHorizontal(scrollNotification.metrics, index);
}
return null;
},
child: buildListViewHorizontal(index));
},
);
}
Widget buildListViewHorizontal(int index) {
return ListView.builder(
controller: _horizontalControllers[index],
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: _itemCountHorizontal + 1,
itemBuilder: (BuildContext context, int index) =>
index < _itemCountHorizontal
? Padding(
padding: EdgeInsets.only(
left: horizontalPadding,
right: horizontalPadding,
top: verticalPadding,
bottom: verticalPadding,
),
child: Container(height: 340, width: 200, color: Colors.red),
)
: SizedBox(
width: 50,
),
);
}
}
Here is a working example for DartPad
Update:
I add CustomScrollPhysics() to ListView, and that solution removed the inertia on reverse motions. Howewer, inertia persisted when moving from index 0 and above...
Code:
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
class CustomScrollPhysics extends ScrollPhysics {
const CustomScrollPhysics({ScrollPhysics parent}) : super(parent: parent);
#override
SpringDescription get spring => SpringDescription(damping: 0.1);
#override
CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
return CustomScrollPhysics(parent: buildParent(ancestor));
}
}

Answer 1

you can use DraggableScrollableSheet and SingleChildScrollView Widgets

Answer 2

first you need to change you widget into statefullwidget then you need to use Global key to scroll to the position that you want. and the position that you want to scroll to "widget ex." must have a name .