infinite+carouSel function

infinite_carouSel.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _c = ScrollController();
  final List<int> _itemList = [];
  var _carouSelFlg = true;

  ///　favorite number
  final _itemCount = 15;
  // final _itemCount = 10;

  /// double by 4
  /// final _displayCount = 8;
  final _displayCount = 12;

  /// final _displayIndex = 7;
  final _displayIndex = 11;

  ///　The value used for this logic is 4.
  ///　Please check the Widget and margin size settings for the reason.
  final _fourCount = 4;

  ///　Used for animation amount.
  var _carouSelCount = 0.0;

  ///　Used for swipe detection. right or left
  var _pixels = 0.0;
  double? offset = 0;
  @override
  void initState() {
    super.initState();
    for (var i = 0; i < _itemCount; i++) {
      _itemList.add(i);
    }
    var displayTextValue = 0;
    var pageNumber = 0.0;

    /// Specifies the size of the widget.
    /// The Widget size ratio this time is 0.75 per page, so the values ​​are * and 1.
    var widgetToMargin = 0.75;
    _c.addListener(() {
      setState(() {
        var width = MediaQuery.of(context).size.width / 2;
        var value = (MediaQuery.of(context).size.width - width) / 2;
        pageNumber = _c.position.pixels /
            (MediaQuery.of(context).size.width * widgetToMargin);
        if (pageNumber == _displayCount) {
          _carouSelCount = 0;
          displayTextValue +=
              displayTextValue == 0 ? _displayCount : _displayIndex;
          _infinityAnimation(
            displayTextValue,
            value * _fourCount * widgetToMargin,
          );
        } else if (pageNumber <= 0 && offset != null) {
          offset = null;

          ///　Calculation result of value setting for number of elements and movement.
          ///　example　When returning  5 ,,　<- 4.5
          ///　example　When returning  10,,　<- 10.5
          _carouSelCount = 18;
          displayTextValue -= _displayIndex;
          _infinityAnimation(
            displayTextValue,
            value * _fourCount * (_displayIndex * widgetToMargin),
          );
        }
        _carouSelCheck(value, pageNumber);
      });
    });
  }

  Future<void> _infinityAnimation(int d1, double d2) async {
    for (var i = 0; i < _itemCount; i++) {
      _itemList[i] = i + d1 - 1;
    }
    offset = d2;
    _c.jumpTo(d2);
  }

  Future<double?> setValue() async {
    return offset;
  }

  void _carouSelCheck(double value, double pageValue) {
    if (_carouSelFlg) {
      _carouSelFlg = false;
      if (_c.position.pixels > _pixels) {
        _carouSelCount += 1.5;
      } else {
        _carouSelCount -= 1.5;
      }

      _c
          .animateTo((_carouSelCount * value * 2),
              duration: const Duration(milliseconds: 200), curve: Curves.easeIn)
          .then((value) => _carouSelFlg = true);
    }
    _pixels = _c.position.pixels;
  }

  @override
  Widget build(BuildContext context) {
    var value = MediaQuery.of(context).size.width / 2;
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView.builder'),
        centerTitle: true,
      ),
      body: Center(
        child: SizedBox(
          height: 200,
          child: ListView.builder(
            controller: _c,
            scrollDirection: Axis.horizontal,
            itemCount: _itemList.length,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(left: value / 2),
                height: value,
                width: value,
                color: _itemList[index].isOdd ? Colors.white : Colors.red,
                child: FutureBuilder(
                  future: setValue(),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if (snapshot.hasData) {
                      return TextButton.icon(
                        onPressed: () {},
                        icon: const Icon(Icons.add),
                        label: Text('${_itemList[index]}'),
                      );
                    } else {
                      return Container();
                    }
                  },
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Widget Size example...
_itemCount = 15 -> _displayCount = 12, _displayIndex = 11, _carouSelCount = 16.5
_itemCount = 10 -> _displayCount = 8, _displayIndex = 7, _carouSelCount = 10.5
_itemCount = 5 -> _displayCount = 4 _displayIndex = 3, _carouSelCount = 4.5

2022-08-20.0.39.26.mov