Flutter Camera Preview在Small Widget中而不是在全屏中

问题描述

有什么方法可以创建Flutter窗口小部件，在该窗口小部件上该位置将是绝对位置（在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]

请检查下面的图像，该图像位于右下角我要放置相机小部件的位置。谢谢你，米洛。

解决方法

您可以在下面复制粘贴运行完整代码
您可以启动相机并将Square更新为以下内容
代码段

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],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),);
  }
}

,

下面的插件可在任何小部件中提供实时摄像机预览

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

谢谢