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,
),
),
)
],
),
),
Related
how to create this with flutter ? please let me knw how to create like this category section using flutter because i want to create like this
i tried but i couldn't get the correct layout for that this is what i tried
Stack(children: [
Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xffCBCACD),
borderRadius: BorderRadius.circular(12),
),
width: 150,
height: 100,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Text(
indexCatName,
style: TextStyle(
fontWeight: FontWeight.bold),
),
Positioned(
top: 70,
left: 110,
child: Image(
width: 80,
image: NetworkImage(
'https://pizzafactory.lk/wp-content/uploads/2017/08/Pizza-Pollo-Alla-Diavola-300x300.png'),
),
),
],
)),
]);
Maybe like this :
Widget _test() {
return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Color(0xffCBCACD),
borderRadius: BorderRadius.circular(12),
),
width: 150,
height: 100,
child: Stack(children: [
Positioned(
top: 20,
left: 15,
child: Text(
'123',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Positioned(
bottom: -30,
right: -15,
child: Image(
width: 100,
image:
NetworkImage('https://pizzafactory.lk/wp-content/uploads/2017/08/Pizza-Pollo-Alla-Diavola-300x300.png'),
),
),
]),
);
}
This is my first time here
I face a little problem which is the image that I wanted to put on top of the card do not work properly, the rest of it didn't display
I used (stack & positioned)
What should I do ??
Note : I'm beginner 👀
this is the code :
SizedBox(
width: 500,
height: 100,
child: Container(
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Card(
color: Colors.grey.shade400,
child: Stack(children: [
Positioned(
bottom: 40,
left: 150,
child: CircleAvatar(
child: ClipOval(
child: Image.asset(
"assets/images/guy.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
backgroundColor: Colors.transparent,
radius: 50,
),
),
]),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 10),
),
)),
and this is the the output :
enter image description here
and i wanted to be like this : enter image description here
if you want like that, then you need to put SizedBox and add size (height and or width) on it it acts as invicible widget to put space on it.
Stack
--Positioned (top 0)
----Column
------SizedBox (add height here around 50x50 px)
------Image (100x100 px)
--Card
Try below code hope its helpful to you. refer for thar Stack class here
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10),
child: Container(
height: 320,
width: 420,
margin: EdgeInsets.all(16.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Your Other Widgets',
),
],
),
),
),
),
),
Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(1),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/images/1.png',
),
),
),
),
),
)
],
),
Your Result screen->
I want to make a custom container/card that looks like:
How can I achieve overlapping/overlaying layout in flutter?
Use the Stack widget & the Positioned widget that helps to put the widgets where ever you want inside the stack
Code:
Container(
width: 135.0,
height: 80.0,
margin: EdgeInsets.only(right: 5.0),
child: Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 110.0,
height: 150.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(left: 15.0, bottom: 20.0),
child: Text(
text,
style: TextStyle(
fontSize: 15.0,
fontFamily: 'PlayfairDisplay',
color: kInactiveSearchPageTextColor,
),
),
),
),
),
),
Align(
alignment: Alignment.topLeft,
child: Image.asset(
image,
width: 110,
height: 110,
),
),
Positioned(
top: 162,
left: 90,
child: Container(
width: 41.0,
height: 41.0,
child: RawMaterialButton(
fillColor: Colors.white,
shape: CircleBorder(),
elevation: 12.0,
child: Icon(
Icons.add,
color: kActiveSearchPageButtonColor,
),
onPressed: onPressed,
),
),
),
],
),
);
How to create Row with two containers with centered image and text above image also centered.
Like in image attached.
enter image description here
Is this what you are trying to do:
class ExampleDesign extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 180,
padding: EdgeInsets.symmetric(
horizontal: 5,
),
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
SizedBox(
width: 20,
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
],
),
),
);
}
}
OUTPUT:
I hope this answers your question.
Create a widget using this post How to to display text over the images in Flutter? which returns an image above and a text below, Wrap two of these widgets using a Row. That should work.
I'm trying to make a card with "balloon" in top of card Here a example of what i'm trying to do
I'm doin'g in Flutter, the last update, i've tried add stack with positioned, but i got this horrible thing
My code about this is:
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration:
BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
),
Positioned(
left: 19,
top: 37,
child: Container(
height: 20,
width: 20,
color: Colors.green,
),
),
],
),
Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
)
],
);
And my expected response was the link above
Please try this :-
Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration: BoxDecoration(
color: Colors.redAccent, shape: BoxShape.circle),
),
Container(
height: 40,
width: 2,
color: Colors.green,
),
],
),
),
Container(
width: double.infinity,
child: Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
),
)
],
)