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.
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.
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 ****assetsare usually placed around 45-46th lines in the code and need to be uncommented first by eliminating # and one space).
# 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:
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.
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. Otherwise, run the following command to clone the complete code to your system:
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 in your next project.
PhotoEditor SDK is available for various frameworks: first, read this article from the official documentation to set up dependencies for your Flutter-based project. In case you encounter any difficulties with the installation process, don’t hesitate to contact our support 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.
