Flutter Card and Container design

Question

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 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!

Answer 1

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: