Image Picker in Flutter

Image Picker in Flutter

aseemwangoo No Comment
Flutter

Image is a poem without words..

Let’s begin…

  1. Start by adding image_picker package in pubspec.yaml

NOTE : Without specifying the version, you can always get the latest version…like this

Pubspec.yaml

Pubspec.yaml

2. Add import ‘package:image_picker/image_picker.dart’;

Before, step 3, let’s introduce :

Async and Await

An async function is a function whose body is marked with an async modifier.
When you call an async function, it immediately returns a Future; the body of the function is scheduled for execution later.

When the body has executed, the Future that was returned by the call is completed with the result.(regardless error or response).

Significance of Await…

Using await helps us to reduce boilerplate codes. General form of await :

await e (where e = unary expression)
e.g (await file.copy(newPath))

Still not understood? Try this link https://www.dartlang.org/articles/language/await-async

Await expressions evaluates e, suspends currently running function until the result is ready (or until future is completed). Result of await expression is the completion of future.

Important point : you can use await only inside the async function.

3. Use the image picker code as

Image Picker Code

Image Picker Code

ImageSource.gallery — — If the app doesn’t have the permission, then it automatically asks for the permission.

ImageSource.video — — If the app doesn’t have the permission, then it automatically asks for the permission.

ImageSource.camera— — If the app doesn’t have the permission, then it automatically asks for the permission.

and the above expressions returns File…

4. Some insight from the code (image_picker.dart),

static Future<File> pickImage({})

static Future<File> pickVideo({})

both returns the path of the file selected

Some screenshots of the app :

Image Picker App

Image Picker App

First button, selects image from gallery and displays…

Second button, takes image from the camera and displays…

Video demonstration :

For complete source code, visit

https://github.com/AseemWangoo/flutter_programs/blob/master/imagepicker.dart

P.S………………………

Leave a Reply