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),
),
),
)),
),
],
),
);
}
}
Related
I try to create using stack and other container but I am getting normal line.
You can try to make the color of the Container transparent and make the background color of the Scaffold instead.
That way the line of the container will disappear.
This code is just for the demo you will need to update it as per your requirement :
Scaffold(
body: Center(
child: Column(
children: [
SizedBox(height: 50),
Container(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.circular(30),
),
),
Container(
height: 100,
width: double.infinity,
color: Colors.blueGrey,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 100,
width: Get.width * 0.43,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(20),
topRight: Radius.circular(20),
),
color: Colors.white,
),
),
Icon(Icons.calendar_month),
Container(
height: 100,
width: Get.width * 0.43,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
topLeft: Radius.circular(20),
),
color: Colors.white,
),
),
],
),
),
Container(
height: 50,
width: 350,
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.circular(30),
),
),
],
),
),
);
How do I achieve two boxes in one row while one of them has a triangle and lay over the other box, grey box over white box on flutter as in the image below? I am new to flutter and am clueless on how to get started on this, I tried with my code but I was able to do two boxes with the same size, if I added width to container it doesn't work.
this is what I want to do simillar
my work
child:Column(children: [
Row(children: [
Flexible(
child:Container(
height: 50,
padding: EdgeInsets.symmetric(
horizontal: 2,
vertical: 2,
),
decoration: BoxDecoration(
color: Color(0XFFDDDDDD),
borderRadius:BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
),
child: Row(children: [
Icon( Icons.email,color: Colors.black45, size: 20),
SizedBox(width: 2),
Expanded(child: Text('Email', style: robotoRegular)),
]),
),),
Flexible(
child: Container(
height: 50,
padding: EdgeInsets.symmetric(
horizontal: 2,
vertical: 2,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
),
child: Row(children: [
SizedBox(width: 2),
Expanded(child: Text('example#mysite.com', style: robotoRegular)),
]),
),),
]),
])
It can be done using CustomPainter:
class NotchPainter extends CustomPainter {
late double notchSize;
NotchPainter({
this.notchSize = 5,
});
#override
void paint(Canvas canvas, Size size) {
var path = Path()
..moveTo(0, size.height / 2 - notchSize)
..relativeLineTo(notchSize, notchSize)
..relativeLineTo(-notchSize, notchSize)
..close();
var paint = Paint()..color = Color(0XFFDDDDDD);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
To paint notch over the second widget you need to wrap it with CustomPaint like this:
Column(children: [
Row(children: [
Flexible(
child: Container(
height: 50,
padding: EdgeInsets.symmetric(
horizontal: 2,
vertical: 2,
),
decoration: BoxDecoration(
color: Color(0XFFDDDDDD),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
),
child: Row(
children: [
Icon(Icons.email, color: Colors.black45, size: 20),
SizedBox(width: 2),
Expanded(child: Text('Email')),
],
),
),
),
Flexible(
child: CustomPaint(
foregroundPainter: NotchPainter(notchSize: 8),
child: Container(
height: 50,
padding: EdgeInsets.symmetric(
horizontal: 2,
vertical: 2,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
),
child: Row(children: [
SizedBox(width: 8),
Expanded(child: Text('example#mysite.com')),
]),
),
),
),
]),
])
In NotchPainter you can pass the desired notch size(default is 5).
Result:
I'm trying to do this design
Which widget should I use to approach this result?
There are two tags and they are overlapped.
So you can use "Stack" to build it:
Widget _buildCustomTag() {
Radius radius = Radius.circular(6);
return Container(
height: 60,
margin: EdgeInsets.symmetric(horizontal: 4), // this is just for checking the view
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topRight: radius, bottomRight: radius)),
margin: EdgeInsets.symmetric(vertical: 4),
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.centerRight,
child: Text('R\$ 99,90'),
)),
Positioned(
top: 0,
bottom: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(
topRight: radius, bottomRight: radius)),
alignment: Alignment.center,
padding: EdgeInsets.only(right: 8, left: 20),
child: Text('05/01/2021'),
)),
],
));
}
You can use Expanded widget and adding its flex width value.
Row(
children: [
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 2,
child: Container(),
),
],
),
You should use Expanded or Flexible widget for that use below code :
Row(
children: [
Flexible(
flex: 1,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
height: 50,
child: Text(
'05/01/2021',
style: TextStyle(
fontSize: 17,
color: Colors.white,
),
textAlign: TextAlign.center,
),
),
),
Flexible(
flex: 2,
child: Container(
padding: EdgeInsets.all(10),
alignment: Alignment.centerRight,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
height: 45,
child: Text(
'R\$ 99,90',
style: TextStyle(
fontSize: 17,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
),
],
),
Your screen look like ->
I need to implement this widget of an image on top and a container with a text underderneath.
The thing is that the container has a three sided border with rounded bottom corners. But flutter won't allow me to have border radius with a non-uniform Border.
here is my code:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AspectRatio(
aspectRatio: 1,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
topRight: Radius.circular(4),
),
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: CachedNetworkImage(
imageUrl: topic.image,
placeholder: (_, __) => ImagePlaceholder(),
height: (MediaQuery.of(context).size.width / 2) * 1.11,
fit: BoxFit.fill,
),
),
),
),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(4),
bottomRight: Radius.circular(4)),
border: Border(
bottom: BorderSide(
width: 1, color: Theme.of(context).dividerColor),
right: BorderSide(
width: 1, color: Theme.of(context).dividerColor),
left: BorderSide(
width: 1,
color: Theme.of(context).dividerColor))),
child: Text(topic.title)),
)
],
)
basically I can't get the top border of the container below my image to be transparent.
and here is the exception I get:
The following assertion was thrown during paint():
A borderRadius can only be given for a uniform Border.
The following is not uniform:
BorderSide.color
BorderSide.width
how can i implement this?
Container alone isn't going to cut it here. You are going to need to come up with some sort of workaround. Here's one such workaround using a combination of Container, ClipRRect, and `Column.
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
color: Colors.grey,
child: Column(
children: [
Image(...),
Expanded(
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
),
margin: EdgeInsets.only(left: 4, bottom: 4, right: 4),
child: Text(...),
),
),
],
),
),
),
You will probably want to play with it to get the sizing and layout to look how you want, but that's the general idea.
DartPad example
ClipRRect is what exactly you need to know
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
// Your Image
child: Image()
)
Here is the full code for your goal.
Column(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
child: Image.network(
'imageUrl',
height: 250,
width: 300,
fit: BoxFit.cover,
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0),
),
),
width: 300,
padding: EdgeInsets.symmetric(
vertical: 5,
horizontal: 20,
),
child: Text(
'My Text Here',
style: TextStyle(
fontSize: 26,
),
softWrap: true,
overflow: TextOverflow.fade,
),
),
],
),
How to make this type bubble in chat message?
Current Output
Require Output
Tried below code but didn't get the top side left part of curve. Is there any packages or lib. available to make this type of custom shapes in flutter.
Code to produce current output.
Thanks in Advance.
Padding(
padding: const EdgeInsets.symmetric(vertical: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white, width: 3),
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: const AssetImage(
'assets/images/composite-corporate-group-photos.jpg'),
),
),
),
Positioned(
top: 37,
child: Padding(
padding:const EdgeInsets.only(left: 3),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 8),
decoration: const BoxDecoration(
color: pinkColor,
shape: BoxShape.rectangle,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
),
],
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(22.0),
bottomLeft: Radius.circular(22.0),
topRight: Radius.circular(22.0),
),
),
child: Text(
widget.text,
style: const TextStyle(
fontFamily: 'PoppinsRegular',
fontSize: 16,
color: Colors.white,
),
),
),
),
),
],
)
],
),
);
I had tried CustomPainter first. But can't get success due to some math issue.
Finally got success with BoxDecoration. Don't know my solution is good or bad. But
Please let me know if anyone have another best approach.
class MyWidget extends StatefulWidget {
double width = 0, height = 60;
MyWidget({this.width, this.height});
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
#override
void initState() {
super.initState();
if (widget.width == 0) {
widget.width = MediaQuery.of(context).size.width;
}
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: widget.height,
width: widget.width,
color: colorPink,
child: Material(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(widget.height / 2),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: widget.height,
height: widget.height,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
image: ExactAssetImage('images/pokemon/u83.jpg'),
fit: BoxFit.cover,
),
border: new Border.all(
color: Colors.white,
width: 4.0,
),
),
),
],
),
),
),
Container(
height: widget.height,
width: widget.width,
child: Material(
color: colorPink,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(widget.height / 3),
bottomRight: Radius.circular(widget.height / 3),
topRight: Radius.circular(widget.height / 3),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Some text here....",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15.0,
),
),
),
),
),
)
],
);
}
}
check image Output
Good design to build on flutter.
here is the post, you can checkout!
Custom paint in flutter