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)),
                  ],
                ),
              )
            ],
          ),
        ),
      )

image: enter image description here

Share:
751
GrandMagus
Author by

GrandMagus

Updated on December 30, 2022

Comments

  • GrandMagus
    GrandMagus over 1 year

    I wanted to achieve this:

    enter image description here

    But I end up getting this (ignore the color):

    enter image description here

    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 a Container inside a Card 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!