Comment obtenir une image d'arrière-plan avec Flutter SDK ?

Le framework Flutter offre de nombreuses fonctionnalités pour créer l'application que vous souhaitez. Il propose un large panel de widgets, que vous agencez afin d'élaborer le design de l'application. Pour ajouter une image d'arrière-plan dans votre page, vous devez ainsi utiliser un widget particulier.

Le widget de type "Scaffold" est un widget qui propose les structures de base pour élaborer la mise en page de l'application. On peut notamment utiliser ce widget pour créer un arrière-plan. Dans ce widget, vous devez indiquer, dans l'attribut "body", un container qui va contenir l'image de l'arrière-plan en décoration. Afin que l'arrière-plan recouvre entièrement le widget, vous devez utiliser la propriété "BoxFit.Cover". L'image sera alors automatiquement adaptée pour couvrir entièrement le widget.

class MonLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/monFond.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null,
      ),
    );
  }
}

Cet agencement ne fonctionnera pas si vous avez des enfants à ajouter au container. S'il y a des enfants, le container va automatiquement ajuster sa taille pour correspondre à la taille occupée par l'ensemble des enfants. Vous ne couvrirez donc plus tout l'écran. Pour résoudre ce problème, vous devez ajouter la contrainte "expand". Cette contrainte va forcer le widget à prendre toute la place disponible, sans tenir compte des enfants.

class MonLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/monFond.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        constraints: BoxConstraints.expand(),
        child: null,
      ),
    );
  }
}

Une autre solution pour pouvoir utiliser d'autres widgets avec le fond consiste à utiliser une pile de widgets. On fait appel pour cela à un objet de la classe "Stack". Cela permet de mettre les autres widgets à côté de celui contenant le fond.

Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(image: new AssetImage("images/monFond.jpg"), fit: BoxFit.cover,),
          ),
        ),
        new Center(
          child: new Text("Voici mon fond."),
        )
      ],
    )
  );
}