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

Avec ce tutoriel Flutter, je vais vous présenter la manière de construire un formulaire avec vérification pour éviter que la saisie soit non-nulle associé à un message d’alerte via une SnackBar d’alerte. Comme d’habitude je partage le code dans ce billet consacré à Flutter.

Le formulaire avec validation

Les applications demandent souvent aux utilisateurs de saisir des informations dans un champ de texte. Par exemple, vous pouvez demander aux utilisateurs de saisir un identifiant et un mot de passe pour valider l’accès à un espace privé.

Pour que votre application soit sûres et faciles à utiliser, vous devez vérifier si les informations fournies par l’utilisateur sont valides. Si l’utilisateur a correctement rempli le formulaire, traitez les informations. Si l’utilisateur soumet des informations incorrectes, affichez un message d’erreur convivial pour lui faire savoir ce qui ne s’est pas passé.

C’est à ce moment qu’intervient la SnackBar.

Le code du champ de formulaire :

TextFormField(
  maxLength: 25,
  decoration: const InputDecoration(
      labelText: 'Champ de formulaire',
      hintText: 'Entrer du texte',
      border: OutlineInputBorder()),
  validator: (value) {
    if (value.isEmpty) {
      return 'Veuillez saisir un texte';
    }
    return null;
  },
)

La SnackBar

Elle permet d’informer brièvement vos utilisateurs lorsque certaines actions ont lieu. Par exemple, lorsqu’un utilisateur glisse un message dans une liste, vous pouvez l’informer que le message a été supprimé.

Vous pourriez même leur donner une option pour annuler l’action.

Le code du bouton de validation et de la snackbar de confirmation :

child: RaisedButton(
  onPressed: () {
    // Retourne true si le formulaire est valide, sinon false
    if (_formKey.currentState.validate()) {
      // Affiche le Snackbar si le formulaire est valide
      Scaffold.of(context).showSnackBar(
          SnackBar(content: Text('Traitement en cours')));
    }
  },
  child: Text('Envoyer'),
)

Construire un formulaire et une SnackBar d’alerte

Dans l’exemple que je vous propose dans ce tutoriel Flutter, vous allez apprendre comment ajouter une validation à un formulaire qui comporte un seul champ de texte en suivant les étapes suivantes :

• Créer un formulaire avec une clé globale.
• Ajouter un champ de type TextFormField avec une logique de validation.
• Créez un bouton pour valider et soumettre le formulaire.
• Afficher une SnackBar lorsque la saisie est valide (non-nulle)
• Fournir une action facultative

Voici le code complet du tuto Flutter :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Formulaire et Snackbar',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: 'Formulaire et Snackbar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Construire le formulaire avec _formKey créé au-dessus
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Veuillez saisir un texte';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Retourne true si le formulaire est valide, sinon false
                if (_formKey.currentState.validate()) {
                  // Affiche le Snackbar si le formulaire est valide
                  Scaffold.of(context).showSnackBar(
                      SnackBar(content: Text('Traitement en cours')));
                }
              },
              child: Text('Envoyer'),
            ),
          ),
        ],
      ),
    );
  }
}

Retrouvez le code de ce tuto sur GitLab

J’espère que ce projet vous aidera à mieux comprendre comment construire un formulaire et une SnackBar avec Flutter. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

Photo by Josh Hild from Pexels