Flutter donne au conteneur une bordure arrondie

Question

Je fais un Container() Je lui ai donné une bordure, mais ce serait bien d'avoir des bordures arrondies.

C'est ce que j'ai maintenant :

Container(
      width: screenWidth / 7,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.red[500],
        ),
      ),
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: <Widget>[
            Text(
              '6',
              style: TextStyle(
                  color: Colors.red[500],
                  fontSize: 25),
            ),
            Text(
             'sep',
              style: TextStyle(
                  color: Colors.red[500]),
            )
          ],
        ),
      ),
    );

J'ai essayé de mettre ClipRRect sur elle, mais ça fait disparaître la frontière. Existe-t-il une solution à ce problème ?

Answer 1

Essayez d'utiliser la propriété borderRadius de BoxDecoration

Quelque chose comme

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

Answer 2

Pour faire un cercle complet :

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
      ),
    )

Pour en faire un cercle aux endroits choisis :

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0)),
      ),
      child: Text("hello"),
    ),

ou

  Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: ...
    )

Answer 3

Vous pouvez utiliser ClipRRect Widget :

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )

Answer 4

Complément à la réponse ci-dessus.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

Answer 5

Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      border: Border.all(
        color: HexColor('#C88A3D'),
        width: 3.0
      )
    ),
    child: Container(
      decoration: new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      color: Colors.white,),
    )
  ),