How to add an image from camera in flutter?

Question

I created a placeholder for an image in my app, on clicking which I want to be able to open camera, and show the image clicked in the placeholder. I used the image_picker package for this. I wrapped my placeholder container with GestureDetector, however nothing happens on tapping on the container. How do i resolve this ?

In my main file containing Stateless widget, i added my Stateful widget addImage()

Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[

                  addImage(),  // my stateful widget 
                TextField(

                  )
                ),              
                Row(
                 //other implementation here 
                  ],
                )

              ]
            )

My addImage stateful widget looks like this

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


class addImage extends StatefulWidget{
  @override
  _addImageState createState() => _addImageState();
}

class _addImageState extends State<addImage> {

  File _image;

  Future getImagefromCamera() async{

    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }


  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      onTap: getImagefromCamera,
      child: _image == null ? Container(decoration: BoxDecoration(color: Colors.red[50],border: Border.all(color: Colors.red[200], width: 1.0),borderRadius: BorderRadius.circular(10.0)),
          child: Column(
            children: <Widget>[
              SizedBox(height:30.0),
              Icon(Icons.camera_alt, color: Colors.red),
              SizedBox(height: 10.0),
              Text('Take Image of the Item', style: TextStyle(color: Colors.red)),
              SizedBox(height: 30.0)
            ],
          )) : Image.file(_image),
    );
  }

}

I even added the dependency in pubspec.yaml , however still doesnt work

 image_picker: ^0.4.5

Answer 1

I was able to see the captured image from camera using below code:

import 'dart:async';
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) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: addImage()
      )
    );
  }
}

class addImage extends StatefulWidget{
  @override
  _addImageState createState() => _addImageState();
}

class _addImageState extends State<addImage> {

  File _image;

  Future getImagefromCamera() async{

    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(

        body: GestureDetector(
          onTap: getImagefromCamera,
          child: _image == null ? Container(decoration: BoxDecoration(color: Colors.red[50],border: Border.all(color: Colors.red[200], width: 1.0),borderRadius: BorderRadius.circular(10.0)),
              child: Column(
                children: <Widget>[
                  SizedBox(height:30.0),
                  Icon(Icons.camera_alt, color: Colors.red),
                  SizedBox(height: 10.0),
                  Text('Take Image of the Item', style: TextStyle(color: Colors.red)),
                  SizedBox(height: 30.0)
                ],
              )) : Image.file(_image),
        )

    );

  }

}

Tested on Android emulator.

Answer 2

Try this code ..

 image_picker: ^0.5.2

after try this code..

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.camera);
          },
        ),
      ],
    ),
  ),
);
 }