Flutter : Comment créer une mise en page plein écran ?

Dans les applications smartphones avec une interface utilisateur moderne, vous voyez beaucoup d’applications mobiles avec un style de conception affichant une image plein écran, et vous devez savoir comment le faire. Je vais vous montrer comment créer une image plein écran dans Flutter à travers ce post.

Image plein écran dans Flutter

Pour y parvenir, vous devrez appliquer la propriété de décoration sur le conteneur. Comme il existe de nombreux types de décoration, nous utiliserons BoxDecoration et appliquerons une DecorationImage avec un BoxFit.cover.

Ainsi, le code final pour créer une image plein écran dans Flutter semble assez simple. Le Container se présente ainsi :

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(
        'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
      fit: BoxFit.cover,
    ),
  ),
  child: Center(
    child: Text(
      'Mise en page de base',
      style: TextStyle(
        color: Colors.white,
        fontSize: 30,
      ),
    ),
  ),
),

Dans l’exemple de code ci-dessus, je charge une image depuis une URL et je l’affiche.

Comme vous pouvez le constater, la barre en haut de l’écran affiche également l’image de fond. Pour se faire, vous devez utiliser la transparence :

child: AppBar(
  title: Text("Transparent AppBar"),
  backgroundColor: Colors.transparent,
  elevation: 0,
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.share),
      onPressed: () {},
      tooltip: 'Share',
    ),
  ],
),

En résumé :

Comme nous l’avons vu, c’est assez simple et direct de créer une page intégrant une image plein écran dans Flutter avec quelques lignes de code.

Le code est disponible sur GitLab : Flutter basic layout