小部件中的颤振相机预览,而不是全屏
Posted
技术标签:
【中文标题】小部件中的颤振相机预览,而不是全屏【英文标题】:Flutter Camera Preview in Small Widget, not in Full Screen 【发布时间】:2021-02-19 00:17:03 【问题描述】:我有什么方法可以创建一个 Flutter Widget,该小部件将是一个绝对位置(在 CSS 中),该小部件内部将是相机预览?
我已经创建了小部件,当我访问页面时,我可以在屏幕右下角看到它,但是当我从 Flutter 添加 CameraPreview 插件时,它会变成全屏。
我需要的是一个选项,可以在我创建的页面/屏幕的右下角小部件上进行应用内预览。
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]
请查看下图,了解我想在右下角放置相机小部件的位置。谢谢你,米洛特。
【问题讨论】:
【参考方案1】:以下插件在任何小部件中提供实时相机预览
Camera->https://pub.dev/packages/camera
谢谢
【讨论】:
嗨,@chunhunghan 提供了我正在寻找的答案,谢谢你的帮助:)【参考方案2】:您可以在下面复制粘贴运行完整代码
您可以初始化相机并将Square
更新为以下
代码sn-p
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));
工作演示
完整代码
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),
),
);
【讨论】:
非常感谢,这正是我所需要的。感谢您的快速回复:) 这个正在工作,但是当我改变相机视图的大小时,它也会改变纵横比,从而破坏图像纵横比以上是关于小部件中的颤振相机预览,而不是全屏的主要内容,如果未能解决你的问题,请参考以下文章