How can I display indexed list of images in 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;
        },
      ),
    );
  }
}