Flutter make repeat image as pattern

Question

in flutter how can i fill image with pattern? for example i want to fill screen by this square image

my code doesn't work:

  Widget build(BuildContext context) {
    return Consumer<ThemeManager>(builder: (context, theme, child) {
      return Directionality(
        textDirection: TextDirection.rtl,
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: Stack(
            children: <Widget>[
              Image.asset('assets/images/sBoeM.jpg',repeat: ImageRepeat.repeat,),
            ],
          ),
        ),
      );
    });
  }

Answer 1

you need to wrap your Image widget with Positioned.fill widget

    Positioned.fill(
      child: Image.asset(
        'images/sBoeM.jpg',
        repeat: ImageRepeat.repeat,
      ),
    ),

Answer 2

Create a background from random images while maintaining its original proportions to fill the entire screen:

import 'dart:math';
import 'package:flutter/material.dart';

class RandomTiledBackground extends StatelessWidget {
  final List<String> tileAssetPaths;
  final double tileWidth;
  final double tileHeight;
  final List<Widget> stackChildren;

  const RandomTiledBackground({
    required this.tileAssetPaths,
    required this.tileWidth,
    required this.tileHeight,
    this.stackChildren = const [],
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final int columnCount = (constraints.maxWidth / tileWidth).ceil();
        final int rowCount = (constraints.maxHeight / tileHeight).ceil();

        return Stack(
          children: [
            ...List.generate(
              rowCount * columnCount,
              (int index) {
                final int row = index ~/ columnCount;
                final int col = index % columnCount;

                return Positioned(
                  left: col * tileWidth,
                  top: row * tileHeight,
                  width: tileWidth,
                  height: tileHeight,
                  child: Image.asset(
                    tileAssetPaths[Random().nextInt(tileAssetPaths.length)],
                    fit: BoxFit.cover,
                  ),
                );
              },
            ),
            ...stackChildren,
          ],
        );
      },
    );
  }
}

How to use:

RandomTiledBackground(
   tileHeight: 224,
   tileWidth: 224,
   tileAssetPaths: [
     'assets/images/forest_1.png',
     'assets/images/forest_2.png',
     'assets/images/forest_3.png',
     'assets/images/forest_4.png',
   ],
   stackChildren: [
      Positioned(
         top: 20,
         left: 20,
            child: PositionWidget(),
          ),
        ],
      );

Result: