Comment ajouter une bordure à un widget avec Flutter ?

Vous souhaitez développer une application à destination du plus grand nombre de mobiles ? Alors Google a pensé à vous. L'entreprise américaine a développé une nouvelle plateforme de développement : Flutter. Elle permet de créer, à partir d'un même code, une application qui va à la fois fonctionner sur Android, mais aussi sur iOS. À terme, cela fonctionnera même dans un navigateur, ou dans un système d'exploitation pour ordinateur. La plateforme fonctionne avec un système de Widget et utilise un nouveau langage : Dart. Il gère également le rendu de votre application, notamment l'ajout de bordure.

Pour ajouter une bordure sur un widget, vous devez utiliser l'objet "Container". Celui-ci possède une propriété "BoxDecoration", qui va vous permettre d'ajouter, si vous le souhaitez, une bordure. On indiquera pour cela la propriété "border" et on fera appel à la fonction "Border.all()". Cette fonction retourne les éléments nécessaires pour indiquer qu'une bordure entoure le widget.

Widget monWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration:, BoxDecoration(
      border: Border.all()
        ),
    child: Text(
      "Voici mon texte entouré d'une bordure"),
  ),
}

Par défaut, vous obtiendrez une petite bordure noire. La fonction "Border.All" accepte plusieurs paramètres, autant que vous le souhaitez, qui vont définir les caractéristiques de la bordure. Le paramètre "width" définit l'épaisseur de la bordure. On change la couleur avec le paramètre "color". On lui attribue une couleur définie avec la classe "Colors".

Widget monWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration:, BoxDecoration(
      border: Border.all(
           width: 10
           color: Colors.blue
        )
     ),
    child: Text(
      "Ce widget est entouré par une épaisse bordure bleue"),
  ),
}

Si vous voulez ne définir qu'un seul ou plusieurs côtés pour votre bordure, vous devez utiliser directement la fonction "Border()". Vous pouvez paramétrer chaque côté avec les propriétés correspondantes ("left", "right", "top" et "bottom"). Si vous souhaitez arrondir vos angles, vous devez changer la classe définissant la bordure. On utilise la classe "BorderRadius". On peut définir la taille de l'arrondi avec la propriété "radius.circular". Les autres paramètres s'utilisent de la même façon.

Widget monWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration:, BoxDecoration(
      border: BorderRadius.all(
           Radius.circular(5.0),
           width: 3,
           color: Colors.green
        )
     ),
    child: Text(
      "Ce widget est entouré par une bordure verte arrondie"),
  ),
}