我是Flutter和Dart的新手,所以请多多包涵。我正在尝试使用Flutter通过Camera Plugin显示摄像机预览,但是有两个问题。1)预览被拉伸,因此看起来很奇怪。2)我想BottomNavigationBar在预览下方显示一个,但是“摄像机预览”使用了所有屏幕空间。
BottomNavigationBar
我初始化相机并打开预览:
@override Widget build(BuildContext context) { if (!_isReady) return new Container(); if (!controller.value.initialized) return new Container(); return new CameraPreview(controller); }
1)这是我调用的类的构建方法_CameraWidgetState。如何使此预览看起来不那么拉伸?
_CameraWidgetState
2)为了不让CameraWidget占用所有空间,我尝试将它放到Scaffold没有运气的内部:
Scaffold
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")) ], ), ); }
任何想法或帮助表示赞赏!
这解决了问题,但是也可能有更好的解决方案。(感谢@ user1462442从上面的评论。)
@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, ); }