infinite+carouSel function_3

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> with ChangeNotifier {
  final ScrollController _c = ScrollController();
  final List<int> _itemList = [];
  var _carouSelFlg = true;
  var _carouSelCount = 0.0;
  var _displayCount = 0.0;
  final _itemCount = 10;
  final _count = 0.375;
  var _itemData = 0.0;
  var _pixels = 0.0;
  var displayTextValue = 0.0;
  @override
  void initState() {
    super.initState();
    for (var i = 0; i < _itemCount; i++) {
      _itemList.add(i);
    }

    _itemData = _itemList.length > 5
        ? _itemList[_itemList.length - 5] * _count
        : _itemList[_itemList.length - 4] * _count;

    _displayCount = _itemList[_itemList.length - 6].toDouble();
    _c.addListener(() {
      setState(() {
        var width = MediaQuery.of(context).size.width / 2;
        var value = (MediaQuery.of(context).size.width - width);
        _carouSelCheck(value);
      });
    });
  }

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

  void _carouSelCheck(double value) {
    if (_carouSelFlg) {
      _carouSelFlg = false;
      if (_c.position.pixels > _pixels) {
        if (_carouSelCount + _count == _itemData) {
          _carouSelCount = 0;
          displayTextValue += _displayCount;
          _infinityAnimation(
            displayTextValue.toInt(),
            0,
          );
        }
        _carouSelCount += _count;
      } else {
        if (_carouSelCount == 0) {
          _carouSelCount = _displayCount * _count;
          displayTextValue -= _displayCount;
          _infinityAnimation(
            displayTextValue.toInt(),
            value * _carouSelCount,
          );
        }
        _carouSelCount -= _count;
      }

      ///　Numbers are broken sometimes
      if (_carouSelCount == -1.1102230246251565e-16) {
        _carouSelCount = 0;
      }
      _c
          .animateTo((_carouSelCount * value),
              duration: const Duration(milliseconds: 200), curve: Curves.easeIn)
          .then((value) => _carouSelFlg = true);
    }
  }

  @override
  Widget build(BuildContext context) {
    var value = MediaQuery.of(context).size.width / 8;
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView.builder'),
        centerTitle: true,
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.only(
            left: 16,
            right: 16,
          ),
          height: 200,
          child: NotificationListener(
            onNotification: (notificationInfo) {
              if (notificationInfo is ScrollUpdateNotification) {
                _pixels = notificationInfo.metrics.pixels;
              } else if (notificationInfo is OverscrollNotification) {
                _carouSelCount = 0;
                _pixels = notificationInfo.metrics.extentInside;
                _c.notifyListeners();
              }
              return true;
            },
            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: index == 0 ? 0 : value / 2),
                  height: value,
                  width: value,
                  color: _itemList[index].isOdd ? Colors.white : Colors.red,
                  child: TextButton.icon(
                    onPressed: () {},
                    icon: const Icon(
                      Icons.add,
                      size: 9,
                    ),
                    label: Text(
                      '${_itemList[index]}',
                      style: const TextStyle(
                        fontSize: 12,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

Fixed issue

2022-08-21.4.50.53.mov

2022-08-23.1.40.33.mov