Custom CameraPreview Flutter

Question

How can I create custom CameraPreview with certain size and save taken photo with the same size? (Flutter)

If the camera widget size is 400x150, the image also should be 400x150.

Answer 1

add dependencies to your pubspec.yaml file

dependencies:
  camera: ^0.10.0+1
  path_provider: ^2.0.11

Initializing the camera:

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final cameras = await availableCameras();
  final firstCamera = cameras.first;

  runApp(MyApp(camera: firstCamera));
}

class MyApp extends StatelessWidget {
  final CameraDescription camera;

  MyApp({required this.camera});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TakePictureScreen(camera: camera),
    );

} }

camera preview :

class TakePictureScreen extends StatefulWidget {
  final CameraDescription camera;

  TakePictureScreen({required this.camera});

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

class _TakePictureScreenState extends State<TakePictureScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(
      widget.camera,
      ResolutionPreset.high,
    );
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Take a picture')),
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Center(
              child: Container(
                width: 400,
                height: 150,
                child: CameraPreview(_controller),
              ),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();
            final croppedImage = await _cropImage(image.path);
            // Save or use the cropped image
          } catch (e) {
            print(e);
          }
        },
        child: Icon(Icons.camera_alt),
      ),
    );
  }

  Future<File> _cropImage(String imagePath) async {
    final image = img.decodeImage(File(imagePath).readAsBytesSync())!;
    final cropped = img.copyCrop(image, 0, 0, 400, 150);
    final croppedFile = File(imagePath)..writeAsBytesSync(img.encodeJpg(cropped));
    return croppedFile;
  }
}

Crop image :

import 'dart:io';
import 'package:image/image.dart' as img;

Future<File> _cropImage(String imagePath) async {
  final image = img.decodeImage(File(imagePath).readAsBytesSync())!;
  final cropped = img.copyCrop(image, 0, 0, 400, 150);
  final croppedFile = File(imagePath)..writeAsBytesSync(img.encodeJpg(cropped));
  return croppedFile;
}

I hope this will resolve your problem,