How can I display indexed list of images in flutter? - flutter

Question

I want to create widget which images are displayed in a row.
Width of each images are same as device width.
So I created listview which has image widget.
but some of images are bigger than device height and image is cropped.
What can I do for my flutter project?
This is what I tried.
ListView.builder(
shrinkWrap: true,
scrollDirection:
widget.options.isHorizontal! ? Axis.horizontal : Axis.vertical,
physics:
widget.options.isHorizontal! ? const PageScrollPhysics() : null,
itemCount: widget.items?.length,
itemBuilder: (BuildContext context, int index) {
return Image.memory(
widget.items![index],
width: widget.options.isHorizontal!
? null
: MediaQuery.of(context).size.width,
height: widget.options.isHorizontal!
? MediaQuery.of(context).size.height
: null,
fit:
widget.options.isHorizontal! ? BoxFit.contain : BoxFit.fitWidth,
);
},
)

Answer 1

you can use ConstrainedBox
this is example code.
The JumpTo part of this example is not perfect yet, I hope you can realize it by learning ScrollNotification.
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
late ScrollController _controller;
bool lock = false;
#override
void initState() {
_controller = ScrollController();
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
var maxWidth = MediaQuery.of(context).size.width;
var maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: NotificationListener<ScrollNotification>(
child: ListView.builder(
controller: _controller,
physics: ClampingScrollPhysics(),
itemCount: 20,
itemExtent: maxWidth,
itemBuilder: (context, index) {
return ConstrainedBox(
constraints:
BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
child: Image.network('https://picsum.photos/600'));
},
scrollDirection: Axis.horizontal,
),
onNotification: (ScrollNotification notification) {
if (notification is ScrollStartNotification) {
lock = false;
}
if (notification is ScrollEndNotification &&
!lock &&
_controller.position.isScrollingNotifier.value &&
_controller.position.hasPixels) {
lock = true;
var current = _controller.offset;
var diffIndex = (current / maxWidth).floor();
var isNext = ((current / maxWidth).toDouble() * 0.001) > 0.5;
var nexPosition = 0.0;
if (isNext) {
nexPosition = (diffIndex + 1) * maxWidth;
} else {
nexPosition = diffIndex * maxWidth;
}
_controller.removeListener(() {});
Future.delayed(Duration.zero, () {
// _controller.jumpTo(nexPosition);
_controller.animateTo(nexPosition,
duration: Duration(milliseconds: 400),
curve: Curves.fastOutSlowIn);
}).whenComplete(() => _controller.addListener(() {}));
}
return lock;
},
),
);
}
}