I've been doing some research for an upcoming project and would like to render the camera view behind a custom shape/semi-transparent img to act as a guide when taking pictures.
Does anyone know of a flutter camera plugin or tutorial that explains how to do this?
You can use the camera Plugin for flutter by the Flutter team.
https://pub.dartlang.org/packages/camera
and then position your image and you cameraview in a Stack Widget like this:
return new Stack(
alignment: FractionalOffset.center,
children: <Widget>[
new Positioned.fill(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller)),
),
new Positioned.fill(
child: new Opacity(
opacity: 0.3,
child: new Image.network(
'https://picsum.photos/3000/4000',
fit: BoxFit.fill,
),
),
),
],
);
Please visit this repo. This example uses the camera plugin.
new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: Container(
child: Stack(
children: <Widget>[
CameraPreview(controller),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: 120.0,
padding: EdgeInsets.all(20.0),
color: Color.fromRGBO(00, 00, 00, 0.7),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
_captureImage();
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_shutter_1.png',
width: 72.0,
height: 72.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
if (!_toggleCamera) {
onCameraSelected(widget.cameras[1]);
setState(() {
_toggleCamera = true;
});
} else {
onCameraSelected(widget.cameras[0]);
setState(() {
_toggleCamera = false;
});
}
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_switch_camera_3.png',
color: Colors.grey[200],
width: 42.0,
height: 42.0,
),
),
),
),
),
],
),
),
),
],
),
),
);
.
You can also now use this plugin :
CamerAwesome
Official plugin has a ratio bug that makes overlay having bad ratio.
This plugin includes flash, zoom, auto focus... and no initialisation required.
You can check full code on my page
https://github.com/Prashantm111/flutter-camera-inscreen-app
Related
I'm building an AR app with Flutter and using the ar_flutter_plugin.
The position of the AR widget seems to be fixed to the top left and it doesn't move anywhere else. Whatever the other widgets in the tree, doesn't change anything. It's always at top left corner (see image).
It works with a dummy widget just fine (compare second img).
Child Ar widget
Widget build(BuildContext context) {
return SizedBox(
width: widget.width,
height: widget.height,
child: Column(
children: [
Expanded(
child: Column(children: [
Expanded(
child: ARView(
onARViewCreated: onARViewCreated,
planeDetectionConfig:
PlaneDetectionConfig.horizontalAndVertical,
),
),
Align(
alignment: Alignment(1, 1),
child: FloatingActionButton(onPressed: takePicture))
]),
),
],
));
}
Parent Widget
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
key: scaffoldKey,
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: [
Container(
width: 350,
height: 350,
child: ObjectsOnPlanesWidget(
// child: custom_widgets.ArPlaceholder(
width: double.infinity,
height: double.infinity,
modelUrl: widget.modelUrl,
),
),
Align(
alignment: AlignmentDirectional(-0.23, -0.92),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(8, 24, 8, 24),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color:
FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(12),
),
child: InkWell(
onTap: () async {
Navigator.pop(context);
},
child: Icon(
Icons.chevron_left,
color: Colors.black,
size: 24,
),
),
),
Text(
'Try On',
style: FlutterFlowTheme.of(context).bodyText1,
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color:
FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.share_outlined,
color: Colors.black,
size: 24,
),
),
],
),
),
),
Align(
alignment: AlignmentDirectional(0, 0.95),
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.photo_camera,
color: Colors.black,
size: 24,
),
),
),
],
),
),
),
);
}
I want to put the camera in the background and put other widgets (such as photo-taking-button) on top of it.
How do I reposition it into a container? At least under the App Bar?
Logically this should have worked, what i would suggest you try would be to first have a SafeArea widget.
SafeArea(
child: build(buildContext),
),
I had a similar issue in the past and using this solved it.
Also, there seems to be an open issue which seems related to this with the following possible solution :
With Flutter 2.10.5. it works without problems. This seems to be a Flutter 3 problem.
The way platforms views are rendered was changed in the 3.0 release.
probably same issue:
flutter/flutter#106246
explained here:
flutter/flutter#103630
I hope this will be fixed in new Flutter 3 releases soon.
And also this
I try the master channel Flutter v3.1.0-0.0.pre.1372 and the issue is fixed there.
Fixed will come to a stable channel soon with Flutter v3.1.0.
Also, I am not sure why are you using SizedBox as your parent widget.
Why not try a basic Container instead?
Good luck, Let me know if I can help with anything else
I would like to make the inkwell image button to be disabled. I can disable onTap event, but can't make gray like disabled button. I tried with adding this code
decoration: new BoxDecoration(color:Colors.grey.withOpacity(0.6)),
But it doesn't work as I want.
My code:
child: Container(
decoration:
new BoxDecoration(color: Colors.grey.withOpacity(0.6)),
child: Material(
//elevation: 4.0,
clipBehavior: Clip.none,
color: Colors.black,
child: Stack(
alignment: Alignment.center,
fit: StackFit.passthrough,
children: [
Ink.image(
image: AssetImage(ihaveheard_imagepath),
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width / 4 * 3,
height: MediaQuery.of(context).size.width / 6,
child: InkWell(onTap: () {}),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.all(8.0),
child: InkWell(
child: Text(
LocaleKeys.ihaveheard,
style: TextStyle(
fontSize:
MediaQuery.of(context).size.width / 30,
color: Colors.white),
).tr(),
onTap: () {
ihaveheard_imagepath =
"assets/images/greenbutton.png";
setState(() {});
},
),
),
)
],
),
),
),
child:
IgnorePointer(
ignoring: disableBtn, //true or false
child: Container(
foregroundDecoration: disableBtn
? BoxDecoration( //this can make disabled effect
color: Colors.grey,
backgroundBlendMode: BlendMode.lighten)
: null,
child: ...
You can use IgnorePointer as parent widget to prevent tab event.
IgnorePointer(
ignoring: disableBtn, //true, false
child: yourWidget()
You can pass null to decoration to show default based on tappable state
Container(
decoration: disableBtn? BoxDecoration(...): null,
.....
)
Does anyone know how to round the video corners in a video call? The container that I place them in has a border radius, but when the video starts it always shows a square container.
My video render code is below:
#override
Widget build(BuildContext context) {
return Stack(
children: [
_localSwitchRender == true
? rtc_local_view.SurfaceView()
: rtc_remote_view.SurfaceView(uid: widget.remoteUid.first),
Align(
alignment: Alignment.topLeft,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: GestureDetector(
onTap: _switchRender,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 42, 0, 0),
child: Stack(
children: [
Column(
children: [
const SizedBox(
height: 20
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Color(0x66333333),
),
width: 158,
height: 220,
foregroundDecoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: _localSwitchRender
? rtc_remote_view.SurfaceView(
uid: widget.remoteUid.first,
renderMode: VideoRenderMode.FILL,
)
: rtc_local_view.SurfaceView(
renderMode: VideoRenderMode.Hidden,
zOrderMediaOverlay: true,
),
),
],
),
],
),
),
),
),
),
],
);
}
}
Any help is greatly appreciated!
Place your widget inside ClipRRect:
ClipRRect(
borderRadius: BorderRadius.circular(10)
child: // your widget
)
Thanks Xoltwan! That worked:
ClipRRect(
borderRadius: BorderRadius.circular(10)
child: // your widget
)
I have a list view with horizontal scroll and i have added CupertinoContextMenu to the image.
everything is works fine but the action buttons are not aligned center.
I have added the code. I tried with wrap scaffold too. same issue still.
I have to align the action buttons under the image center posisiton.
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Center(child: _invoiceImageSlider()),
);
// Image Slider List
Widget _invoiceImageSlider(){
return Container(
height: 250,
padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
child: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
],
),
);
}
Widget _invoiceContextMenu(){
return Container(
child: CupertinoContextMenu(
child: Container(
child: _invoiceImage(),
),
previewBuilder: (BuildContext context, Animation<double> animation, Widget child) {
return FittedBox(
fit: BoxFit.cover,
child: ClipRRect(
borderRadius: BorderRadius.circular(64.0 * animation.value),
child: Image.asset('assets/invoices/'+_invoiceInfo.filename),
),
);
},
actions: <Widget>[
CupertinoContextMenuAction(
child: Row(
children: <Widget>[
Icon(
Feather.trash_2,
size: 25,
color: Colors.red,
),
SizedBox(width: 10),
Text("Delete")
]
),
onPressed: () {
Navigator.pop(context);
},
),
],
),
);
}
You can do so by centering the whole ContextMenu like this:
Align(
alignment: Alignment.center,
child: CupertinoContextMenu(),
)
Hope this helped. Cheers
hello I tried to make a geofencing responsive, I have a stack of google map url and a circle. this code is OK :
new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(staticMapUri.toString()),
),
new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.lightBlue.withOpacity(0.5),
),
child:
new AspectRatio(
aspectRatio: MediaQuery.of(context).size.longestSide/GPS2,
child :
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
),
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.location_on, color: Colors.white, size: 25.0),
),
],
),
),
But I search to replace GPS2 to be dynamics with slider value so here is the code :
new Slider(
value: valperimetre,
onChanged: (double e) => change(e),
activeColor: Colors.lightBlue,
inactiveColor :Colors.grey,
divisions: 10,
label: "$valperimetre""m",
max : 500.0,
min: 0.0,
),
new Card(
elevation: 2.0,
child: new Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
new Container(
child: new Image.network(staticMapUri.toString()),
),
new Container(
alignment: new FractionalOffset(0.0, 0.0),
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.lightBlue.withOpacity(0.5),
),
child:
new AspectRatio(
aspectRatio: MediaQuery.of(context).size.longestSide/valperimetre,
child :
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: new Container(
),
),
),
),
new Container(
//padding: const EdgeInsets.only(bottom:10.0),
margin: new EdgeInsets.all(140.0),
child : Icon(Icons.location_on, color: Colors.white, size: 25.0),
),
],
),
),
but currently I have this error :" if I rebuild the app normaly : failed assertion:line 399 pos 15:'aspectRatio.isFinite': is not true."
If I replace valperimetre by 100.0, after rebuild app, and after I replace 100.0 by valperimetre and I hotreload it's OK.
Try Putting this condition check inside your code.
//your code here
child:(valperimetre == 0.0 || valperimetre == null) ?
Container()
:new AspectRatio(
aspectRatio: MediaQuery.of(context).size.longestSide/valperimetre,
//your code here