Horizontal scrollable container with repeating image as decoration

Question

I am trying to create a horizontal listView with a background that is repeating until the list ends.

Basically recycler view with a wrap_content with repeating background

This is my code now:

class _MyHomePageState extends State<MyHomePage> {
  double _offsetY = 0.0;
  late ScrollController _scrollController;

  _scrollListener() {
    setState(() {
      _offsetY = _scrollController.offset;
    });
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/town_background.jpg'),
            fit: BoxFit.fitHeight,
            repeat: ImageRepeat.repeatX,
            alignment: FractionalOffset((_offsetY / 1000), 0),
          ),
        ),
        child: Flex(direction: Axis.horizontal, children: [
          Flexible(
            child: ListView.separated(
              controller: _scrollController,
              itemCount: 40,
              separatorBuilder: (_, __) => const Divider(
                indent: 30,
              ),
              itemBuilder: (_, index) => const Icon(Icons.person, size: 50),
              scrollDirection: Axis.horizontal,
            ),
          ),
        ]),
      ),
    );
  }
} 

Listview scrolls with the background but it never repeats.

*alignment offset is for parallax effect.

Answer 1

try:

    repeat: ImageRepeat.repeat,
or try :
    Positioned.fill(child:
     Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/town_background.jpg'),
            fit: BoxFit.fitHeight,
            repeat: ImageRepeat.repeatX,
            alignment: FractionalOffset((_offsetY / 1000), 0),
          ),
        ),
        child: Flex(direction: Axis.horizontal, children: [
          Flexible(
            child: ListView.separated(
              controller: _scrollController,
              itemCount: 40,
              separatorBuilder: (_, __) => const Divider(
                indent: 30,
              ),
              itemBuilder: (_, index) => const Icon(Icons.person, size: 50),
              scrollDirection: Axis.horizontal,
            ),
          ),
        ]),
      ),)