Flutter All Image Resize Modes - Easy Example

Image resizing means scale image size up and down to fit in root. In flutter there are 7 different image resize options available. To set image resizing properties in flutter on image we will use fit property.

Flutter All Image Resize Modes

1. Set image resize mode Contain using BoxFit.contain.

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.contain,
      ),
    )

Screenshot:

2. Set image resize mode Cover using BoxFit.cover .

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.cover,
      ),
    )

Screenshot:

3. Set image resize mode fill.

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.fill,
      ),
    )

Screenshot:

4. Set image resize mode fitHeight.

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.fitHeight,
      ),
    )

Screenshot:

5. Set image resize mode fitWidth.

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.fitWidth,
      ),
    )

Screenshot:

6. Set image resize mode none.

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.none,
      ),
    )

Screenshot:

7. Set image resize mode scaleDown.

Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.scaleDown,
      ),
    )

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/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @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.red, width: 4),
      ),
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.scaleDown,
      ),
    )))));
  }
}