[英]Flutter Camera Preview in Small Widget, not in Full Screen
Is there any way I can create a Flutter Widget, on which that widget will be an position absolute(in CSS), which inside that widget will be the Camera Preview?有什么方法可以创建一个 Flutter 小部件,该小部件将是一个绝对位置(在 CSS 中),该小部件内的哪个将是相机预览?
I have created the widget, on which I can see it on bottom right side of the screen when I access the page, but when I add the CameraPreview plugin from Flutter, it makes it full screen.我已经创建了小部件,当我访问页面时,我可以在屏幕的右下角看到它,但是当我从 Flutter 添加 CameraPreview 插件时,它使它全屏显示。
What I need is an option to make it inApp preview on that bottom right widget of the page/screen that I have created.我需要的是在我创建的页面/屏幕的右下角小部件上进行应用程序预览的选项。
the Square widget, is where I want to display the camera only. Square 小部件,是我只想显示相机的地方。
import 'package:flutter/material.dart';
[![class CameraAppTest extends StatelessWidget {
static const routeName = '/videoRecordScreen';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('test'),
),
body: Container(
// width: 200,
alignment: Alignment.center,
// margin: EdgeInsets.all(24),
// padding: EdgeInsets.all(24),
decoration: BoxDecoration(),
// decoration: ,
child: Container(child: Demo()),
),
);
}
}
class Square extends StatelessWidget {
final color;
final size;
Square({this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
child: Icon(Icons.add),
);
}
}
class Demo extends StatelessWidget {
build(context) {
return Container(
margin: EdgeInsets.only(bottom: 20, right: 20),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: \[
Align(
alignment: Alignment.bottomRight,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.black),
),
// margin: EdgeInsets.only(bottom: 30),
child: Square(),
),
),
),
// Square(),
\],
),
);
}
}][1]][1]
please check the image below on where i want to place the camera widget, on the bottom right corner.请检查下面的图片,了解我想在右下角放置相机小部件的位置。 thank you, Milot.谢谢你,米洛。
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
You can init camera and update Square
to the following您可以初始化相机并将Square
更新为以下内容
code snippet代码片段
import 'package:camera/camera.dart';
...
class _SquareState extends State<Square> {
CameraController controller;
@override
void initState() {
super.initState();
controller = CameraController(cameras[0], ResolutionPreset.medium);
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 AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: CameraPreview(controller));
}
}
working demo工作演示
full code完整代码
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
List<CameraDescription> cameras;
class CameraAppTest extends StatelessWidget {
static const routeName = '/videoRecordScreen';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('test'),
),
body: Container(
// width: 200,
alignment: Alignment.center,
// margin: EdgeInsets.all(24),
// padding: EdgeInsets.all(24),
decoration: BoxDecoration(),
// decoration: ,
child: Container(child: Demo()),
),
);
}
}
class Square extends StatefulWidget {
final color;
final size;
Square({this.color, this.size});
@override
_SquareState createState() => _SquareState();
}
class _SquareState extends State<Square> {
CameraController controller;
@override
void initState() {
super.initState();
controller = CameraController(cameras[0], ResolutionPreset.medium);
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 AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: CameraPreview(controller));
}
}
class Demo extends StatelessWidget {
build(context) {
return Container(
margin: EdgeInsets.only(bottom: 20, right: 20),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.black),
),
// margin: EdgeInsets.only(bottom: 30),
child: Square(),
),
),
),
// Square(),
],
),
);
}
}
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
cameras = await availableCameras();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CameraAppTest(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.