扑。我正在尝试将相机小部件放入一个小容器中

Question

我想把一个完整的相机放在一个高 255 宽的容器中。

我尝试了很多调整下面的代码，但我不确定如何应用该比率。

小部件大小用正确的相机宽高比没有空间修复它吗？

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

List<CameraDescription> cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();
  runApp(CameraApp());
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  CameraController controller;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    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 MaterialApp(
      home: CameraPreview(controller),
    );
  }
}

Answer 1

CameraPreview class无法根据您的高度和宽度进行修改。如果您尝试将 CameraPreview 放在 sizedbox 或 AspectRatio class 内，那么它会给您一个倾斜的图像。在不扭曲输出的情况下获得预览的最佳选择是使用堆栈。示例代码如下：

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

List<CameraDescription> cameras = List.empty(growable: true);
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'My Flutter Camera',
      home: CameraApp(),
    );
  }
}

class CameraApp extends StatefulWidget {
  const CameraApp({Key? key}) : super(key: key);

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

class _CameraAppState extends State<CameraApp> {
  CameraController controller =
      CameraController(cameras[1], ResolutionPreset.max);

  @override
  void initState() {
    super.initState();
    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 Stack(
      children: [
        CameraPreview(controller),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              color: Colors.white,
              height: (MediaQuery.of(this.context).size.height - 255) / 2,
            ),
            const SizedBox(
              height: 255,
            ),
            Container(
              color: Colors.white,
              height: (MediaQuery.of(this.context).size.height - 255) / 2,
            ),
          ],
        )
      ],
    );
  }
}

扑。我正在尝试将相机小部件放入一个小容器中

Flutter. I'm trying to put a camera widget inside a small container

flutter

flutter-layout

flutter-widget