Gallery Access and Camera in Flutter (original) (raw)

Last Updated : 15 Jul, 2025

We can add images from the gallery using the **image_picker package in Flutter. For this, you'll need to use your real device.

Step 1: Create a new flutter application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the **pubspec.yaml file, add **image_picker as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart `

dependencies: flutter: sdk: flutter image_picker: ^1.1.2

`

Now run the below command in the terminal.

flutter pub get

Step 3: Importing the Dependency

Use the below line of code in the **main.dart file, to import the **image_picker dependency:

import 'package:image_picker/image_picker.dart';

**Step 4: Completing the Final Application Code

**- Create a button

To show the type of picker ( gallery or camera).

Dart `

ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white ), child: const Text('Select Image from Gallery and Camera'), onPressed: () { _showPicker(context: context); }, ),

`

**- Show picker

Show both picker options like gallery and camera, and call getImage() respective to the type of picker mentioned below.

void _showPicker({ required BuildContext context, }) { showModalBottomSheet( context: context, builder: (BuildContext context) { return SafeArea( child: Wrap( children: [ ListTile( leading: const Icon(Icons.photo_library), title: const Text('Photo Library'), onTap: () { getImage(ImageSource.gallery); Navigator.of(context).pop(); }, ), ListTile( leading: const Icon(Icons.photo_camera), title: const Text('Camera'), onTap: () { getImage(ImageSource.camera); Navigator.of(context).pop(); }, ), ], ), ); }, ); }

`

**Complete Source code

**main.dart:

Dart `

import 'dart:io';

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

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

class MyApp extends StatelessWidget { const MyApp({super.key});

@override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primaryColor: Colors.green), home: const GalleryAccess(), debugShowCheckedModeBanner: false, ); } }

class GalleryAccess extends StatefulWidget { const GalleryAccess({super.key});

@override State createState() => _GalleryAccessState(); }

class _GalleryAccessState extends State { File? galleryFile; final picker = ImagePicker(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gallery Access and Camera'), backgroundColor: Colors.green, foregroundColor: Colors.white, actions: const [ Text( "GFG", textScaleFactor: 3, style: TextStyle(color: Colors.white), ), ], ), body: Builder( builder: (BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white), child: const Text('Select Image from Gallery and Camera'), onPressed: () { _showPicker(context: context); }, ), const SizedBox( height: 20, ), SizedBox( height: 200.0, width: 300.0, child: galleryFile == null ? const Center(child: Text('Sorry nothing selected!!')) : Center(child: Image.file(galleryFile!)), ), ], ), ); }, ), ); }

void _showPicker({ required BuildContext context, }) { showModalBottomSheet( context: context, builder: (BuildContext context) { return SafeArea( child: Wrap( children: [ ListTile( leading: const Icon(Icons.photo_library), title: const Text('Photo Library'), onTap: () { getImage(ImageSource.gallery); Navigator.of(context).pop(); }, ), ListTile( leading: const Icon(Icons.photo_camera), title: const Text('Camera'), onTap: () { getImage(ImageSource.camera); Navigator.of(context).pop(); }, ), ], ), ); }, ); }

Future getImage( ImageSource img, ) async { // pick image from gallary final pickedFile = await picker.pickImage(source: img); // store it in a valid variable XFile? xfilePick = pickedFile; setState( () { if (xfilePick != null) { // store that in global variable galleryFile in the form of File galleryFile = File(pickedFile!.path); } else { ScaffoldMessenger.of(context).showSnackBar(// is this context <<< const SnackBar(content: Text('Nothing is selected'))); } }, ); } }

`

**Output:

When no image is selected, the following will result:

gc1

When the button is pressed, it will ask for select type of picker whether it is gallery or camera on your device ,as shown below:

gc2

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:

gc3