Flutter Card and Container design
751
please try with this
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.green,
elevation: 16,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Wrap(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10))),
margin: EdgeInsets.only(left: 10),
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Dr. Alok Verma",
style: TextStyle(fontSize: 24),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text("Date: 14-06-2021",
style: TextStyle(fontSize: 24))),
Expanded(
child: FlatButton(
onPressed: () {},
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(5)),
padding: EdgeInsets.all(8),
child: Text("Completed",
style: TextStyle(fontSize: 24)))))
],
),
Text("Time: 10:20", style: TextStyle(fontSize: 24)),
SizedBox(
height: 20,
),
Text("Aastha Hospital",
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.bold)),
Text("Some address", style: TextStyle(fontSize: 18)),
],
),
)
],
),
),
)
Author by
GrandMagus
Updated on December 30, 2022Comments
-
GrandMagus over 1 year
I wanted to achieve this:
But I end up getting this (ignore the color):
How can I shape the border of the colored border side, I keep getting this weird error (or at least I have never encounter one), I shape the topLeft and bottomLeft border and it pops up
A borderRadius can only be given for a uniform Border.
What am I doing wrong here? I have placed aContainer
inside aCard
widget, I tried the other way around, but not the results I expected. I now have what I need, I just need to round the topLeft and bottomLeft corner of the Container (Or maybe something else) to achieve the goal from the first picture with the blue colour.Here is the code:
Container( height: 98.0, width: double.infinity, child: Card( elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(4.0), ), shadowColor: Color.fromRGBO(0, 0, 0, 0.6), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), //this is causing the error, when I remove it, I get the card like on picture 2 with the red line border: Border( left: BorderSide( color: Colors.red, width: 3.0, style: BorderStyle.solid), ), ), child: Row( // some content here ], ), ), ), ),
Thanks in advance for the help!