I want to clip a container in such a way like below image
I have read about a couple of clip but don't know how to achieve this.
I have tried implementing clipping using..
Container(
width: 300,
height: 300,
color: Colors.white,
child: ClipRRect(
child: Stack(
///clipBehavior: Clip.hardEdge,
children: [
Positioned(
left: 0,
top: 0,
child: Transform.rotate(
angle: 1,
child: Container(
color: Colors.red,
width: 250,
height: 250,
),
),
),
],
),
),
);
I have found a way to do this using CustomClipper
Related
I am trying to put Container color as Stack above circle avatar but the problem is that color go out the circle borer
I have the following code,
IntrinsicWidth(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
const CircleAvatar(
radius: 50,
),
Container(
color: Colors.yellowAccent,
height: 30,
)
],
),
)
I get the following output
But I need the output looks like following
How Can I prevent my color from expanding to the circle width
thanks
try this:
CircleAvatar(
backgroundColor: Colors.yellow,
radius: 100,
child: Container(
alignment: Alignment.bottomCenter,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(shape: BoxShape.circle),
child: Container(
height: 40,
width: double.infinity,
color: Colors.red,
),
),
)
This is the screen that I want to create:
As you can see I have got two photo in the center, how can I move this background pink image in the top left corner?
Here's a link to my full code https://pastebin.com/CwgsPx4a
children: <Widget> [
SizedBox(
height: 250,
child: Image.asset(
"assets/logo.png",
fit: BoxFit.contain,
)
),
SizedBox(
child: Image.asset(
"assets/top.png",
fit: BoxFit.contain,
)
),
Code:
Column(
children: [
// fake top image
Align(
alignment: Alignment.topLeft,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
const SizedBox(height: 50),
// fake logo
Container(
width: 100,
height: 100,
color: Colors.blue,
),
// fake other widgets
const SizedBox(height: 16),
Container(
width: 200,
height: 30,
color: Colors.green,
),
const SizedBox(height: 16),
Container(
width: 200,
height: 30,
color: Colors.green,
),
],
);
Result:
floating image
Container(
clipBehavior: Clip.none,
child: Stack(
fit: StackFit.passthrough,
children: <Widget>[
//Stack helps to overlap widgets
Positioned(
top: 80,
left: 50, //position of the widget
child: Container(
clipBehavior: Clip.none,
// height: 250,
// width: 250,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange
.withOpacity(0.5) //background color with opacity
),
child: Image.asset("assests/FT300.png"),
),
),
Positioned(
left: -80,
top: -50,
child: Container(
height: 180,
width: 220,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.redAccent.withOpacity(0.5),
),
),
),
Positioned(
//main content container postition.
child: Container(
height: 250,
alignment: Alignment.center,
child: Text(
"Stacked Containers Together",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
)
],
),`
I would like to make the picture floating outside its container as shown in the picture I have tried to use a stack widget with
Clipbehaviour.none
but the picture still appears inside the container.
Is there anybody who has encountered this or have a solution to this?
Thanks
if you need the widget to be part of outside Stack, you need this:
Stack(
overflow: Overflow.visible,
children:
As the overflow is deprecated, the first solution to the given snippet is
Stack(
clipBehavior: Clip.none,
children:
Full snippet update:
Container(
clipBehavior: Clip.none,
color: AppRepoColors().appRedColor(),
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
//Stack helps to overlap widgets
Positioned(
top: 0,
left: 50, //position of the widget
child: Container(
clipBehavior: Clip.none,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange
.withOpacity(0.5) //background color with opacity
),
child: Image.asset("assests/FT300.png"),
),
),
Positioned(
left: -80,
top: -50,
child: Container(
height: 180,
width: 220,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.redAccent.withOpacity(0.5),
),
),
),
Positioned(
//main content container postition.
child: Container(
height: 250,
alignment: Alignment.center,
child: Text(
"Stacked Containers Together",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
)
],
),
),
How put orange container full width?
I'm try with double.infinity but get error BoxConstraints forces an infinite width.
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
height: 205,
color: Colors.grey,
//margin: EdgeInsets.symmetric(vertical: 20),
child: Stack(
children: [
Positioned(
left: 0,
bottom: 0,
child: Container(
height: 185,
width: 350, //double.infinity --not working
color: Colors.deepOrange,
),
),
Positioned(
right:0,
top:0,
child: Image.asset('assets/images/book-1.png',width: 150,),
),
],
),
)
You can use MediaQuery.of(context).size.width for full screen width of Container widget.
I have a Column of 3 Containers, with the middle one transformed by rotating it back a bit.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
width: 100,
color: Colors.green,
),
Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateX(pi / 3),
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
Container(
height: 100,
width: 100,
color: Colors.green,
)
],
),
Since Transform will use the height of its child, the middle item is now left with some top and bottom space. Is there any way to get rid of it?
One way I figured out is to use a SizedOverflowBox.
A widget that is a specific size but passes its original constraints
through to its child, which may then overflow.
By using this, the Column will think that the middle Container's size is smaller than it actually is.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
width: 100,
color: Colors.green,
),
SizedOverflowBox(
size: Size(100, cos(pi/3) * 100),
child: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateX(pi / 3),
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
),
Container(
height: 100,
width: 100,
color: Colors.green,
)
],
),