I have this video calling Application I am working on. Everything seems to be falling in place. I have a small issue with one UI effect I am trying to implement.
So here is the situation:
When on a live call, like on messenger or any other video calling application, I want user 0, to be able to drag and place their video frame at different positions in the screen.
I tried this using flutter draggable:
/// Video 0 View Customization to include draggable effect
Offset? position;
double prevScale = 1;
double scale = 1;
void updatePosition(Offset newPosition) =>
setState(() => position = newPosition);
ValueNotifier<Offset?> positionNotifier = ValueNotifier(null);
/// Video layout wrapper
Widget _viewRows() {
final views = _getRenderViews();
switch (views.length) {
case 1:
return Container(
child: Column(
children: <Widget>[_videoView(views[0])],
));
case 2:
return Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
_expandedVideoRow([views[1]]),
Positioned(
left: position == null
? MediaQuery.of(context).size.width / 1.5
: position!.dx,
top: position == null ? 50 : position!.dy,
child: Draggable(
maxSimultaneousDrags: 1,
feedback: Transform.scale(
scale: scale,
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
width: MediaQuery.of(context).size.width / 3.2,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: _expandedVideoRow([views[0]]))),
),
childWhenDragging: Opacity(
opacity: .3,
child: Transform.scale(
scale: scale,
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
width: MediaQuery.of(context).size.width / 3.2,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: _expandedVideoRow([views[0]]))),
),
),
onDragEnd: (details) => updatePosition(details.offset),
child: Transform.scale(
scale: scale,
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
width: MediaQuery.of(context).size.width / 3.2,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: _expandedVideoRow([views[0]]))),
),
),
),
],
));
default:
}
return Container();
}
These is then displayed in another main stack: #override
Widget build(BuildContext context) {
Stack(
fit: StackFit.expand,
children: [
if (widget.calltype == 'videocall') ...[
child: _viewRows(),
]
...
Is there any better way to attain this UI Draggable effect?
You can use this widget to make it draggable
https://pub.dev/packages/draggable_widget
Related
I want to add background that has circle like picture below:
And in my Figma, has asset like this:
And my code is like this:
Widget buildArea(int index) => Card(
color: ColorName.brandSecondaryBlue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Container(
padding: const EdgeInsets.only(top: 20, bottom: 20),
child: buildAreaItem(),
),
);
Anyone else who know how to add it?
May not be a clean way but try Using a Stack widget and use Positioned widget inside.
Here's a sample for what you are trying to achieve.
Scaffold(
body: Center(
child: Stack(
children: [
Container(
width: 300,
height: 150,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(20)
),
),
Positioned(
left: -50,
top: -35,
child: Stack(
alignment: AlignmentDirectional.center,
children:
[
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(100)
),),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(100)
),),
]
))
],
),
)
)
Try This Code:
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:ui';
import 'package:google_fonts/google_fonts.dart';
import 'package:myapp/utils.dart';
class circlescreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
double baseWidth = 428;
double fem = MediaQuery.of(context).size.width / baseWidth;
double ffem = fem * 0.97;
return Container(
width: double.infinity,
child: Container(
// iphone13promax1auq (1:2)
width: double.infinity,
decoration: BoxDecoration (
color: Color(0xff3241a0),
borderRadius: BorderRadius.circular(20*fem),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
// ellipse1hmV (1:4)
margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 237*fem, 272*fem),
width: 318*fem,
height: 318*fem,
decoration: BoxDecoration (
borderRadius: BorderRadius.circular(159*fem),
border: Border.all(color: Color(0xff3c4baf)),
),
),
Container(
// ellipse3jCP (1:6)
margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 0*fem, 113*fem),
width: 198*fem,
height: 198*fem,
decoration: BoxDecoration (
borderRadius: BorderRadius.circular(99*fem),
border: Border.all(color: Color(0xff3c4baf)),
),
),
Container(
// ellipse2oi3 (1:5)
margin: EdgeInsets.fromLTRB(0*fem, 0*fem, 205*fem, 0*fem),
width: 318*fem,
height: 318*fem,
decoration: BoxDecoration (
borderRadius: BorderRadius.circular(159*fem),
border: Border.all(color: Color(0xff3c4baf)),
),
),
],
),
),
);
}
}
export your figma component with the just the background( purple with circles).
Then add that in assets and use it in the child of Card. So your widget tree would be :
Card
=>
Container( //with background decoration as image and necessary padding if any
)
=>
buildAreaItem()
You can also crop the image to get just the top corner ring or play with the fit property in DecorationImage widget.
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 want to have more(in this example 4) items in Row. I tried use Expanded or Flexible or mainAxisAlignment: MainAxisAlignment.spaceEvenly to fill up all width of screen. But I want to heve items lets say specific width and height 50 pixels, and GestureDetector which is around item to be 1/4 of screen(4 items = full width). So everywhere I tap in the row something will be selected. My problem is that every my solution deforms items(circles) or circle must be very huge to width = height to not be deformed.
I also tried wrapping whole _ratingEmoji in Expanded and giving ratingItem.ratingIndicator constraints to max width but with same result.
Row of items:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
for (var ratingItem in editGroceryRatingProvider.foodRatings)
_ratingEmoji(editGroceryRatingProvider, ratingItem, context),
],
),
Item:
Widget _ratingEmoji(EditGroceryRatingProvider editGroceryRatingProvider,
SelectedFoodRating ratingItem, BuildContext context) {
return GestureDetector(
child: ratingItem.selected
? Container(
width: MediaQuery.of(context).size.width / 8,
height: MediaQuery.of(context).size.width / 8,
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF312ADB),
width: 3.0,
),
borderRadius: BorderRadius.circular(32.0)),
child: Center(
child: ratingItem.ratingIndicator,
),
)
: ratingItem.ratingIndicator,
onTap: () => editGroceryRatingProvider.updateSelectedRating(ratingItem),
);
}
RatingIndicator which is "circle" item to be on the screen:
Container(
decoration: BoxDecoration(
border: Border.all(
color: color,
width: 1.5,
),
borderRadius: BorderRadius.circular(64.0),
),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 3.0,
),
borderRadius: BorderRadius.circular(64.0),
),
child: ClipOval(
child: Container(
width: width ?? MediaQuery.of(context).size.width / 7,
height: height ?? MediaQuery.of(context).size.width / 7,
color: color,
),
),
),
);
Thanks a lot.
Update:
Items should stay as they are on screenshot, but "whole" row should be clickable(means even if you click between 2 items, one closer to click should be selected)
Check, please solution.
The whole area is clickable. You just need to add your item instead of mine.
#override
Widget build(BuildContext context) {
final colors = [Colors.red, Colors.blue, Colors.brown, Colors.cyan];
return Scaffold(
body: Container(
alignment: Alignment.center,
color: const Color(0xffFAFAFA),
child: Row(
children: List.generate(
colors.length,
(index) => Expanded(
child: GestureDetector(
onTap: () => print('Tapped:$index'),
child: Container(
height: 50,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colors[index],
),
),
)),
)),
),
),
);
I want to open new page when I swipe the circle in the middle of the screen. that is when I swipe blue circle left a new page should open and when I swipe right another new page should open.
Similarly when I swipe pink circle bottom another new page should open
Here is my code:
import 'package:flutter/material.dart';
class FirstRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 300.0,
width: 150.0,
child: Stack(
children: <Widget>[
Positioned(
top: 25,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.lightBlue,
),
),
),
Positioned(
bottom: 25,
child: Opacity(
opacity: 0.45,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.pinkAccent,
),
),
),
),
],
),
),
),
);
}
}
wrap Positioned() with SwipeDetector() Widget
Have a look at this example
SwipeDetector(
onSwipeRight: () {
//push new page
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new YourNewPage()));
},
child: //Your circle here
Positioned(
top: 25,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.lightBlue,
),
),
),
)
My Home Page screen is not responsive at different size of the screens.
It got overlapped on other widgets.
I used MediaQuery.
How to resove this issue?
IOS Device
Android device
Code:
Size get size => Size(MediaQuery.of(context).size.width * 0.8,
MediaQuery.of(context).size.width * 0.8);
double _rotote(int index) => (index / widget.items.length) * 2 * pi;
build method:
Center(
child: Container(
// alignment: Alignment.center,
height: size.height/1.1,
width: size.width/1.1,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 20, color: Colors.black38)],
//border: Border.all(color: Colors.black)
),
child: Transform.rotate(
angle: -(widget.current + widget.angle) * 2 * pi,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
for (var luck in widget.items) ...[_buildCard(luck)],
for (var luck in widget.items) ...[_buildImage(luck)],
],
),
),
),
);
WHEEL CARD:
_buildCard(Luck luck) {
var _rotate = _rotote(widget.items.indexOf(luck));
var _angle = 2 * pi / widget.items.length;
return Transform.rotate(
angle: _rotate,
child: ClipPath(
clipper: _LuckPath(_angle),
child: Container(
height:size.height/1.1,
width: size.width/1.1,
decoration: BoxDecoration(
// border: Border.all(color: Colors.black),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [luck.color, luck.color])),
),
),
);
}
IMAGE ON WHEEL
_buildImage(Luck luck) {
var _rotate = _rotote(widget.items.indexOf(luck));
return Transform.rotate(
angle: _rotate,
child: Container(
height: size.height,
width: size.width,
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints:
BoxConstraints.expand(height: size.height / 3, width: 44),
child: Image.asset(luck.asset),//Image.asset("asset/image/wheel.png")
),
),
);
}
}
These above methods are defined in a StatefulWidget class BoardView.dart
HomePage.dart
Center(
child: Column(
children: <Widget>[
ArrowView(),// for upper arrow
Stack(
alignment: Alignment.center,
children: <Widget>[
BoardView(items: _items, current: _current, angle: _angle),
_buildSpin(),
],
),
_buildResult(_value),
],
),
);
_buildSpin
_buildSpin() {
return Material(
color: Colors.white,
shape: CircleBorder(),
child: InkWell(
customBorder: CircleBorder(),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
color: Colors.blue,
borderRadius: BorderRadius.circular(80)
),
height: 70,
width: 70,
child: Text(
"SPIN",
style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold, color: Colors.white),
),
),
onTap: (){},
),
);
}
I think you can have a look at this package. I have used it on one of my projects and it really makes life easy when dealing with different screens from mobile to tablets.
you can use FractionallySizedBox with widthFactor or heightFactor, see: https://www.youtube.com/watch?v=PEsY654EGZ0
and for orientation you can wrap your widget with OrientationBuilder: https://flutter.dev/docs/cookbook/design/orientation