Gallery Access in Flutter
We can add images from the gallery using the image_picker package in Flutter. For this, you’ll need to use your real device.
Follow the below steps to display the images from the gallery:
Step 1: Create a new flutter application:
flutter create <YOUR_APP_NAME>
Step 2: Now, delete the code from the main.dart file to add your own code.
Step 3: Add the dependency to your pubspec.yaml file:
Step 4: Use the below code in the main.dart file :
main.dart
Dart
import 'dart:io' ; import 'package:flutter/material.dart' ; import 'package:image_picker/image_picker.dart' ; void main() { runApp( new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new GalleryAccess(), debugShowCheckedModeBanner: false , ); } } class GalleryAccess extends StatefulWidget { @override State<StatefulWidget> createState() { return new GalleryAccessState(); } } class GalleryAccessState extends State<GalleryAccess> { File galleryFile; @override Widget build(BuildContext context) { //display image selected from gallery imageSelectorGallery() async { galleryFile = await ImagePicker.pickImage( source: ImageSource.gallery, // maxHeight: 50.0, // maxWidth: 50.0, ); setState(() {}); } return new Scaffold( appBar: new AppBar( title: new Text( 'Gallery Access' ), backgroundColor: Colors.green, actions: <Widget>[ Text("GFG",textScaleFactor: 3,) ], ), body: new Builder( builder: (BuildContext context) { return Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new RaisedButton( child: new Text( 'Select Image from Gallery' ), onPressed: imageSelectorGallery, ), SizedBox( height: 200.0, width: 300.0, child: galleryFile == null ? Center(child: new Text( 'Sorry nothing selected!!' )) : Center(child: new Image.file(galleryFile)), ) ], ), ); }, ), ); } } |
Output:
When no image is selected, it will result:
When the button is pressed, it will ask for accessing photos, media, and files on your device as shown below:
When the permission is given to access photos and any image is selected from the gallery, it will be displayed on the screen as shown below:
Explanation:
- import image_picker package in main.dart file.
- for a gallery image, we have async function imageSelectorGallery() and await for gallery image.
- the image will be displayed after loaded.
Please Login to comment...