Flutter

Using Device Images with Only 3️ Lines of Code in Flutter

Device Images 📸 are a Crucial Part of User Generated Content 🙎. Learn how to use them in your Flutter App 📱 with only 3 Lines of Code 👨🏻‍💻.

Device Images - Photo by Lilly Rum on Unsplash

Note: Find these Long Articles Boring ? You can check the same in a more Visual & Attractive format here.

A picture is worth a thousand words - Henrik Ibsen

Every Social Media App out there lets the User share Content, in the form of Images too. Learn how to use those Images in your Flutter App.

1) Get the Dependencies

Add the image_picker Dependency to your pubspec.yaml File.

image_picker: ^0.7.5

2) Import the Packages

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

We are using dart:io for File Handling.

3) Get the Permissions - Android

In the AndroidManifest.xml file, add the following Permission in the Application Tag. (Only for API 29+)

<application
    android:requestLegacyExternalStorage=”true”
    ...>
</application>

4) Get the Permissions — iOS

In the Info.plist file, specify the reasons why you need the Permissions to use the Gallery, Camera, and the Microphone respectively.

<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>I need Access to User's Gallery because...</string>
    <key>NSCameraUsageDescription</key>
    <string>I need Access to User's Camera because...</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>I need Access to User's Microphone because...</string>
    ...
  </dict>
</plist>

Make sure to put your own Specific Reasons to access the Device Features above.

5) Call the Function

The Image Picking Process will be triggered by a Function returning a Picked Image File. The function will take 3 main parameters -

• Image Source - It defines from where the Image will be picked, ImageSource.gallery or ImageSource.camera.
• Preferred Camera Device - The Camera to Click Pictures from. It can be CameraDevice.front or CameraDevice.rear. If the source is Gallery, it is simply ignored.
• Image Quality - It defines the Quality of the Image Picked. It is an int between 1–100; where 100 being the Original Quality of the Image and 1 the lowest.

For Example -

PickedFile pickedFile = await ImagePicker().getImage(
    source: ImageSource.camera,
    preferredCameraDevice: CameraDevice.front,
);

Points to Note -

• This function can be called from anywhere, Eeg — initState() or even a Button Press !
• We can also define the size of the image by giving maxWidth & maxHeight.

6) Convert to File Object

The Picked File Object must be converted to a File Object to use it.

File imageFile = File(pickedFile.path);

7) Use the Image

Finally, Create an Image Widget by the Image.file Constructor !

Image.file(imageFile)

Voilà ! You successfully learned how to use Device Images !

Bonus Tip - Videos

We can also fetch Videos the Same Way & use the video_player plugin to use them !

PickedFile pickedFile = await ImagePicker().getVideo(
    source: ImageSource.gallery,
    maxDuration: Duration(seconds: 15),
);

Do you want one on Videos also ? Tell me in the Comments Below !! I hope you liked this Article ! Signing off, FlutterFever.

FlutterFever is an Immersive Environment for High-Quality Flutter Tutorials, Resources, Tips & Tricks to Build, Deploy and Market Beautiful and Performant Flutter Apps Effortlessly. Find more about it here.