Select Image from Gallery Using Image Picker plugin in flutter

By -
A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the camera.

Installation #

First, add image_picker: ^0.6.3+1 as a dependency in your pubspec.yaml file.

iOS #

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:
  • NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.
  • NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.
  • NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor.

Android #

No configuration required - the plugin should work out of the box.

Example:-

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class PickImageDemo extends StatefulWidget {
  PickImageDemo() : super();
  final String title = "Flutter Pick Image demo";
  @override
  _PickImageDemoState createState() => _PickImageDemoState();
}
class _PickImageDemoState extends State<PickImageDemo> {
  Future<File> imageFile;
  pickImageFromGallery(ImageSource source) {
    setState(() {
      imageFile = ImagePicker.pickImage(source: source);
    });
  }
  Widget showImage() {
    return FutureBuilder<File>(
      future: imageFile,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.data != null) {
          return Image.file(
            snapshot.data,
            width: 300,
            height: 300,
          );
        } else if (snapshot.error != null) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            showImage(),
            RaisedButton(
              child: Text("Select Image from Gallery"),
              onPressed: () {
                pickImageFromGallery(ImageSource.gallery);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Handling MainActivity destruction on Android #
Android system -- although very rarely -- sometimes kills the MainActivity after the image_picker finishes. When this happens, we lost the data selected from the image_picker. You can use retrieveLostData to retrieve the lost data in this situation. For example:
Future<void> retrieveLostData() async {
  final LostDataResponse response =
      await ImagePicker.retrieveLostData();
  if (response == null) {
    return;
  }
  if (response.file != null) {
    setState(() {
      if (response.type == RetrieveType.video) {
        _handleVideo(response.file);
      } else {
        _handleImage(response.file);
      }
    });
  } else {
    _handleError(response.exception);
  }
}

There's no way to detect when this happens, so calling this method at the right place is essential.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Comments

Post a Comment

Popular posts from this blog

Flutter Architecture | Flutter - Architecture Application

By -
Image
In this chapter, let us discuss the architecture of the Flutter framework. Widgets The core concept of the Flutter framework is  In Flutter, Everything is a widget . Widgets are basically user interface components used to create the user interface of the application. In  Flutter , the application is itself a widget. The application is the top- level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This  composability  feature helps us to create a user interface of any complexity. For example, the widget hierarchy of the hello world application (created in previous chapter) is as specified in the following diagram − Here the following points are worth notable − MyApp  is the user created widget and it is build using the Flutter native widget,  MaterialApp . MaterialApp  has a home property to specify the user interface of the home page, which is again a user created widget,...
Read More »

Send Data on Server http package.

By -
Sending data to the internet is necessary for most apps. The  http  package has got it covered too. This recipe uses the following steps: Add the   http   package. Send data to server using the   http   package. Convert the response into a custom Dart object. Getting   title   from user input Display the response on screen. To install the  http  package, add it to the dependencies section of the  pubspec.yaml . You can find the latest version of the  http  package  on pub.dev. dependencies : http : <latest_version> Import the  http  package. import 'dart:async' ; import 'dart:convert' ; import 'package:flutter/material.dart' ; import 'package:http/http.dart' as http ; Future < Album > createAlbum ( String title ) async { final http . Response response = await http . post ( 'https://jsonplaceholder.typicode.com/albums' , headers: < String ,...
Read More »

Automatic Scrolling Image in flutter

By -
Hi, In this Flutter tutorial I am going to explain how to create auto scrolling image view this type of auto scrolling image you can use in any app to show app latest feature and new offer, so let's create flutter auto scrolling image Add  carousel_slider: ^1.3.0  in your  pubspec.yaml  dependencies. And import it: import 'package:carousel_slider/carousel_slider.dart' ; complete example import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter ListView Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text("ListView Demo"), ), body: Container( decoration: BoxDecoration( color...
Read More »