Jun

Flutter Image Picker

Flutter Image Picker:

In this tutorial we are going to study Flutter Image Picker means picking an image from your device library OR taken a photo from your mobile camera and saving it into your gallery or picking camera image or taking the video from your device library.

Implementing Flutter Image Picker in your app:

Follow the below steps to implement Image Picker functionality in the Flutter app.

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
image_picker: ^0.6.0+9

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter pub get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:image_picker/image_picker.dart';

For IOS Add the following keys to your Info.plist file:

NSPhotoLibraryUsageDescription – this key value describes why your app needs permission for the photo library.
NSCameraUsageDescription – this key value describes the need for camera access.
NSMicrophoneUsageDescription – this key value describes the need for microphone access to your app.

For Android :

No need to do anything

Preview the Image:

Use the below code to preview the selected image. some times we need to view the image for its proper view for this purpose we need a preview.

Widget _previewImage() {
final Text retrieveError = _getRetrieveErrorWidget();
if (retrieveError != null) {
return retrieveError;
}
if (_imageFile != null) {
return Image.file(_imageFile);
} else if (_pickImageError != null) {
return Text(
'Pick image error: $_pickImageError',
textAlign: TextAlign.center,
);
} else {
return const Text(
'You have not yet picked an image.',
textAlign: TextAlign.center,
);
}
}

To pick the image from the gallery we need button by clicking on that we are navigating to the device image gallery. to create a button to pick an image from the gallery use the below code.

Padding(
padding: const EdgeInsets.only(top: 16.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {
isVideo = true;
_onImageButtonPressed(ImageSource.gallery);
},
heroTag: 'video0',
tooltip: 'Pick Video from gallery',
child: const Icon(Icons.video_library),
),
),

Similarly, if we want to take a photo from the camera instead of picking it from your gallery then you need to navigate to the camera. to navigate to a camera we need a button for the camera navigation. use the below code to create a camera navigation button as shown below.

Padding(
padding: const EdgeInsets.only(top: 16.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {
isVideo = true;
_onImageButtonPressed(ImageSource.camera);
},
heroTag: 'video1',
tooltip: 'Take a Video',
child: const Icon(Icons.videocam),
),
),

Complete Example code for Flutter Image Picker:

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:video_player/video_player.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Picker Demo',
home: MyHomePage(title: 'Image Picker Example'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
File _imageFile;
dynamic _pickImageError;
bool isVideo = false;
VideoPlayerController _controller;
String _retrieveDataError;

void _onImageButtonPressed(ImageSource source) async {
if (_controller != null) {
_controller.setVolume(0.0);
_controller.removeListener(_onVideoControllerUpdate);
}
if (isVideo) {
ImagePicker.pickVideo(source: source).then((File file) {
if (file != null && mounted) {
setState(() {
_controller = VideoPlayerController.file(file)
..addListener(_onVideoControllerUpdate)
..setVolume(1.0)
..initialize()
..setLooping(true)
..play();
});
}
});
} else {
try {
_imageFile = await ImagePicker.pickImage(source: source);
} catch (e) {
_pickImageError = e;
}
setState(() {});
}
}

void _onVideoControllerUpdate() {
setState(() {});
}

@override
void deactivate() {
if (_controller != null) {
_controller.setVolume(0.0);
_controller.removeListener(_onVideoControllerUpdate);
}
super.deactivate();
}

@override
void dispose() {
if (_controller != null) {
_controller.dispose();
}
super.dispose();
}

Widget _previewVideo(VideoPlayerController controller) {
final Text retrieveError = _getRetrieveErrorWidget();
if (retrieveError != null) {
return retrieveError;
}
if (controller == null) {
return const Text(
'You have not yet picked a video',
textAlign: TextAlign.center,
);
} else if (controller.value.initialized) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: AspectRatioVideo(controller),
);
} else {
return const Text(
'Error Loading Video',
textAlign: TextAlign.center,
);
}
}

Future retrieveLostData() async {
final LostDataResponse response = await ImagePicker.retrieveLostData();
if (response.isEmpty) {
return;
}
if (response.file != null) {
setState(() {
if (response.type == RetrieveType.video) {
isVideo = true;
_controller = VideoPlayerController.file(response.file)
..addListener(_onVideoControllerUpdate)
..setVolume(1.0)
..initialize()
..setLooping(true)
..play();
} else {
isVideo = false;
_imageFile = response.file;
}
});
} else {
_retrieveDataError = response.exception.code;
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Platform.isAndroid
? FutureBuilder(
future: retrieveLostData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return const Text(
'You have not yet picked an image.',
textAlign: TextAlign.center,
);
case ConnectionState.done:
return isVideo
? _previewVideo(_controller)
: _previewImage();
default:
if (snapshot.hasError) {
return Text(
'Pick image/video error: ${snapshot.error}}',
textAlign: TextAlign.center,
);
} else {
return const Text(
'You have not yet picked an image.',
textAlign: TextAlign.center,
);
}
}
},
)
: (isVideo ? _previewVideo(_controller) : _previewImage()),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () {
isVideo = false;
_onImageButtonPressed(ImageSource.gallery);
},
heroTag: 'image0',
tooltip: 'Pick Image from gallery',
child: const Icon(Icons.photo_library),
),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: FloatingActionButton(
onPressed: () {
isVideo = false;
_onImageButtonPressed(ImageSource.camera);
},
heroTag: 'image1',
tooltip: 'Take a Photo',
child: const Icon(Icons.camera_alt),
),
),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {
isVideo = true;
_onImageButtonPressed(ImageSource.gallery);
},
heroTag: 'video0',
tooltip: 'Pick Video from gallery',
child: const Icon(Icons.video_library),
),
),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {
isVideo = true;
_onImageButtonPressed(ImageSource.camera);
},
heroTag: 'video1',
tooltip: 'Take a Video',
child: const Icon(Icons.videocam),
),
),
],
),
);
}

Text _getRetrieveErrorWidget() {
if (_retrieveDataError != null) {
final Text result = Text(_retrieveDataError);
_retrieveDataError = null;
return result;
}
return null;
}
}

class AspectRatioVideo extends StatefulWidget {
AspectRatioVideo(this.controller);

final VideoPlayerController controller;

@override
AspectRatioVideoState createState() => AspectRatioVideoState();
}

class AspectRatioVideoState extends State {
VideoPlayerController get controller => widget.controller;
bool initialized = false;

void _onVideoControllerUpdate() {
if (!mounted) {
return;
}
if (initialized != controller.value.initialized) {
initialized = controller.value.initialized;
setState(() {});
}
}

@override
void initState() {
super.initState();
controller.addListener(_onVideoControllerUpdate);
}

@override
Widget build(BuildContext context) {
if (initialized) {
return Center(
child: AspectRatio(
aspectRatio: controller.value?.aspectRatio,
child: VideoPlayer(controller),
),
);
} else {
return Container();
}
}
}

Congratulations You Have Learned Flutter Image Picker….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext