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

Dans ce billet, nous allons voir brièvement comment créer une mise en page plein écran avec image de fond d'une application mobile Flutter en Dart.

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.

Flutter Design plein écrana
Flutter Design plein écran

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

 

 


Claude BUENO
Claude BUENO

Passionné par la Transformation numérique et le Pilotage de projets informatiques. Intérêt pour le Management, le Marketing et le Développement d'applications mobiles.
Je blogue depuis 2008 sur les sujets numériques.
Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite sur Tours (Centre-Val de Loire)

Publications: 111

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *