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

【问题标题】：Flutter. I'm trying to put a camera widget inside a small container扑。我正在尝试将相机小部件放入一个小容器中
【发布时间】：2021-11-19 22:45:13
【问题描述】：

我正在尝试将一个完整的相机放在一个高度为 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),
    );
  }
}

【问题讨论】：

尝试将小部件包装在 AspectRatio 小部件中并将 aspectRatio 属性设置为您的比率。

标签： flutter flutter-layout flutter-widget

【解决方案1】：

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

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

【讨论】：