Capture and Select Images in Flutter Using image_picker with GetX Controller Binding

The image_picker package is a great solution for allowing users to capture photos or choose images from their gallery in a Flutter app. In this guide, we’ll use image_picker in combination with GetX for state management to create an organized and responsive application.

Prerequisites

  1. Flutter SDK: Ensure Flutter is installed.
  2. GetX Package: Install get for state management.
  3. image_picker: Add the package to your pubspec.yaml file.
 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  image_picker: ^0.8.7+3

Run flutter pub get to install the packages.

Step 1: Setting up the Controller

We’ll create an ImagePickerController to handle picking images from the camera or gallery.

image_picker_controller.dart

 import 'package:get/get.dart';
 import 'package:image_picker/image_picker.dart';
 import 'dart:io';

 class ImagePickerController extends GetxController {
  final ImagePicker _picker = ImagePicker();
  var selectedImage = Rx(null);

  Future pickImageFromGallery() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      selectedImage.value = File(pickedFile.path);
    }
  }

  Future pickImageFromCamera() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.camera);
    if (pickedFile != null) {
      selectedImage.value = File(pickedFile.path);
    }
  }

  void clearImage() {
    selectedImage.value = null;
   }
 }

In this controller:

  • pickImageFromGallery: Picks an image from the gallery.
  • pickImageFromCamera: Captures an image using the camera.
  • clearImage: Resets the selected image.

Step 2: Setting up the View

The view will contain buttons to open the gallery or camera and display the selected image.

image_picker_view.dart

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'image_picker_controller.dart';

 class ImagePickerView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() {
              return controller.selectedImage.value == null
                  ? const Text("No image selected")
                  : Image.file(controller.selectedImage.value!);
            }),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                controller.pickImageFromGallery();
              },
              child: const Text("Pick Image from Gallery"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                controller.pickImageFromCamera();
              },
              child: const Text("Take Photo with Camera"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                controller.clearImage();
              },
              child: const Text("Clear Image"),
             ),
           ],
         ),
       ),
     );
   }
 }

In this view:

  • Obx Widget: Displays the image if it’s selected; otherwise, shows a default message.
  • Buttons: Allow users to pick an image from the gallery, take a photo, or clear the selected image.

Step 3: Setting up the Binding

To inject ImagePickerController into the view, we’ll create a binding.

image_picker_binding.dart

 import 'package:get/get.dart';
 import 'image_picker_controller.dart';

 class ImagePickerBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => ImagePickerController());
   }
 }

The binding ensures that ImagePickerController is initialized only when needed, optimizing resource usage.

Step 4: Running the App

Finally, update main.dart to configure the binding and routing.

main.dart

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'image_picker_view.dart';
 import 'image_picker_binding.dart';

 void main() {
  runApp(MyApp());
 }

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => ImagePickerView(),
          binding: ImagePickerBinding(),
        ),
      ],
      title: 'Image Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
     );
   }
 }

Wrapping Up

In this tutorial, we covered:

  1. Using the image_picker package to select images from the gallery or camera.
  2. GetX for state management with controller binding.
  3. A complete MVC structure, making your Flutter app well-organized and efficient.

Now, you have a fully functioning image picker feature in your Flutter app using image_picker and GetX for clean and maintainable code.