Formulaire et Snackbar avec Flutter

Il peut être utile 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.

Avec Flutter, c'est le travail d'un SnackBar.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Restreindre l’affichage de l’application en mode portrait
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Color(0xFF4c427e),
        primaryColorDark: Color(0xFFf36f61),
        primaryColorLight: Colors.white,
        accentColor: Color(0xFF8cafe5),
      ),
      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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Header
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(120.0), // Hauteur de l'AppBar
          child: new AppBar(
            title: Text(widget.title,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Theme.of(context).primaryColorLight,
                  fontSize: 24,
                  fontFamily: 'Quicksand',
                )),
            backgroundColor: Theme.of(context).primaryColor,
            elevation: 0.0,
          )),

      // Container
      body: Container(
        padding: EdgeInsets.all(20),
        child: MyCustomForm(),
      )
    );
  }
}

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

class MyCustomFormState extends State {
  final _formKey = GlobalKey();

  @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'),
            ),
          ),
        ],
      ),
    );
  }
}