Flutter image picker resize

Flutter Image Picker with Resize Capability

Overview

Flutter Image Picker is a powerful plugin that allows you to capture images from the device camera or load images from the device gallery. However, it does not provide built-in image resizing capabilities. But don’t worry, you can easily achieve image resizing with the help of additional libraries available in the Flutter ecosystem.

Example

Let’s go through an example of how you can use the Flutter Image Picker along with an image resizing library called “flutter_image_compress”.

1. Step 1: Add the required dependencies to your Flutter project’s pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.3+2
  flutter_image_compress: ^1.0.2
    

2. Step 2: Run flutter pub get to fetch the newly added dependencies.
3. Step 3: Import the required libraries in your Dart file:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';
    

4. Step 4: Create a function to pick an image from the gallery or capture it using the camera:

Future pickImage() async {
  final ImagePicker _picker = ImagePicker();
  
  final XFile? image = await _picker.pickImage(source: ImageSource.gallery); // or ImageSource.camera for camera capture
  
  if (image == null) return null; // No image selected/captured
  
  final File compressedImage = await FlutterImageCompress.compressAndGetFile(
    image.path,
    image.path, // Replace this with desired file path to save the resized image
    quality: 50, // Adjust the quality as per your requirement
    minWidth: 800, // Minimum width of the resized image
    minHeight: 600, // Minimum height of the resized image
  );
  
  return compressedImage;
}
    

5. Step 5: Call the function to pick the image and resize it:

void _handleButtonClick() async {
  final File? resizedImage = await pickImage();
  
  if (resizedImage != null) {
    // Do something with the resized image file
    // e.g., display it in an Image widget
    setState(() {
      _selectedImage = resizedImage;
    });
  }
}
    

6. Step 6: Display the selected/resized image:

Widget build(BuildContext context) {
  return Center(
    child: Column(
      children: [
        ElevatedButton(
          onPressed: _handleButtonClick,
          child: Text('Pick Image'),
        ),
        SizedBox(height: 16),
        _selectedImage != null
            ? Image.file(_selectedImage!)
            : Text('No image selected'),
      ],
    ),
  );
}
    

By following these steps, you can successfully pick an image using the Flutter Image Picker plugin and resize it using the “flutter_image_compress” library. Adjust the parameters in the compressAndGetFile() method to fit your specific resizing needs.

Note: Always remember to handle file permission requests and make necessary permissions requests in your Flutter app.