In this article we’ll take a look at implementing gallery picker in Flutter. In the ever-evolving world of mobile development, providing an intuitive user experience is crucial. One aspect of this is allowing users to access and select media files directly from their device’s gallery. In this blog post, we’ll delve into how to implement a media picker in a Flutter application. We’ll cover setting up dependencies, configuring both Android and iOS platforms, and crafting a seamless UI to handle media selection.

If you prefer watching a video tutorial on flutter gallery picker, here is a link to that.

Introducing the Gallery Picker Package

The foundation of our implementation hinges on the Gallery Picker package. This handy Flutter package simplifies the task of accessing the device’s gallery and managing permissions, making it an invaluable tool for developers aiming to incorporate media selection features into their apps.

The gallery_picker plugin can be accessed here.

Key Features of Gallery Picker:

• Image and Video Selection: Allows users to pick either images, videos, or both from their gallery.
• Permission Handling: Automates the process of requesting and checking necessary permissions to access media files.

To get started, add the Gallery Picker package to your pubspec.yaml file under dependencies. This action will incorporate all the functionality we need to access the media gallery.

Setting Up Your Environment

Android Configuration

For Android, adjustments within the AndroidManifest.xml are necessary to ensure the app has the required permissions to access media files:

1. Read External Storage Permission: This permission is crucial for reading media files stored on the device. Add the following line just before the <application> tag in your AndroidManifest.xml: <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
2. Handling Higher SDK Versions: If your app targets Android SDK versions above 33, additional configuration may be required to comply with new privacy policies introduced in recent Android versions.

iOS Configuration

For iOS, the setup involves modifying the Info.plist file:

1. Permissions: Similar to Android, you need to declare the purpose of accessing the user’s photo gallery. This is done by adding key-value pairs in the Info.plist that describe why the app requests this data. Typical keys include NSPhotoLibraryUsageDescription.

Both platforms require these permissions settings to ensure the app functions correctly and transparently requests access from the user.

Implementing Gallery Access in Flutter

With our environment configured, let’s dive into the code. We start by importing the Gallery Picker package and then move on to building the user interface.

Creating a FloatingActionButton

The UI component that users will interact with to open the gallery is a Floating Action Button (FAB). This button should be prominently placed and intuitive to use:

FloatingActionButton(
  onPressed: _selectImageFromGallery,
  child: Icon(Icons.image),
)

In the above snippet, _selectImageFromGallery is a function triggered when the FAB is pressed. This function will handle the logic for opening the gallery and selecting media.

Selecting Media from the Gallery

The _selectImageFromGallery function is where most of our logic resides. Here, we utilize the Gallery Picker’s pickMedia method:

void _selectImageFromGallery() async {
  final List<MediaFile>? mediaFiles = await GalleryPicker.pickMedia(
    context: context,
    allowMultiple: true,
  );
  if (mediaFiles != null) {
    setState(() {
      _selectedFiles = mediaFiles;
    });
  }
}

In this function:

• pickMedia is called with the current context and the allowMultiple parameter set to true, allowing users to select more than one file.
• The resulting list of media files is stored in a state variable _selectedFiles, which will be used to display the selected items.

Displaying the Selected Files

To display the selected media, we use a GridView.builder. This widget dynamically creates a grid of selected media files:

GridView.builder(
  itemCount: _selectedFiles.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, index) {
    final MediaFile file = _selectedFiles[index];
    return file.isImage ? Image.file(File(file.path)) : VideoFile(File(file.path));
  },
)

In this grid:

• Each cell checks if the current file is an image or a video and displays it accordingly.
• crossAxisCount determines the number of items per row, which we’ve set to two for simplicity.

Conclusion

Integrating a media gallery picker in your Flutter app enhances its functionality and user engagement by seamlessly accessing photos and videos. With the Gallery Picker package, most of the heavy lifting is managed for us, from handling permissions to fetching media files. By following the steps outlined, you can implement a robust media selection feature, ensuring your app remains competitive and user-friendly in the dynamic landscape of mobile apps. Stay tuned for more tips and tricks in the world of mobile development to keep your skills sharp and your applications cutting-edge.