Comment faire un côté bord circulaire de widget avec flotter ?

Question

J'essaie de construire une bordure circulaire latérale avec le widget Container en flutter. Je l'ai cherché mais je ne trouve pas de solution.

Container(
  width: 150.0,
  padding: const EdgeInsets.all(20.0),
  decoration: BoxDecoration(
    // borderRadius: BorderRadius.circular(30.0),
    /* border: Border(
      left: BorderSide()
    ),*/
  color: Colors.white
  ),
  child: Text("hello"),
),

Answer 1

Utilisez BorderRadius.only et fournissez les côtés

return Center(
  child: Container(
    height: 100,
    width: 100,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
      ),
      border: Border.all(
        width: 3,
        color: Colors.green,
        style: BorderStyle.solid,
      ),
    ),
    child: Center(
      child: Text(
        "Hello",
      ),
    ),
  ),
);

Sortie

Answer 2

Vous pouvez y parvenir en suivant le code de création de votre widget :

return Container(
  width: 150.0,
  padding: const EdgeInsets.all(20.0),
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.zero,
      bottomLeft: Radius.zero,
      bottomRight: Radius.zero,
    ),
  ),
  child: Text(
    "hello",
  ),
);

De cette façon, vous pouvez avoir votre bordure circulaire supérieure gauche avec le widget Container en flutter.

Answer 3

Si vous voulez arrondir un côté d'un conteneur, vous devez utiliser BorderRadius.only et spécifier les coins à arrondir comme ceci :

Container(
          width: 150.0,
          padding: const EdgeInsets.all(20.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0)),
              color: Colors.white),
          child: Text("hello"),
        ),

Answer 4

Une autre façon de le faire est d'utiliser le widget ClipRRect. Il suffit d'envelopper votre widget avec ClipRRect et de donner un rayon. Vous pouvez spécifier le coin que vous souhaitez arrondir.

ClipRRect(
      borderRadius: BorderRadius.only(topRight: Radius.circular(10)),
      child: Container(
        height: 40,
        width: 40,
        color: Colors.amber,
        child: Text('Hello World!'),
      ),
    );

Answer 5

peut également faire ce qui suit,

 borderRadius: new BorderRadius.only(
     topLeft: const Radius.circular(30.0),
     bottomLeft: const Radius.circular(30.0),
 ),