Hello everyone In this blog, we will learn and implement new things in flutter. Here we will learn how to use an ImagePicker in a flutter with a camera and gallery functionality. In this blog, we will share the easiest and best way to implement an ImagePicker in flutter using a plugin.
As we all know flutter uses both Android and iOS. So we need to integrate it with both platforms.
ImagePicker in flutter is basically used for picking an image from the gallery or maybe from the camera. So that we can use it accordingly.
Check exciting flutter app development services from Mobikul.
So let’s start to implement the ImagePicker. So just follow these steps and make it. Let’s open your project if you have otherwise created a new flutter project.
Step1: Add the image_picker dependency to pubspec.yaml file.
Step2: Run “flutter pub get” in the root directory of your app.
|
1 |
image_picker: ^0.8.4+9 |
Therefore In order to check the updated version of the dependency click here.
Step3: We just need to set request Legacy External Storage to true Android > app > src > main >AndroidManifest.xml for Android setup.
|
1 |
android:requestLegacyExternalStorage="true" |
Step4: Add the following keys to your Info.plist file, located in
Project > ios > Runner > Info.plist
|
1 2 3 |
<key>NSPhotoLibraryUsageDescription</key> <key>NSCameraUsageDescription</key> <key>NSMicrophoneUsageDescription</key> |
Step5: Now start the coding for the same.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import 'dart:io'; import 'package:image_picker/image_picker.dart'; import 'package:flutter/material.dart'; class MyPicker extends StatefulWidget { const MyPicker({Key? key}) : super(key: key); @override _MyPickrState createState() => _MyPickrState(); } class _MyPickrState extends State<MyPicker> { File? imageFile; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Image Picker"), ), body: imageFile == null ? Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Container( height: 150, width: 200, child: Image.network( 'https://www.lifewire.com/thmb/P856-0hi4lmA2xinYWyaEpRIckw=/1920x1326/filters:no_u' 'pscale():max_bytes(150000):strip_icc()/cloud-upload-a30f385a928e44e199a62210d578375a.jpg')), ), Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: RaisedButton( onPressed: () { imageFromGallery(); }, child: Text("GALLERY"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: RaisedButton( onPressed: () { imageFromCamera(); }, child: Text("CAMERA"), ), ) ], ), ) ], ), ) : Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Text( "Your Uploaded Image", style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20), ), ), Container( height: 200, width: 200, child: Image.file( imageFile!, fit: BoxFit.cover, ), ), ], ))); } imageFromGallery() async { PickedFile? pickedFile = await ImagePicker() .getImage(source: ImageSource.gallery, maxHeight: 200, maxWidth: 200); if (pickedFile != null) { setState(() { imageFile = File(pickedFile.path); }); } } imageFromCamera() async { PickedFile? pickedFile = await ImagePicker() .getImage(source: ImageSource.camera, maxHeight: 200, maxWidth: 200); if (pickedFile != null) { setState(() { imageFile = File(pickedFile.path); }); } } } |
Finally, we can run the code and as a result, we can see the below output.
Conclusion
Congratulations!! You have learned how to use ImagePicker in a flutter.
For more detail, you can refer to the official doc of a flutter here.
For more interesting blogs check out here – https://mobikul.com/blog/
Thanks for reading!!.