Debug School

rakesh kumar
rakesh kumar

Posted on

Flutter Image Picker : How to pick image from Gallery or Camera and Display it?

how-to-use-image-picker-and-upload-file-to-php-server
How to pick image from Gallery or Camera and Display it
https://blog.logrocket.com/building-an-image-picker-in-flutter/

Image description

Install image_picker package

dependencies:
flutter:
  sdk: flutter
image_picker: ^0.6.7+6
Enter fullscreen mode Exit fullscreen mode

Add the image_picker package to pubspec.yaml as shown above. Run flutter pub get to install the package.

Pick Image From Gallery - Example code

_getFromGallery() async {
    PickedFile pickedFile = await ImagePicker().getImage(
        source: ImageSource.gallery,
        maxWidth: 1800,
        maxHeight: 1800,
    );
    if (pickedFile != null) {
        File imageFile = File(pickedFile.path);
    }
}
Enter fullscreen mode Exit fullscreen mode

Image picker can be used to pick image from gallery as well as camera. _getFromGallery() is our function picking the image from gallery. When the function is run for the first time in iOS, a gallery access permission pops up with the NSPhotoLibraryUsageDescription, you gave on Info.plist. Once the user gives permission he will be able to access images in the gallery from the app.

In this example we are using 3 properties:

  1. source - Source can be ImageSource.gallery or ImageSource.camera
  2. maxWidth - Resizes the image value if width of the image is larger than the value
  3. maxHeight - Resizes the image if height of the image is larger than the value

Pick Image From Camera - Example code

/// Get from camera

_getFromCamera() async {
    PickedFile pickedFile = await ImagePicker().getImage(
        source: ImageSource.camera,
        maxWidth: 1800,
        maxHeight: 1800,
    );
    if (pickedFile != null) {
        File imageFile = File(pickedFile.path);
    }
}
Enter fullscreen mode Exit fullscreen mode

_getFromCamera() is our function picking the image from camera. When the function is run for the first time in iOS, a camera access permission pops up with the NSCameraUsageDescription, you gave on Info.plist. Once the user gives permission he will be able to access camera.

Full Implementation

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

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
  /// Variables
  File imageFile;

  /// Widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Image Picker"),
        ),
        body: Container(
            child: imageFile == null
                ? Container(
              alignment: Alignment.center,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.greenAccent,
                    onPressed: () {
                      _getFromGallery();
                    },
                    child: Text("PICK FROM GALLERY"),
                  ),
                  Container(
                    height: 40.0,
                  ),
                  RaisedButton(
                    color: Colors.lightGreenAccent,
                    onPressed: () {
                      _getFromCamera();
                    },
                    child: Text("PICK FROM CAMERA"),
                  )
                ],
              ),
            ): Container(
              child: Image.file(
                imageFile,
                fit: BoxFit.cover,
              ),
            )));
  }

  /// Get from gallery
  _getFromGallery() async {
    PickedFile pickedFile = await ImagePicker().getImage(
      source: ImageSource.gallery,
      maxWidth: 1800,
      maxHeight: 1800,
    );
    if (pickedFile != null) {
      setState(() {
        imageFile = File(pickedFile.path);
      });
    }
  }

  /// Get from Camera
  _getFromCamera() async {
    PickedFile pickedFile = await ImagePicker().getImage(
      source: ImageSource.camera,
      maxWidth: 1800,
      maxHeight: 1800,
    );
    if (pickedFile != null) {
      setState(() {
        imageFile = File(pickedFile.path);
      });
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)