Comment afficher / cacher un widget dans Flutter ?

Le framework Flutter a été conçu par les équipes de la société Google, comme le système d'exploitation Android. Il intègre donc des nouveautés du système d'exploitation au fur et à mesure de son développement. De plus, une application créée avec le framework fonctionnera également sur iOS, à partir du même code. Pour afficher ou cacher un widget, le framework a intégré le même fonctionnement que l'on retrouve avec un développement d'une application native pour Android.

Il existe plusieurs façons de cacher un widget. On peut soit le cacher entièrement, soit le rendre invisible, mais que l'espace qu'il occupe soit toujours là. Avec Flutter, les deux systèmes sont pris en charge grâce à la propriété "Visibility", comme pour une application Android native. L'attribut "Visible" permet d'afficher ou de masquer un widget selon la valeur que vous définissez.

Visibility(
  child: Text("Widget totalement caché"),
  visible: false,
),

D'autres attributs permettent de faire en sorte que le widget garde l'espace qu'il occupe tout en étant invisible. L'attribut "maintainSize" gère la taille, "maintainAnimation" s'occupe de l'animation du widget et "maintainState" s'occupe de l'état. Si vous attribuez la valeur "true" à tous ces éléments, alors le widget n'est pas visible mais il est toujours dans votre application et occupe l'espace.

Visibility(
  child: Text("Invisible mais occupe quand même l'espace"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: false, 
),

Si vous travaillez avec une ancienne version du framework, l'attribut "Visibility" n'a peut-être pas encore été intégré. Dans ce cas, vous devez contourner le problème. Pour cacher entièrement un widget et qu'il n'occupe plus d'espace, remplacez simplement le container qui le contient par un container vide. Pour le rendre invisible en gardant l'espace, vous pouvez utiliser la propriété "Opacity" qui contrôle l'opacité d'un élément, et attribuer une valeur de 0, ce qui le rendra impossible à voir. Déplacez alors le code votre widget dans l'attribut "Child".

new Opacity(opacity: 0.0, child: monWidget)
Autour du même sujet

Android