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) This is the build method for a class I've called _CameraWidgetState
. How can I make this preview not look stretched?
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!
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,
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With