Skip to main content

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:
Flutter Image resize mode contain
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:
Flutter Set Image Resize mode cover
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:
Flutter Image resize mode fill parent
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:
Flutter set image resize mode fit height
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:
Flutter image resize mode fit width
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:
Flutter image resize mode none
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:
flutter image resize mode scale down
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,
      ),
    )))));
  }
}

Comments