小部件中的颤振相机预览,而不是全屏

Posted

技术标签:

【中文标题】小部件中的颤振相机预览,而不是全屏【英文标题】:Flutter Camera Preview in Small Widget, not in Full Screen 【发布时间】:2021-02-19 00:17:03 【问题描述】:

我有什么方法可以创建一个 Flutter Widget,该小部件将是一个绝对位置(在 CSS 中),该小部件内部将是相机预览?

我已经创建了小部件,当我访问页面时,我可以在屏幕右下角看到它,但是当我从 Flutter 添加 CameraPreview 插件时,它会变成全屏。

我需要的是一个选项,可以在我创建的页面/屏幕的右下角小部件上进行应用内预览。

Square 小部件,我只想在其中显示相机。

import 'package:flutter/material.dart';

[![class CameraAppTest extends StatelessWidget 
  static const routeName = '/videoRecordScreen';
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Container(
        // width: 200,
        alignment: Alignment.center,
        // margin: EdgeInsets.all(24),
        // padding: EdgeInsets.all(24),
        decoration: BoxDecoration(),
        // decoration: ,
        child: Container(child: Demo()),
      ),
    );
  


class Square extends StatelessWidget 
  final color;
  final size;

  Square(this.color, this.size);
  @override
  Widget build(BuildContext context) 
    return Container(
      child: Icon(Icons.add),
    );
  


class Demo extends StatelessWidget 
  build(context) 
    return Container(
      margin: EdgeInsets.only(bottom: 20, right: 20),
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: \[
          Align(
            alignment: Alignment.bottomRight,
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  border: Border.all(width: 10, color: Colors.black),
                ),
                // margin: EdgeInsets.only(bottom: 30),
                child: Square(),
              ),
            ),
          ),
          // Square(),
        \],
      ),
    );
  
][1]][1]

请查看下图,了解我想在右下角放置相机小部件的位置。谢谢你,米洛特。

【问题讨论】:

【参考方案1】:

以下插件在任何小部件中提供实时相机预览

Camera->https://pub.dev/packages/camera

谢谢

【讨论】:

嗨,@chunhunghan 提供了我正在寻找的答案,谢谢你的帮助:)【参考方案2】:

您可以在下面复制粘贴运行完整代码 您可以初始化相机并将Square更新为以下 代码sn-p

import 'package:camera/camera.dart';
...
class _SquareState extends State<Square> 
  CameraController controller;

  @override
  void initState() 
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.medium);
    controller.initialize().then((_) 
      if (!mounted) 
        return;
      
      setState(() );
    );
  

  @override
  void dispose() 
    controller?.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    if (!controller.value.isInitialized) 
      return Container();
    
    return AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: CameraPreview(controller));
  

工作演示

完整代码

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

List<CameraDescription> cameras;

class CameraAppTest extends StatelessWidget 
  static const routeName = '/videoRecordScreen';
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Container(
        // width: 200,
        alignment: Alignment.center,
        // margin: EdgeInsets.all(24),
        // padding: EdgeInsets.all(24),
        decoration: BoxDecoration(),
        // decoration: ,
        child: Container(child: Demo()),
      ),
    );
  


class Square extends StatefulWidget 
  final color;
  final size;

  Square(this.color, this.size);

  @override
  _SquareState createState() => _SquareState();


class _SquareState extends State<Square> 
  CameraController controller;

  @override
  void initState() 
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.medium);
    controller.initialize().then((_) 
      if (!mounted) 
        return;
      
      setState(() );
    );
  

  @override
  void dispose() 
    controller?.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    if (!controller.value.isInitialized) 
      return Container();
    
    return AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: CameraPreview(controller));
  


class Demo extends StatelessWidget 
  build(context) 
    return Container(
      margin: EdgeInsets.only(bottom: 20, right: 20),
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.bottomRight,
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  border: Border.all(width: 10, color: Colors.black),
                ),
                // margin: EdgeInsets.only(bottom: 30),
                child: Square(),
              ),
            ),
          ),
          // Square(),
        ],
      ),
    );
  


Future<void> main() async 
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CameraAppTest(),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;

  void _incrementCounter() 
    setState(() 
      _counter++;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  

【讨论】:

非常感谢,这正是我所需要的。感谢您的快速回复:) 这个正在工作,但是当我改变相机视图的大小时,它也会改变纵横比,从而破坏图像纵横比

以上是关于小部件中的颤振相机预览,而不是全屏的主要内容,如果未能解决你的问题,请参考以下文章

Flutter中的Android锁屏小部件?

颤振图标小部件在 vscode 中没有预览

PySide 全屏 Mac os x 小部件

如何使用 kivy 为移动应用程序制作相机小部件

音乐播放器锁屏小部件 Android

在颤振中如何使带有平移手势的内部小部件不会与PageView冲突