I want to realize the card as shown in the image, but I have not found any ways to add the date on the top right and that particular border on the left.

CodePudding user response：

   Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.indigo,
        ),
        child: Container(
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
            color: Colors.white,
          ),
          margin: const EdgeInsets.fromLTRB(25, 2, 2, 2),
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Align(alignment: Alignment.centerRight, child: Text("01/02/2022",style: TextStyle(fontStyle:FontStyle.italic,
                  fontWeight: FontWeight.w300),)),
              Text("Avviso",style: TextStyle(fontSize: 19,
                  fontWeight: FontWeight.bold),),
              Text("Scadenza pagamento quota annulae",style: TextStyle(fontSize: 14),),
            ],
          )
        ),
      )

CodePudding user response：

Try below code hope its help to you.

Container(
        decoration: BoxDecoration(
          border: Border.all(
            color:Colors.indigo,
            width: 2,
          ),
          borderRadius:BorderRadius.circular(8),
        ),
        child: Row(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(6.0),
                bottomLeft: Radius.circular(6.0),
              ),
              child: Container(
                width: 20.0,
                height: 100.0,
                color: Colors.indigo,
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Flexible(
              child: Column(
                crossAxisAlignment:CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(2),
                    alignment: Alignment.topRight,
                    child: Text(
                      '01/02/2022',
                      style: TextStyle(
                        fontStyle:FontStyle.italic,
                      ),
                       
                    ),
                  ),
                  Text(
                    'Your Heading',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    'Your Subheading Everyday-6:00 AM to 11:00 PM.',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 16,
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),

Your result Screen->