create the square overlay above the camera
I have tried the sample project given in https://github.com/flutter/plugins/tree/master/packages/camera
https://github.com/flutter/plugins/blob/master/packages/camera/lib/camera.dartenter image description here
As of now, there is no built-in support for camera overlay in the library that you are using. I have created a widget that sits in the stack with CameraPreview that replicates the overlay.
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: Stack(fit: StackFit.expand, children: [
CameraPreview(_controller),
cameraOverlay(
padding: 50, aspectRatio: 1, color: Color(0x55000000))
]));
}
Widget cameraOverlay({required double padding, required double aspectRatio, required Color color}) {
return LayoutBuilder(builder: (context, constraints) {
double parentAspectRatio = constraints.maxWidth / constraints.maxHeight;
double horizontalPadding;
double verticalPadding;
if (parentAspectRatio < aspectRatio) {
horizontalPadding = padding;
verticalPadding = (constraints.maxHeight -
((constraints.maxWidth - 2 * padding) / aspectRatio)) /
2;
} else {
verticalPadding = padding;
horizontalPadding = (constraints.maxWidth -
((constraints.maxHeight - 2 * padding) * aspectRatio)) /
2;
}
return Stack(fit: StackFit.expand, children: [
Align(
alignment: Alignment.centerLeft,
child: Container(width: horizontalPadding, color: color)),
Align(
alignment: Alignment.centerRight,
child: Container(width: horizontalPadding, color: color)),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(
left: horizontalPadding, right: horizontalPadding),
height: verticalPadding,
color: color)),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(
left: horizontalPadding, right: horizontalPadding),
height: verticalPadding,
color: color)),
Container(
margin: EdgeInsets.symmetric(
horizontal: horizontalPadding, vertical: verticalPadding),
decoration: BoxDecoration(border: Border.all(color: Colors.cyan)),
)
]);
});
}
please use this package camera_camera
https://pub.dev/packages/camera_camera
api reference : https://pub.dev/documentation/camera_camera/latest/
github : https://github.com/gabulsavul/camera_camera
for code detail you need https://github.com/gabulsavul/camera_camera/blob/master/lib/page/camera.dart
As the package describe, you can add Rectangle , Circle or Square Focus
see code snippet below
Camera(
mode: CameraMode.normal,
imageMask: CameraFocus.rectangle(
color: Colors.black.withOpacity(0.5),
),
)
Related
I want each user to be stacked, neat as in the picture how can i make user assign look stacked? i want like this :
enter image description here
my result now :
enter image description here
my code :
Row(
children: List.generate(3, (index) {
return Column(
children: [
ClipRRect(
borderRadius:BorderRadius.circular(8),
child: Image.asset(
'asset/img/profile_photo.png',
width: 40,
height: 40,
),
),
],
);
}),
),
To make widgets stack on top of another, you need to use the Stack widget.
Stack(
children: List.generate(3, (index) {
return Padding(
padding: EdgeInsets.only(left: (index * 0.5) * 40), // distance from the left
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
'asset/img/profile_photo.png',
width: 40,
height: 40,
),
),
);
}),
),
Of course you need to use Stack to make everything looks stacked, not Row. You can use something like this:
#override
Widget build(BuildContext context) {
const WIDTH = 80.0;
return Scaffold(
body: Center(
child: Stack(
children: List.generate(7, (index) {
return Positioned(
left: (WIDTH - 30) * index,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(color: Colors.black, width: 1.0*index),
),
width: WIDTH,
height: 40.0,
child: Text(index.toString()),
),
);
})),
),
);
}
Result:
Remember to calculate distance carefully. I use Positioned and calculate left distance = (WIDTH - 30) * index. It is kinda same as your images, just adjust few things, then OK. Good luck!
This is how i usually do stacked widgets like that. try it out
Stack(
clipBehavior: Clip.none,
children: [
for (var i = 0; i < yourList.length; i++)
Container(
//* you can adjust the margin here base on your desired output
margin: EdgeInsets.only(left: 12 * i.toDouble()),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
'asset/img/profile_photo.png',
width: 40,
height: 40,
),
),
),
]),
I'm trying to achieve the skeleton view as shown in the attachment but couldn't get it exactly like shown, i have tried Shimmer package, the problem is gradient or mask width is more. Kindly help with sample for to achieve the same.
Used the shimmer: ^2.0.0
My ListView
return Padding(
padding: const EdgeInsets.only(top: 16),
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ShimmerItem();
},
itemCount: 10,
),
);
ShimmerItem Widget:
class ShimmerItem extends StatelessWidget {
const ShimmerItem({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Theme.of(context).cardTheme.color,
child: Container(
margin: EdgeInsets.only(left: 16, bottom: 8, top: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(right: 32.0),
child: ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.9,
)),
Padding(
padding: const EdgeInsets.only(right: 32.0, top: 8),
child: ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.6,
),
),
Padding(
padding: const EdgeInsets.only(top: 16, bottom: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.4,
),
SizedBox(
width: 10,
),
ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.4,
),
],
),
),
],
),
),
);
}
}
ShimmerWidget Class:
class ShimmerWidget extends StatelessWidget {
final double width;
final double height;
final ShapeBorder shapeBorder;
const ShimmerWidget.rectangular(
{this.width = double.infinity, required this.height})
: this.shapeBorder = const RoundedRectangleBorder();
const ShimmerWidget.circular(
{this.width = double.infinity,
required this.height,
this.shapeBorder = const CircleBorder()});
#override
Widget build(BuildContext context) => Shimmer.fromColors(
baseColor:
ColorHelper.colorWithTransparency(AppColors.shimmer_bg_color,
100),
highlightColor:
ColorHelper.colorWithTransparency(AppColors.shimmer_color_dark,
20),
period: Duration(milliseconds: 1500),
child: Container(
width: width,
height: height,
decoration: ShapeDecoration(
color: AppColors.shimmer_bg_color,
shape: shapeBorder,
),
),
);
}
We can use LayoutBuilder for measurement, which is depending on parent size and perfect for this case.
To struct the same UI, I am just constructing the ShimmerItem widget, rest of widget will be same.
To get rounded border I am using ClipRRect with providing borderRadius.
Padding to control the sounded spacing and SizedBox to provide space on Column's children.
Used Row's mainAxisAlignment: MainAxisAlignment.spaceBetween,to separate last two shimmer widgets.
Resource about layout-basics.
class ShimmerItem extends StatelessWidget {
const ShimmerItem({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final _border = BorderRadius.circular(12);
final double _bHeight = 24;
return LayoutBuilder(
builder: (context, constraints) => Padding(
padding: const EdgeInsets.all(12.0), //outside the card
child: Container(
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
color: Colors.grey,
),
padding: const EdgeInsets.all(8), // inner padding
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//* top large two
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight,
width: constraints.maxWidth,
),
),
const SizedBox(height: 8),
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight * .75,
width: constraints.maxWidth,
),
),
const SizedBox(height: 8),
//3rd row
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight * .75,
width: constraints.maxWidth * 0.6,
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight,
width: constraints.maxWidth * 0.4,
),
),
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight,
width: constraints.maxWidth * 0.4,
),
),
],
),
],
),
),
),
);
}
}
I am using demo color.
You need wrap all your child inside 1 bigger Shimmer wrapper to do that, not Shimmer on every small retangle.
I have project code for this in my laptop but im working afar, sorry.
I'm creating a online shop store, at the moment I have basically finished most of it. Currently I'm developing the credit card animation, althought I had some problems with the text. I had problems when rotating it, it semmed it has to be rotated in 180 degres.
The back of my card is showing the number the wrong format.
This is how I set up the main page:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:loja_virtual_nnananene/screens/checkout/card/card_back.dart';
import 'package:loja_virtual_nnananene/screens/checkout/card/card_front.dart';
class CardTile extends StatefulWidget {
#override
_CardTileState createState() => _CardTileState();
}
class _CardTileState extends State<CardTile> {
double horizontalDrag = 0;
#override
Widget build(BuildContext context) {
return GestureDetector(
onHorizontalDragUpdate: (horizontal) {
setState(() {
horizontalDrag += horizontal.delta.dx;
horizontalDrag %= 360;
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.0001)
..rotateY(pi / 180 * horizontalDrag),
alignment: Alignment.center,
child: Container(
margin: EdgeInsets.fromLTRB(16, 10, 16, 16),
width: 240,
height: 240,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
gradient: LinearGradient(
colors: [Color(0xff323232), Color(0xff000000)],
begin: Alignment.topLeft,
end: Alignment.bottomRight)),
child: horizontalDrag <= 90 || horizontalDrag >= 270
? CardFront()
: CardBack(),
),
),
);
}
}
The card back:
import 'package:flutter/material.dart';
class CardBack extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(top: 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: 50,
color: Colors.grey[700],
),
SizedBox(
height: 10,
),
Container(
margin: EdgeInsets.fromLTRB(0, 0, 20, 0),
height: 40,
width: 220,
color: Colors.grey[700],
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text('123'.split('').reversed.join('')),
)),
),
],
),
);
}
}
You could just rotate the entire back of the card. You can wrap the root Container in CardBack with a Transform, and flip it, or just transform CardBack.
Transform(
alignment: FractionalOffset.center,
transform: Matrix4.identity..rotateY(pi),
child: CardBack(),
),
i want to display camera in half screen to capture the photo but i try to give height and aspect ratio but none of them is working here is code what i've tried. Camera is still opening in full screen
I am using this camera lib
Widget _camera() {
return Container(
height: MediaQuery.of(context).size.height / 2, // This is the height not working
child: Stack(
alignment: Alignment.topCenter,
children: [
Container(
child: AspectRatio(
aspectRatio: 16 / 9, //this is also not working
child: CameraPreview(_cameraController),
),
),
// This is to draw a rectangle on a camera
Container(
margin: const EdgeInsets.only(top: 16),
width: MediaQuery.of(context).size.width - 16,
height: MediaQuery.of(context).size.height / 2.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(color: KpColors.whiteColor),
),
),
],
),
);
}
you can change the ratio by using scale, this article:
Map<String, double> ratios = {
'1:1': 1 / 1,
'9:16': 9 / 16,
'3:4': 3 / 4,
'9:21': 9 / 21,
'full': MediaQuery.of(context).size.aspectRatio,
};
final size = MediaQuery.of(context).size;
print('screen ratio: ${size.aspectRatio}, default: $_defaultRatio');
return Transform.scale(
scale: 1.0,
child: AspectRatio(
aspectRatio: _defaultRatio,
child: OverflowBox(
alignment: Alignment.center,
child: FittedBox(
fit: size.aspectRatio >= _defaultRatio
? BoxFit.fitHeight
: BoxFit.fitWidth,
child: Container(
width: size.aspectRatio >= _defaultRatio
? size.height
: size.width,
height: size.aspectRatio >= _defaultRatio
? size.height / controller.value.aspectRatio
: size.width / controller.value.aspectRatio,
child: Stack(
children: <Widget>[
CameraPreview(controller),
],
),
),
),
),
),
);
I am looking forward to create a UI in flutter with sliding animation between the images.
As shown in image I want the 1st to image slide left and image at the back to come i front
Code
class CardScrollWidget extends StatelessWidget {
var currentPage;
var padding = 5.0;
var verticalInset =22.0;
CardScrollWidget(this.currentPage);
#override
Widget build(BuildContext context) {
return new AspectRatio(
aspectRatio: widgetAspectRatio,
child: LayoutBuilder(builder: (context, contraints) {
var width = contraints.maxWidth;
var height = contraints.maxHeight;
var safeWidth = width - 2 * padding;
var safeHeight = height - 1 * padding;
var heightOfPrimaryCard = safeHeight;
var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;
var primaryCardLeft = safeWidth - widthOfPrimaryCard;
var horizontalInset = primaryCardLeft / 2;
List<Widget> cardList = new List();
for (var i = 0; i < images.length; i++) {
var delta = i - currentPage;
bool isOnRight = delta > 0;
var start = padding +
max(
primaryCardLeft -
horizontalInset * -delta * (isOnRight ? 15 : 1),
0.0);
var cardItem = Positioned.directional(
top: padding + verticalInset * max(-delta, 0.0),
bottom: padding + verticalInset * max(-delta, 0.0),
start: start,
textDirection: TextDirection.rtl,
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(3.0, 6.0),
blurRadius: 10.0)
]),
child: AspectRatio(
aspectRatio: cardAspectRatio,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(images[i], fit: BoxFit.cover),
Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(
horizontal: 16.0, vertical: 8.0),
child: Text(title[i],
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
)),
),
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(
left: 12.0, bottom: 20.0),
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 22.0, vertical: 6.0),
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20.0)),
child: Text("Read Later",
style: TextStyle(color: Colors.white)),
),
)
],
),
)
],
),
),
),
),
);
cardList.add(cardItem);
}
return Stack(
children: cardList,
);
}),
);
}
}
This is often called a 'carousel effect' in UI design. There are multiple packages which seem to already solve what you are trying to do. E.g. the following:
https://pub.dev/packages/carousel_slider
https://pub.dev/packages/flutter_multi_carousel
https://pub.dev/packages/flutter_mobile_carousel
For more alternatives check out:
https://pub.dev/packages?q=carousel