Episode 4: Image Picker

Season 3: Useful Packages

Part 1: Setting Up

The first step in using the ImagePicker plugin is to add it to your Flutter project. Open your pubspec.yaml file and add the following line under dependencies:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4+4

After adding this, run flutter pub get in your terminal to install the plugin and its dependencies. This will ensure you have the latest version of the ImagePicker plugin ready to use in your project.

Part 2: Importing the Plugin

Now that the plugin is added, let's import it into our Dart file. Add the following import statement at the top of your Dart file:

import 'package:image_picker/image_picker.dart';

This import statement allows us to access the ImagePicker functionalities in our code.

Part 3: Picking an Image from the Gallery

Let's start with the fun part! We'll create a function to pick an image from the gallery. Here's how you can do it:

Future<void> _pickImageFromGallery() async {
  final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
  if (image != null) {
    setState(() {
      _image = image;
    });
  }
}

This function utilizes the ImagePicker to open the gallery, allowing the user to select an image. If an image is selected, it updates the _image variable and triggers a UI update using setState().

Part 4: Picking an Image from the Camera

Next, let's write a similar function to pick an image from the camera:

Future<void> _pickImageFromCamera() async {
  final XFile? image = await _picker.pickImage(source: ImageSource.camera);
  if (image != null) {
    setState(() {
      _image = image;
    });
  }
}

This function opens the device's camera, allowing the user to capture a new image. Like before, it updates the _image variable if an image is captured.

Part 5: Displaying the Image

After picking an image, we need to display it in our app. We'll use a widget to achieve this:

XFile? _image;
final ImagePicker _picker = ImagePicker();

Widget _displayImage() {
  return _image == null
      ? Text('No image selected.')
      : Image.file(File(_image!.path));
}

The _displayImage() function checks if an image is selected. If not, it displays a message. If an image is selected, it displays the image using the Image.file() widget.

Part 6: Putting It All Together

Finally, let's assemble everything into a cohesive user interface:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Image Picker Example'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _displayImage(),
          ElevatedButton(
            onPressed: _pickImageFromGallery,
            child: Text('Pick from Gallery'),
          ),
          ElevatedButton(
            onPressed: _pickImageFromCamera,
            child: Text('Pick from Camera'),
          ),
        ],
      ),
    ),
  );
}

This UI displays the selected image (or a message if no image is selected) and provides buttons to pick images from the gallery and camera.

Conclusion

And there you have it! You've successfully learned how to integrate the ImagePicker plugin into your Flutter app. With this knowledge, you can easily allow users to pick images from their device's gallery or camera and display them in your app.

We hope you found this tutorial helpful! If you have any questions or suggestions, please leave them in the comments below. Don't forget to like, share, and subscribe for more Flutter content. Happy coding!