Context: I’m trying to build an infinite horizontal carousel and its looking good, except that i keep running into the following error:

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#367fd OVERFLOWING:
creator: Row ← Transform ← Padding ← ClipPath ← DecoratedBox ← ConstrainedBox ← Container ←
_SingleChildViewport ← IgnorePointer-[GlobalKey#f9702] ← Semantics ← Listener ← _GestureSemantics
← ⋯
parentData: (can use size)
constraints: BoxConstraints(w=392.7, h=60.0)
size: Size(392.7, 60.0)
direction: horizontal
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down

I can’t use clipRect/listView as it would shrink the widgets to the available space, causing the infinite scroll to not work. Is there another way i can get rid of this error? Thank you!

main.dart:

import 'package:endless_carousel/endless_scrolling_widget.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({required this.title, super.key});
  final List<Widget> textList = const [
    CardWidget(
      text: "Flutter",
    ),
    CardWidget(
      text: "JSX",
    ),
    CardWidget(
      text: "Dart",
    ),
    CardWidget(
      text: "programming",
    ),
    CardWidget(
      text: "CI/CD",
    ),
    CardWidget(
      text: "Content Creation",
    ),
    CardWidget(
      text: "Flutter",
    ),
    CardWidget(
      text: "JSX",
    ),
    CardWidget(
      text: "Dart",
    ),
    CardWidget(
      text: "programming",
    ),
    CardWidget(
      text: "CI/CD",
    ),
    CardWidget(
      text: "Content Creation",
    ), // must duplicate the widgets so that the infinite scroll can loop smoothly
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 57, 48, 48),
      body: Center(
        child: EndlessScrollingWidget(
            widgetHeight: 60,
            scrollDuration: const Duration(seconds: 11),
            widgetWidth: 150,
            children: textList),
      ),
    );
  }
}

endless_scrolling_widget.dart:

import 'package:flutter/material.dart';

class EndlessScrollingWidget extends StatefulWidget {
  final int widgetWidth;
  final List<Widget> children;
  final Duration scrollDuration;
  final int widgetHeight;
  const EndlessScrollingWidget(
      {super.key,
      required this.widgetWidth,
      required this.children,
      required this.scrollDuration,
      required this.widgetHeight});

  @override
  State<EndlessScrollingWidget> createState() => _EndlessScrollingWidgetState();
}

// MediaQuery.of(context).size.width
class _EndlessScrollingWidgetState extends State<EndlessScrollingWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late final Animation<Offset> _animation = Tween<Offset>(
    begin: const Offset(0, 0),
    end: Offset(
        (-(widget.widgetWidth * widget.children.length) / 2 - 2.5*widget.children.length)
            .toDouble(), // assumes no gap, all widgets same width. if there is a gap/ margin between items, halve it and multiply by number of items. right to left = negative
        0), // 
  ).animate(_controller);
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: widget.scrollDuration)
          ..repeat()
          ..addListener(() {
            setState(() {});
          });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        clipBehavior: Clip.hardEdge, // prevents overflow out of width
        decoration: const BoxDecoration(),
        width: MediaQuery.of(context).size.width,
        height: (widget.widgetHeight).toDouble(),
        child: Transform.translate(
          offset: _animation.value,
          child: Row(
            children: widget.children,
          ),
        ),
      ),
    );
  }
}

class CardWidget extends StatelessWidget {
  final String text;
  const CardWidget({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(right:5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
      ),
      width: 150,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          text,
        ),
      ),
    );
  }
}

tried listview and cliprect like the error print suggested, but those constrain the overflow width