Flutter Scroll with fixed start end end point - flutter

Question

I want to create a scroll that scrolls from one fixed point to another. With Positioned I can draw an Image to an absolute position and I want a scroll that works in a similar way. A bidirectional scroll that has coordinates where it should stop scrolling and isn't sized by the Widges inside it.
As an example it should be able to scroll to the top of the first image that has an absolute position.
It is supposed to be a bidirectional infinity scroll, without memory leaks. I want to remove and add images above without messing up the scrollprogress. That’s why I chose absolute positions for the images and want to know how to make it scrollable.
return Scaffold(
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Stack(children: <Widget>[
Container(
height: 1500,
width: double.maxFinite,
color: Colors.blue,
),
Positioned(
top: -100,
width: 500,
height: 600,
left: 0,
child: Image.network("https://trade.recosurfaces.com/wp-content/uploads/2020/08/100X-PGB1-DBWT-800x800.jpg")),
Positioned(
top: 400,
width: 500,
height: 500,
left: 0,
child: Image.network("https://trade.recosurfaces.com/wp-content/uploads/2020/08/100X-PGB1-DBWT-800x800.jpg")),
Positioned(
top: 900,
width: 500,
height: 500,
left: 0,
child: Image.network("https://trade.recosurfaces.com/wp-content/uploads/2020/08/100X-PGB1-DBWT-800x800.jpg"))
]),
));

Answer 1

You can use LazyLoading package or infiniteScrollPagination. if you face some issue when parsing the list, check out this post tempListModel

Answer 2

Perhaps, you want to achieve a vertical (or maybe horizontal) carousel slider for images. If I'm not wrong, I recommend a package that can easily manage your code and save time.
Package link: https://pub.dev/packages/carousel_slider

Answer 3

Just import the carousel slider package from the below-mentioned site.
Link: https://pub.dev/packages/carousel_slider
Then, try this example code I wrote for you. Kindly explore the carousel options property. This package is popular as well as feature-rich.
My code:
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class Demo extends StatefulWidget {
const Demo({Key? key}) : super(key: key);
#override
State<Demo> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
final CarouselController _carouselController = CarouselController();
final List<String> _imageURLsList = [
"https://trade.recosurfaces.com/wp-content/uploads/2020/08/100X-PGB1-DBWT-800x800.jpg",
"https://trade.recosurfaces.com/wp-content/uploads/2020/08/100X-PGB1-DBWT-800x800.jpg",
"https://trade.recosurfaces.com/wp-content/uploads/2020/08/100X-PGB1-DBWT-800x800.jpg",
];
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: CarouselSlider.builder(
itemCount: _imageURLsList.length,
carouselController: _carouselController,
options: CarouselOptions(
scrollDirection: Axis.vertical,
enableInfiniteScroll: true,
),
itemBuilder: (context, index, realIndex) {
return Image.network(_imageURLsList[index]);
},
),
),
],
),
),
);
}
}