Flutter Repeat Image Example

Image widget in flutter has a property repeat. Repeat support 4 different types of repeat patterns in flutter. When we want to repeat a image in flutter it depends on 2 factors. First is we have to set it's resize mode as none. and pass the repeat value.

Flutter Repeat Image Example

1. Uploading a small 100*100 size image and then we are using this image in our test app.

2. Creating a string URL in our project and pass uploaded image URL,

final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE9dt8mGeUOG5I6zrHkW4usrQ4PE-cwTd7t_jKlqR8v2KiMJ5aLIPZBfGfYYZz6e_I9HMqGWUcWgjFzj13QKSEVq9ebWG_x0pGMgXKRGbE2t1BFCrQ9FXmPJnnvp8a0zdQwgsbfiNkNdZJB53IVYotqM8kH7DAxcvgLYZUhYW5CNCAxfzoVeYXmJkPCd6a/s100/heart-icon.png';

3. Defining a Root container with 300*300 width height. Then we are defining Image widget with ImageRepeat.repeat .

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
      ),
      child: Image.network(
        imageURL,
        width: 100,
        height: 100,
        fit: BoxFit.none,
        repeat: ImageRepeat.repeat,
      ),
    )

Screenshot:

2. Repeat image in X-Axis horizontal direction using ImageRepeat.repeatX .

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
      ),
      child: Image.network(
        imageURL,
        width: 100,
        height: 100,
        fit: BoxFit.none,
        repeat: ImageRepeat.repeatX,
      ),
    )

Screenshot:

3. Repeat image in Y-Direction Vertically using ImageRepeat.repeatY .

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
      ),
      child: Image.network(
        imageURL,
        width: 100,
        height: 100,
        fit: BoxFit.none,
        repeat: ImageRepeat.repeatY,
      ),
    )

Screenshot:

4. No repeat image using ImageRepeat.noRepeat .

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
      ),
      child: Image.network(
        imageURL,
        width: 100,
        height: 100,
        fit: BoxFit.none,
        repeat: ImageRepeat.noRepeat,
      ),
    )

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

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

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE9dt8mGeUOG5I6zrHkW4usrQ4PE-cwTd7t_jKlqR8v2KiMJ5aLIPZBfGfYYZz6e_I9HMqGWUcWgjFzj13QKSEVq9ebWG_x0pGMgXKRGbE2t1BFCrQ9FXmPJnnvp8a0zdQwgsbfiNkNdZJB53IVYotqM8kH7DAxcvgLYZUhYW5CNCAxfzoVeYXmJkPCd6a/s100/heart-icon.png';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
      ),
      child: Image.network(
        imageURL,
        width: 100,
        height: 100,
        fit: BoxFit.none,
        repeat: ImageRepeat.repeat,
      ),
    )))));
  }
}