ive been trying to design this with custom painter or custom clipper, especially the curved bottom, can anyone help me?
If you want to design your own shape you can use https://fluttershapemaker.com/
I did something similar but with 3 zones. This widget works, you can personalize like you want:
Widget _getColumnColor(
{Color color1,
Color color2,
Color color3,
double radius,
Widget content1,
Widget content2,
Widget content3}) {
return Column(
children: [
Expanded(
flex: 2,
child: Stack(
children: [
Container(
color: color2,
),
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
color: color1,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(radius),
),
),
child: content1,
),
],
)),
Expanded(
flex: 1,
child: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
color: color1,
)),
Expanded(child: Container(color: color3))
],
),
Container(
decoration: BoxDecoration(
color: color2,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomRight: Radius.circular(radius),
),
),
width: double.infinity,
height: double.infinity,
child: content2,
),
],
)),
Expanded(
flex: 1,
child: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
color: color2,
)),
Expanded(child: Container(color: color3))
],
),
Container(
decoration: BoxDecoration(
color: color3,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomRight: Radius.circular(radius),
),
),
width: double.infinity,
height: double.infinity,
child: content3,
),
],
)),
],
);
}
Color1, color2 and color3 are zones colors, radius is the radius of corners and content1, content2 and content3 are the contents inside of three zones.
Related
here is the example screen of I'm trying to achieve, i tried several ways, even there is lot of Stack over flow answer outside, but that's not fixing this cause .
here is the example
what my output is here
how can I achieve this, also here is my code
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: sLinearColorBlue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Positioned(
height: 555,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Image.asset('assets/account.jpg'),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
],
),
)
],
);
Try wrapping the Row() within a Center() widget:
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: sLinearColorBlue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Positioned(
height: 555,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Image.asset('assets/account.jpg'),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
),
],
),
)
],
);
Put row inside padding. Like below.
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.blue,
Colors.red,
],
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
),
Padding(
padding: EdgeInsets.fromLTRB(
0,
(MediaQuery.of(context).size.width / 2 + 145) - (60 * 2),
0,
0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Positioned(
height: 555,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Container(color: Colors.grey),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
)
],
),
)
],
);
Try below code
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 30),
child: Container(
width:300,
height: 300,
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 Data'),
],
),
),
),
),
),
Container(
height: 90,
width: 90,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black12,
),
color: Colors.transparent,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
),
],
),
Your Screen->
// try align widget
Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.width / 2 + 145,
child: Stack(
children: [
Container(
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30))),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(),
Align(
alignment: Alignment.bottomCenter,
child: CircleAvatar(
radius: 60.0,
child: ClipRRect(
child: Image.asset('assets/account.jpg'),
borderRadius: BorderRadius.circular(100.0),
),
),
),
],
),
],
),
)
],
);
I have simple screen that contains of 2 widget and I wrap it using Column, but there is always small space between first widget and second widget. Is there a way to remove space in Column. here is the picture that I would like to remove the space:
and here is the code:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: cardWidth,
height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...
],
),
),
),
),
),
Container(
width: sizeWidth - 135,
height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: noteAuth,
border: Border.all(
color: noteAuth,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
),
Your parent layout color and container color are both same then you use card and give padding and it takes some space.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
Container(
width: double.infinity - 135,
// height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.green,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
)
Output:
edit the margin of the Card widget
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
margin: EdgeInsets.all(0), //************* Here ********************
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
mainAxisAlignment: MainAxisAlignment.center
Someone knows how to do soft border radius, something like that :
Is it even possible with Flutter, I can't find how.
You can achieve this by using the borderRadius property of the decoration inside a Container.
For example:
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.elliptical(20, 10)),
),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
],
),
will yield this result
on the other hand, if you want to have a different color for the border, you can try this, setting the color in the border property of the decoration property in the Container:
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
border: Border.all(
color: Colors.red,
),
),
child: Center(
child: Text('Content...'),
),
),
],
),
),
the result for this is
You can use ClipRect.
ClipRRect(
// Change border radius and type(.zero, .roundrect, or absolute values) to get your desired effect
borderRadius: BorderRadius.circular(8.0),
child: Container(color: Colors.grey),
)
I am trying to do this card. But I don't know how to the green shape part. Any suggestions?
Inside a row create a container and give it DecorationBox and some radius to upper and bottom left corners and a second child as text. You can modify the following example code according to your needs.
Container(
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
height: 20,
width: 20,
),
Text('data'),
],
)),
Exactly how I want it.
class NotificationBanner extends StatelessWidget {
final Radius radius = Radius.circular(10.0);
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
Container(
height: 100,
width: 8,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: radius,
bottomLeft: radius,
),
),
),
Expanded(
child: Container(
height: 100,
decoration: BoxDecoration(
color: kLightBlack,
borderRadius: BorderRadius.only(
topRight: radius,
bottomRight: radius,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Some pretty message',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 20.0),
),
),
)),
),
],
),
);
}
}
I am trying to move the red block to the right of the Container. I have tried many variations but no matter where I move the code, that "red container" bit, I cannot get it to the position on the top right. I will make it a clickable icon when I get the positioning right.
I did move it into the children Widget with the other Text, adjusted the "crossAxisAlignment to stretch in that row, and mainAxisAlignment to spaceBetween,"
The closest I have is the 2nd image which is the code added below.
What am I missing?
items.add(
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(object["personImage"],
width: 80,height: 80,fit: BoxFit.cover,
),
),
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)
],
),
),
);
},
);
return items;
Edit: So two solutions that worked out great. Adding a widget between blue and red containers. Thanks to you both: :)
T.T Sage » Spacer(),
Viren V Varasadiya » Expanded(child: Container()),
You can use a widget called Spacer() for this.
The Spacer widget takes up space that isn't used by the rest of your widget. Check the code below, it works fine:
items.add(
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(object["personImage"],
width: 80,height: 80,fit: BoxFit.cover,
),
),
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
// add your spacer widget here
Spacer(),
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)
],
),
),
);
},
);
return items;
I hope this answers your question.
You need to use Expanded widget to do so.
In following code i show how to add Expanded widget and where yo add.
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
Expanded(child: Container()), // added widget
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)