web-dev-qa-db-fra.com

Ajouter une bordure à un conteneur avec borderRadius dans Flutter

Container(
      child: Text(
          'This is a Container',
          textScaleFactor: 2,
          style: TextStyle(color: Colors.black),
      ),

      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          border: Border(
              left: BorderSide(
                  color: Colors.green,
                  width: 3,
              ),
            ),
          ),
      height: 50,
     ),

Ceci est censé montrer un conteneur à bords arrondis avec une bordure gauche verte de 3px de large, et le texte enfant "This is a Container". Cependant, il montre juste un conteneur à bords arrondis avec un enfant invisible et une bordure gauche invisible.

Lorsque je retire l'objet borderRadius, le texte enfant et la bordure gauche verte sont visibles, mais leur introduction masque à nouveau la bordure gauche et le texte enfant.

Le problème majeur semble être la bordure gauche personnalisée, car l'utilisation de border: Border.all(width: 0) et borderRadius: BorderRadius.circular(10) arrondit les bords selon les besoins et montre également l'enfant. Mais maintenant, je ne peux pas appliquer la bordure gauche verte, ce qui est assez important dans cette configuration particulière.

Y a-t-il quelque chose que je fais mal, ou est-ce un bug dans le flottement, ou est-ce simplement quelque chose qui n'est pas autorisé?

Merci d'avance.

Modifier: L'image ci-dessous est le résultat final. Peu importe les couleurs

This is how it should look

flutterflutter-layout
2
Richard

Il n'est pas possible d'ajouter border: et borderRadius: en même temps, vous obtiendrez cette erreur:

Un borderRadius ne peut être donné que pour des bordures uniformes.

Vous pouvez obtenir ce que vous voulez en utilisant borderRadius: et un boxShadow: au lieu de border: comme ceci:

boxShadow: [
  BoxShadow(color: Colors.green, spreadRadius: 3)
]

Votre exemple de code serait comme ceci:

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

Edit: Pour obtenir l'exemple que vous venez de fournir, vous pouvez le faire:

Container(
  padding: EdgeInsets.only(left: 12.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.green,
  ),
  height: 50,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0)),
      color: Colors.white,
    ),
    child: Text(
      'This is a Container',
      textScaleFactor: 2,
      style: TextStyle(color: Colors.black),
    ),
  ),
),

Une autre solution:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.white,
  ),
  height: 50,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        width: 12.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0)),
          color: Colors.green,
        ),
      ),
      Text(
        'This is a Container',
        textScaleFactor: 2,
        style: TextStyle(color: Colors.black),
      )
    ],
  ),
),
6
Pablo Barrera