Flutter Select Pick Image From Camera Gallery Android iOS Tutorial

Image Picker is one of the most usable functionality used in dynamic android iOS applications. Using the Image Picker we can capture image from mobile phone camera and display in Image widget. We can also select image from mobile phone local storage gallery and display the selected image in Image widget. We are using image_picker named flutter package plugin in tutorial. So in this tutorial we would Flutter Select Pick Image From Camera Gallery Android iOS Tutorial Example. The image_picker library supports all the versions of Flutter project but i personally suggest you to use it with your latest flutter version.

Important Note: I am using iOS simulator in current tutorial. In iOS simulator we cannot use the Camera. So i suggest you to test this in real iOS device to use camera. In Android it works fine.

Thing we are doing in this tutorial:

  • Capturing image from both Android and iOS mobile devices camera and display inside Image Widget.
  • Selecting image from mobile phone local storage Gallery and show inside Image widget.

Contents in this project Flutter Select Pick Image From Camera Gallery Android iOS Tutorial Example:

1. Install and Configure Image Picker Package Plugin in Flutter Project:

1. We need to install the Image Picker library in our current project. To install the Image picker library we need to make some changes in pubspec.yaml file. This file contain all the major project version configuration for your flutter project. So goto your flutter project folder and open pubspec.yaml file in any code editor.

2. Open the pubspec.yaml file in code editor and put image_picker: ^0.6.1+10 after dependencies block and Save the file.

Complete Source code for my pubspec.yaml file:

3. After done saving the file we have to locate our Flutter Project root folder in Command Prompt or Terminal and execute flutter pub get command. This command would download the newly added image picker library to our project. This step is most important.

Here you go now the Image picker library is successfully installed in your flutter project.

2. Configure Project for Android Devices:

  • There is nothing to configure for Android devices. All we have to do is follow the 1st step and install the library and we are good to go for Android project.

3. Configure Project for iOS Devices:

1. We have to add Camera and Gallery access Permissions in our iOS flutter project’s info.plist file. So Goto Your_Flutter_Project -> ios -> Runner.xcodeproj file in Xcode.

2. Select the Info.plist file from left side panel below Runner project.

3. After selecting the file our Info.plist file will be open in Xcode screen. Now we have to Click on the + Plus button present in front of Information Property List.

4. Select Privacy – Camera Usages Description permission from the given list like i did in below screenshot.

5. Select Privacy – Photo Library Usages permission again from given list.

6. Now again we have to select Privacy – Microphone Usages permission in given list.

7. After selecting all 3 permissions we have to add some text in front of our permissions, So in the future we will know what are the usages of all these permissions. See the below screenshot to see what text i am adding.

Here you now the Flutter iOS project is ready to use 🙂 .

4. Start Coding for Flutter App:

1. Open your flutter project’s main.dart file and import material.dart, image_picker.dart and dart:io package.

2. Create void main runApp() method and call our main Root MyApp class here.

3. Create our main Root class named as MyApp extends with State less widget. We are calling MyImagePicker() class here.

4. Create a class named as MyImagePicker extends with State full widget. In this class we would make a class named as MyImagePickerState along with createState() method. This method will enable the mutable state management in given class.

5. Create our main class named as MyImagePickerState extends with State.

6. Create a File variable named as imageURI. The file system is used to hold the Image path in MyImagePickerState class.

7. Create a Future ASYNC function named as getImageFromCamera() in MyImagePickerState class. We would call this function on button click. Using this function we would open the Android and iOS device camera. After done capturing the file we would store the file path in imageURI using State.

8. Create another Future ASYNC function named as getImageFromGallery() in our MyImagePickerState class.

9. Create 1 Image widget and 2 Raised Button Widget in widget build area of MyImagePickerState class. We would show the selected image in Image widget.

10. Complete source code for main.dart file:

Screenshot in Android Device:

Flutter Select Pick Image From Camera Gallery Android iOS TutorialScreenshot in iOS Device:

Leave a Reply

Your email address will not be published. Required fields are marked *