Add focus to camera flutter

Question

I have an application written on a flutter in which I take a photo, turn this photo into a base64 and then send. But I have a problem I can't focus on the camera. So I'm new to flutter, I can't solve this problem myself. I will be grateful for your help. My goal is to focus on that place when you tap the screen. Here is my code:

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


class PicturePreview extends StatefulWidget {
  final CameraDescription camera;
  const PicturePreview(this.camera, {Key? key}) : super(key: key);

  @override
  _PicturePreviewState createState() => _PicturePreviewState();
}
class _PicturePreviewState extends State {
  late CameraController _controller;
  Future? _initializeControllerFuture;

  @override
  late String _imageB64;
  late File  _image;
  void initState() {
    super.initState();
    // To display the current output from the Camera,
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras.
      widget.camera,
      // Define the resolution to use.
      ResolutionPreset.low,
    );

    // Next, initialize the controller. This returns a Future.
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the Future is complete, display the preview.
            return CameraPreview(_controller);
          } else {
            // Otherwise, display a loading indicator.
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera_alt),
        // Provide an onPressed callback.
        onPressed: () async {
          // Take the Picture in a try / catch block. If anything goes wrong,
          // catch the error.
          try {
            // Ensure that the camera is initialized.
            await _initializeControllerFuture;

            // Attempt to take a picture and get the file `image`
            // where it was saved.
            final image = await _controller.takePicture();
            _image = File(image.path);
            List imageBytes = _image.readAsBytesSync();
            _imageB64 = base64Encode(imageBytes);
            Navigator.pop(context, _imageB64);
          } catch (e) {
            // If an error occurs, log the error to the console.
            print(e);
          }
        },
      ),
    );
  }
}

user_7277653 · Answer

There is no focus functionality in the camera package. You should implement it yourself or try adv_camera package.

Here is a simple example:

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

void main() {
  String id = DateTime.now().toIso8601String();
  runApp(MaterialApp(home: MyApp(id: id)));
}

class MyApp extends StatefulWidget {
  final String id;

  const MyApp({Key? key, required this.id}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(child: Text('Press Floating Button to access camera')),
      floatingActionButton: FloatingActionButton(
        heroTag: "test3",
        child: Icon(Icons.camera),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (BuildContext context) {
                String id = DateTime.now().toIso8601String();
                return CameraApp(id: id);
              },
            ),
          );
        },
      ),
    );
  }
}

class CameraApp extends StatefulWidget {
  final String id;

  const CameraApp({Key? key, required this.id}) : super(key: key);

  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State {
  List pictureSizes = [];
  String? imagePath;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AdvCamera Example'),
      ),
      body: SafeArea(
        child: AdvCamera(
          initialCameraType: CameraType.rear,
          onCameraCreated: _onCameraCreated,
          onImageCaptured: (String path) {
            if (this.mounted)
              setState(() {
                imagePath = path;
              });
          },
          cameraPreviewRatio: CameraPreviewRatio.r16_9,
          focusRectColor: Colors.purple,
          focusRectSize: 200,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: "capture",
        child: Icon(Icons.camera),
        onPressed: () {
          cameraController!.captureImage();
        },
      ),
    );
  }

  AdvCameraController? cameraController;

  _onCameraCreated(AdvCameraController controller) {
    this.cameraController = controller;

    this.cameraController!.getPictureSizes().then((pictureSizes) {
      setState(() {
        this.pictureSizes = pictureSizes ?? [];
      });
    });
  }
}

user_5209982 · Answer

The Camera is bareback plugin, where most camera functions are meant to be self implemented. They have exposed all the basic functions such as setFocusPoint, setFlashMode etc for developers.

For the focus implementation part you can refer to this StackOverflow post.

However, for your usecase I wouldn't suggest to go with camera or adv_camera packages. If you simply want to capture a picture with the default provided camera by the Android System with all the functionalities, best go with Image-Picker package. This will make your life easy.

Add focus to camera flutter

2 Answers