Sarthak
Sarthak

Reputation: 99

Flutter UI - Row and Column

Can anyone please help me to create this UI. I am trying all day to create this but I am unable to code.

Here is the design -

enter image description here

Upvotes: 0

Views: 44

Answers (1)

Jahidul Islam
Jahidul Islam

Reputation: 12575

Please adjust color and others as you like enter image description here

code here

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

Upvotes: 1

Related Questions