颤振相机预览 [英] Flutter Camera Preview

问题描述

我对Flutter和Dart都是陌生的，所以请耐心等待。
我正在尝试使用Flutter使用相机显示相机预览插件，并且有两个问题。 1）预览被拉伸，因此看起来很奇怪。 2）我想在预览下方显示一个 BottomNavigationBar ，但是Camera Preview会使用所有屏幕空间。

I'm new to both Flutter and Dart, so bear with me. I'm trying to use Flutter to display a camera preview using the Camera Plugin, and have two problems. 1) The preview is stretched so things look weird. 2) I want to have a BottomNavigationBar displayed below the preview, but the Camera Preview uses all screen space.

我初始化相机并打开预览：

I initialize the camera and open the preview:

@override
Widget build(BuildContext context) {

  if (!_isReady) return new Container();
  if (!controller.value.initialized) return new Container();

  return new CameraPreview(controller);
}

1）这是我称为<$的类的构建方法c $ c> _CameraWidgetState 。如何使此预览看起来不那么拉伸？

1) This is the build method for a class I've called _CameraWidgetState. How can I make this preview not look stretched?

2）为了使CameraWidget不会使用所有空间，我尝试将其放在内脚手架没有运气：

2) To make the CameraWidget not use all space, I've tried putting it inside a Scaffold with no luck:

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(
    child: new CameraWidget(),
  ),
  bottomNavigationBar: new BottomNavigationBar(
    items: [
      new BottomNavigationBarItem(
          icon: new Icon(Icons.camera), title: new Text("Left")),

      new BottomNavigationBarItem(
          icon: new Icon(Icons.favorite),
          title: new Text("Right"))
    ],
  ),
);
}

任何想法或帮助表示赞赏！

Any ideas or help appreciated!

推荐答案

这可以解决问题，但也可以有更好的解决方案。 （感谢@ user1462442，来自上面的评论。）

This solves the problem, but there could be better solutions as well. (Thanks to @user1462442 from the comments above.)

@override
Widget build(BuildContext context) {
 if (!_isReady) return new Container();
 if (!controller.value.initialized) return new Container();

 return new Scaffold(
   body: new Container(
     child: new AspectRatio(
       aspectRatio: controller.value.aspectRatio,
       child: new CameraPreview(controller),
     ),
   ),
   floatingActionButton: new FloatingActionButton(
     onPressed: _isReady ? capture : null,
     child: const Icon(
       Icons.camera,
       color: Colors.white,
     ),
   ),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
 );
}

这篇关于颤振相机预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！