Flutter : Bordure de saisie des contours

Question

J'ai essayé de créer une bordure pour mon champ de texte :

return TextField(
  ...
 border: OutlineInputBorder(
  borderSide: BorderSide(
   color: Colors.red, 
    width: 5.0),
    )
  )
)

Mais il renvoie toujours une bordure noire avec 1.0 comme largeur. La seule façon que j'ai trouvée pour changer la couleur était de créer une ThemeData où je spécifie la couleur de l'indice, mais je n'ai pas trouvé de moyen de changer la largeur.

Answer 1

Ce que vous cherchez est - enabledBorder propriété de InputDecoration .

Si vous voulez changer la bordure sur la mise au point, utilisez - focusedBorder

    TextField(
        decoration: new InputDecoration(
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
            ),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red, width: 5.0),
            ),
            hintText: 'Mobile Number',
        ),
    ),

Answer 2

Vous pouvez utiliser le Container pour donner une bordure à votre champ de texte. Ajoutez l'élément TextField comme un enfant à un Container qui a un BoxDecoration avec la propriété de bordure :

  Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
            color: Colors.red,// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
      ),
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Label text',
          border: InputBorder.none,
        ),
      ),
    )