Наложение флаттер-камеры

Я проводил некоторые исследования для предстоящего проекта и хотел бы отобразить вид камеры за пользовательской формой / полупрозрачным изображением, чтобы действовать как руководство при съемке.

Кто-нибудь знает о плагине или учебном пособии для флаттер-камеры, в котором объясняется, как это сделать?


person Pieter    schedule 15.05.2018    source источник


Ответы (4)


Вы можете использовать плагин камеры для флаттера от команды Flutter.

https://pub.dartlang.org/packages/camera

а затем поместите свое изображение и камеру в виджет стека следующим образом:

return new Stack(
  alignment: FractionalOffset.center,
  children: <Widget>[
    new Positioned.fill(
      child: new AspectRatio(
          aspectRatio: controller.value.aspectRatio,
          child: new CameraPreview(controller)),
    ),
    new Positioned.fill(
      child: new Opacity(
        opacity: 0.3,
        child: new Image.network(
          'https://picsum.photos/3000/4000',
          fit: BoxFit.fill,
        ),
      ),
    ),
  ],
);
person Antonino Cacace    schedule 15.05.2018
comment
Есть ли способ сохранить это видео с оверлеем? - person Jose Tapizquent; 09.09.2019
comment
Я тоже хочу сохранить видео с наложением? любые предложения.. @JoseTapizquent - person Rahul Kushwaha; 02.06.2021

Посетите этот репозиторий. В этом примере используется плагин камеры.

new AspectRatio(
  aspectRatio: controller.value.aspectRatio,
  child: Container(
    child: Stack(
      children: <Widget>[
        CameraPreview(controller),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: double.infinity,
            height: 120.0,
            padding: EdgeInsets.all(20.0),
            color: Color.fromRGBO(00, 00, 00, 0.7),
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.center,
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      borderRadius: BorderRadius.all(Radius.circular(50.0)),
                      onTap: () {
                        _captureImage();
                      },
                      child: Container(
                        padding: EdgeInsets.all(4.0),
                        child: Image.asset(
                          'assets/images/ic_shutter_1.png',
                          width: 72.0,
                          height: 72.0,
                        ),
                      ),
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      borderRadius: BorderRadius.all(Radius.circular(50.0)),
                      onTap: () {
                        if (!_toggleCamera) {
                          onCameraSelected(widget.cameras[1]);
                          setState(() {
                            _toggleCamera = true;
                          });
                        } else {
                          onCameraSelected(widget.cameras[0]);
                          setState(() {
                            _toggleCamera = false;
                          });
                        }
                      },
                      child: Container(
                        padding: EdgeInsets.all(4.0),
                        child: Image.asset(
                          'assets/images/ic_switch_camera_3.png',
                          color: Colors.grey[200],
                          width: 42.0,
                          height: 42.0,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

введите описание изображения здесь.

person FlutterDevs    schedule 02.11.2018

Теперь вы также можете использовать этот плагин: CamerAwesome

В официальном плагине есть ошибка соотношения, из-за которой оверлей имеет плохое соотношение. Этот плагин включает в себя вспышку, масштабирование, автофокус... и не требует инициализации.

person mcfly    schedule 24.11.2020

Вы можете проверить полный код на моей странице https://github.com/Prashantm111/flutter-camera-inscreen-app введите здесь описание изображения

person Prashant Maheshwari Andro    schedule 02.03.2021