How to square crop a Flutter Camera Preview

In this Google Flutter code snippet example, we are going to learn How to square crop a flutter camera preview

You can copy and adopt this source code example tp your flutter project easily without issues.

add this code to your pubspec.yaml file

 camera: ^0.5.2+1

Create a square_crop_cam.dart file (use any name of your choice) and add this code:

 import 'dart:async';

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

class SquareCropCam extends StatefulWidget {
  @override
  _SquareCropCamState createState() => _SquareCropCamState();
}

class _SquareCropCamState extends State<SquareCropCam> {
  CameraController _controller;
  Future<void> _initCamFuture;

  @override
  void initState() {
    super.initState();
    _initApp();
  }

  _initApp() async {
    final cameras = await availableCameras();
    final firstCam = cameras.first;

    _controller = CameraController(
      firstCam,
      ResolutionPreset.medium,
    );

    _initCamFuture = _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(title: Text("Square Crop Camera Preview")),
      body: FutureBuilder<void>(
        future: _initCamFuture,
        builder: (context, snapshot) {
          
            return Container(
              width: size,
              height: size,
              child: ClipRect(
                child: OverflowBox(
                  alignment: Alignment.center,
                  child: FittedBox(
                    fit: BoxFit.fitWidth,
                    child: Container(
                      width: size,
                      height: size / _controller.value.aspectRatio,
                      child: CameraPreview(
                          _controller), // this is my CameraPreview
                    ),
                  ),
                ),
              ),
            );
          
        },
      ),
    );
  }
}

In your main.dart file (main entry point of the app), add this:

import 'package:inducesmile/square_crop_cam.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Code Snippets',
      theme: new ThemeData(primarySwatch: Colors.red),
      home: new SquareCropCam(),
    );
  }
}

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment