Help us understand the problem. What is going on with this article?

Flutter カメラの映像を表示させるサンプル

実現したいこと

カメラの映像を表示させる

動作の様子

IMG_5443.2020-01-20 21_56_06.gif

動作コード

こちらに一式用意しています。
https://github.com/quqjp/flutter-test

コード箇所はこちら。
https://github.com/quqjp/flutter-test/tree/master/lib/sample3

利用プラグイン

Camera Plugin
https://pub.dev/packages/camera

installing に従い導入する
https://pub.dev/packages/camera#-installing-tab-

コード

そのまま CameraPreview widgetを取り付けると、表示の比率がおかしくなってしまったので、カメラの描画の比率でAspectRatio widget作ってその中で表示させることでうまくできた。

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

//third party package
import 'package:camera/camera.dart';

//my package

//same package

//
// カメラの映像を表示させるサンプル
//
class Sample3Page extends StatefulWidget {
  Sample3Page({Key key, this.title}) : super(key: key);

  // タイトル
  final String title;

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

class _State extends State<Sample3Page> {
  //カメラリスト
  List<CameraDescription> _cameras;

  //カメラコントローラ
  CameraController _controller;

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

    initCamera();
  }

  //
  // カメラを準備
  //
  initCamera() async {
    _cameras = await availableCameras();

    if (_cameras.length != 0) {
      _controller = CameraController(_cameras[0], ResolutionPreset.high);
      _controller.initialize().then((_) {
        if (!mounted) {
          return;
        }

        //カメラ接続時にbuildするようsetStateを呼び出し
        setState(() {});
      });
    }
  }

  ///
  ///
  ///
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //
      body: Container(
        alignment: Alignment.center,
        child: _controller != null && _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: CameraPreview(_controller),
              )
            : Container(),
      ),
    );
  }
}
quqjp
フリーランスフロントエンドエンジニア。ブログ・note執筆、個人開発(ツール系アプリ)にも取り組んでいます。 出版社・Web制作会社にてサービスの立ち上げや広告系キャンペーンサイト等のフロントエンド実装に携わる→独立→フリーランス9年目。
https://twitter.com/quqjp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away