---
title: "How To Resize Images in Flutter"
description: "Keep it light: resize your application images in Flutter. "
url: "https://img.ly/blog/how-to-resize-images-in-flutter/"
type: "blog"
date: "2022-09-27"
author: "Natalia"
tags: ["How-To","Flutter","Photo Editing","App Development","Framework","Tutorial"]
---

> This is the markdown version of [How To Resize Images in Flutter](https://img.ly/blog/how-to-resize-images-in-flutter/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

Static images are a core part of mobile applications. Usually, you store them in the directory in their original sizes, which requires you to adjust the sizes now and then, depending on where they are displayed. This article discusses how to resize images in Flutter and adjust their width, height, and size with efficient lines of code.

<video src="https://storage.googleapis.com/imgly-static-assets/static/blog/videos/flutter-resize-images.mp4" controls muted loop playsinline></video>

### Resizing Methods

For image editing tools, Flutter offers an excellent and easy-in-use `Boxfit` property that works within the `fit` parameter, and you can easily integrate it into your application.

```dart
child: Image.asset( 'images/pexels.jpg', fit: BoxFit.cover)
```

Depending on your needs, you can choose between multiple attributes. For example, `.cover` and `.fitHeight` properties are similar when called, and both result in maximum frame coverage. Yet, although the image is widened proportionally, these methods can significantly affect the quality of crop image borders if they overfill. On the contrary, with `.fitWidth` or `.scaledown`, the asset is resized to the container's width boundaries, which could be helpful when multiple images are needed to be displayed simultaneously.  If you are dealing with a static image of small size, you can also employ `.fill` attribute that helps stretch your assets without cropping any critical information.

Alternatively, by calling  .scale 0.5 the fit parameter will return you a graphical asset based on the scale you define. Note that any value less than 1 would reduce the image size.

### Adjusting Image Size with Flutter

Now, let’s look at how Flutter allows applying these image manipulation techniques. The crucial difference from the other frameworks is that in Flutter, images should be stored in a specific folder. In other words, once you upload graphic files, go to the `pubspec.yaml` file and add the path to the directory around under `assets`(**Note:** by default the dependencies corresponding to \*\*\*\*`assets`are usually placed around 45-46th lines in the code and need to be uncommented first by eliminating # and one space).

```yaml
# Don't forget to define the assets folder in your directory
# To do so, find lines 45 - 46 in the **pubspec.yaml** file
# and uncomment the assets section like this:
assets:
  - images/ #Note that this should correspond to the name of your folder
```

Alternatively, you can specify the path to each image in the list:

```yaml
assets:
  - assets/images/your_image.jpg
  - assets/images/your_image2.jpg
```

When the image is uploaded to Flutter, it seeks to occupy as much size as possible. But let’s presume that we have a “frame” or container that differs in size from the visual asset. One way to see the differences in sizes of both canvases is to color one frame, like color: Colors.indigo. Then we provide Flutter with the size specification and render our image in a child node child: Image.asset('images/pexels.jpg'). Thus, now we can see the image is placed inside the frame, and we need only to assign one of the filling methods (for example, fit: BoxFit.cover) discussed above.

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const ImgApp());
}

class ImgApp extends StatelessWidget {
  const ImgApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const ResizePage(),
    );
  }
}

class ResizePage extends StatelessWidget {
  const ResizePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('How to Resize Images'),
          backgroundColor: Color(0xffe55586),
        ),

        body: Center(
            // Enabling the Image Frame
            child: Container(
                color: Colors.indigo, // To see the difference between the image's original size and the frame
                height: 550,
                width: 300,

                // Uploading the Image from Assets
                child: Image.asset(
                  'images/pexels.jpg',

                  // Resizing the Image to the Frame Size
                  fit: BoxFit.cover,
                ))));
  }
}
```

You can find the associated to this tutorial Git repository ― [here](https://github.com/nataliakzm/Resizing_Images_with_Flutter). Otherwise, run the following command to clone the complete code to your system:

```bash
git clone <https://github.com/nataliakzm/Resizing_Images_with_Flutter>
```

### Conclusion

This article covered Flutter’s approach to the image resizing problem and saw how to use it in practice. However, despite the diversity of suggested methods that could fulfill basic users’ needs, Flutter fails to provide a comfortable integration. Just imagine you are building an app similar to Instagram in its functionality and you need not only upload various images from different assets but also resize them differently. If you want to avoid spending your time writing and maintaining a ton of code, then you may consider using [PhotoEditor SDK](https://img.ly/products/photo-sdk.md) in your next project.

<video src="https://storage.googleapis.com/imgly-static-assets/static/blog/videos/photoeditor-sdk-resize-image.mp4" controls muted loop playsinline></video>

PhotoEditor SDK is available for various frameworks: first, read [this article](https://img.ly/docs/pesdk/flutter/getting-started/integration/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) from [the official documentation](https://img.ly/docs/pesdk/guides/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) to set up dependencies for your Flutter-based project. You can also follow our guide on how to integrate [video editor for Flutter](https://img.ly/blog/a-modern-video-editor-sdk-for-your-flutter-app.md) into your app.

In case you encounter any difficulties with the installation process, don’t hesitate to contact our [support](https://img.ly/support.md) who will be happy to help you.  Then, as shown in the example below, you can efficiently resize, crop, rotate or flip your visual assets with the [transform tool](https://img.ly/docs/pesdk/web/features/transform/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos).

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.