How to click image by camera and set to image view in flutter

Question

I am working on a flutter application in which I have a screen containing some text fields and an imageview
I have to click an image through camera and display into imageview for that I have put the basic code for camera but unable to open camera on a button click

I have used below code to implement the same

   class Survey extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SurveyState();
  }
}

class SurveyState extends State<Survey> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
        debugShowCheckedModeBanner: false,
        home: new Scaffold(
          appBar: AppBar(
            actions: <Widget>[
              new Padding(padding: new EdgeInsets.fromLTRB(10, 0, 0, 0)),
              RaisedButton.icon(
                textColor: Colors.white,
                onPressed: () {},
                label: Text("Fetch data"),
                color: Colors.blue,
                icon: new Image.asset(
                  'images/fetch.png',
                  width: 20,
                  height: 20,
                ),
              ),
              Spacer(),
              RaisedButton.icon(
                textColor: Colors.white,
                onPressed: () {},
                label: Text("Sync"),
                color: Colors.blue,
                icon: new Image.asset(
                  'images/sync.png',
                  width: 20,
                  height: 20,
                ),
              ),
              new Padding(padding: new EdgeInsets.fromLTRB(0, 0, 10, 0)),
            ],
          ),
          body: new SurveyForm(),
        ));
  }
}

class SurveyForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new SurveyFormState();
  }
}

class SurveyFormState extends State<SurveyForm> {
  TextEditingController feederName = new TextEditingController();
  TextEditingController poleType = new TextEditingController();
  CameraController controller;
  double _animatedHeight = 0.0;String _errorMsg = '';

  // Add two variables to the state class to store the CameraController and
  // the Future.

  Future<void> _initializeControllerFuture;
  String imagePath;
  var cameras;
  var selectedCameraIdx;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // To display the current output from the camera,
    // create a CameraController.
    initCamera();
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    controller.dispose();
    super.dispose();
  }
  void initCamera() async {
   final camerasList = await availableCameras();
    controller = new CameraController(camerasList[0], ResolutionPreset.medium);
    await controller.initialize();
    if (mounted) {
      setState(() {});
    }
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      margin: const EdgeInsets.all(20.0),
      child: new Column(
        children: <Widget>[
          new Padding(padding: new EdgeInsets.fromLTRB(0, 20, 0, 0)),
          SizedBox(
              width: 200.0,
              height: 45.0,
              child: RaisedButton.icon(
                textColor: Colors.white,
                onPressed: () {},
                label: Text("New pole survey"),
                color: Colors.blue,
                icon: new Image.asset(
                  'images/sync.png',
                  width: 20,
                  height: 20,
                ),
              )),
          new Padding(padding: new EdgeInsets.fromLTRB(0, 10, 0, 0)),
          new TextField(
            controller: feederName,
            obscureText: true,
            decoration: new InputDecoration(
              hintText: "",
              border:
              OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
            ),
          ),
          new Padding(padding: new EdgeInsets.fromLTRB(0, 10, 0, 0)),
          new TextField(
            controller: poleType,
            decoration: new InputDecoration(
              hintText: "",
              border:
              OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
            ),
          ),
          new Padding(padding: new EdgeInsets.fromLTRB(0, 10, 0, 0)),
          new TextField(
            controller: poleType,
            decoration: new InputDecoration(
              hintText: "",
              border:
              OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
            ),
          ),
          new Padding(padding: new EdgeInsets.fromLTRB(0, 10, 0, 0)),

          new Container(
            width: double.infinity,
            height: 150.0,
          // here I want to display the clicked image
          ),

          new Padding(padding: new EdgeInsets.fromLTRB(0, 10, 0, 0)),
          SizedBox(
              width: 200.0,
              height: 45.0,
              child:

              new RaisedButton.icon(
                textColor: Colors.white,

                onPressed: () async {

                  takePicture();
                },
                label: Text("Click picture"),
                color: Colors.blue,
                icon: new Image.asset(
                  'images/sync.png',
                  width: 20,
                  height: 20,
                ),
              )),

        ],
      ),
    );
  }

  /// Display Camera preview.
  Widget _cameraPreviewWidget() {
    if (controller == null || !controller.value.isInitialized) {
      return const Text(
        'Loading',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
          fontWeight: FontWeight.w900,
        ),
      );
    }

    return AspectRatio(
      aspectRatio: controller.value.aspectRatio,
      child: CameraPreview(controller),
    );
  }

  void showInSnackBar(String message) {
    setState(() {
      _animatedHeight = 30.0;
      _errorMsg = message;
    });

    Future<void>.delayed(const Duration(seconds: 1), _hideErrorMsg);
  }

  void _hideErrorMsg() {
    setState(() {
      _animatedHeight = 0.0;
      _errorMsg = '';
    });
  }


  Future<String> takePicture() async {
    if (!controller.value.isInitialized) {
      showInSnackBar('Error: select a camera first.');
      return null;
    }
    final String filePath = join(
      // Store the picture in the temp directory.
      // Find the temp directory using the `path_provider` plugin.
      (await getTemporaryDirectory()).path,
      '${DateTime.now()}.png',
    );

    if (controller.value.isTakingPicture) {
      // A capture is already pending, do nothing.
      return null;
    }

    try {
      await controller.takePicture(filePath);
    } on CameraException catch (e) {
      print('Exception -> $e');
      return null;
    }
    setState(() {

    });
    return filePath;
  }
}

Can someone help me out to implement the same

Answer 1

Just set an boolean showCapturedPhoto = true on Image is captured and update ImagePath.

       showCapturedPhoto ? Container(
          width: double.infinity,
          height: 150.0,
          child: Image.file(File(ImagePath)))
          : Container(),

Answer 2

First Initialise camera

CameraController _controller;
Future<void> _initializeControllerFuture;
isCameraReady = false;
showCapturedPhoto = false;
var ImagePath;

@override
void initState() {
  super.initState();
  _initializeCamera(); 

}
Future<void> _initializeCamera() async {
  final cameras = await availableCameras();
  final firstCamera = cameras.first;
  _controller = CameraController(firstCamera,ResolutionPreset.high);
  _initializeControllerFuture = _controller.initialize();
  if (!mounted) {
    return;
  }
  setState(() {
    isCameraReady = true;
  });
}

Use the CameraPreview widget from the camera package to display a preview of the camera’s feed.

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height
FutureBuilder<void>(
  future: _initializeControllerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the Future is complete, display the preview.
      return Transform.scale(
          scale: _controller.value.aspectRatio / deviceRatio,
          child: Center(
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: CameraPreview(_controller), //cameraPreview
            ),
          ));
    } else {
      return Center(
          child:
              CircularProgressIndicator()); // Otherwise, display a loading indicator.
    }
  },
),

create a Button that takes a picture using the CameraController when a user taps on the button call onCaptureButtonPressed() method,

void onCaptureButtonPressed() async {  //on camera button press
  try {

    final path = join(
      (await getTemporaryDirectory()).path, //Temporary path
      '$pageStatus${DateTime.now()}.png',
    );
ImagePath = path;
await _controller.takePicture(path); //take photo

    setState(() {
      showCapturedPhoto = true;
    });
  } catch (e) {
    print(e);
  }
}

Show the taken picture with an Image widget

Center(child: Image.file(File(ImagePath)));

Finally dont forget to dispose camera _controller

@override
void dispose() {
  // TODO: implement dispose
  _controller?.dispose();
  super.dispose();
}

For detailed explanation get out this link: https://medium.com/@navinkumar0118/take-a-picture-using-flutter-camera-a9c11d282632