Utiliser la propriété obscureText avec Flutter

Comment rendre le contenu rédigé par un utilisateur, invisible avec Flutter

Rendre le contenu écrit par un utilisateur peut parfois s’avérer utile pour des raisons d’UX, par exemple lorsque l’utilisateur tape son mot de passe, afin d’éviter qu’un œil mal intentionné puisse le lire.

Par chance, cette fonctionnalité peut être définie très rapidement dans vos widgets Textfield, grâce à la propriété obscureText. Lorsque celle-ci est définie sur true, tous les caractères entrés par l’utilisateur vont alors être affichés sous la forme d’astérisques.

Par défaut, le symbole renvoyé est un astérisque, mais vous pouvez très bien afficher n’importe quel autre caractère, en le définissant via la propriété obscuringCharacter qui va prendre une valeur de type String.

Ceci dit, voici un exemple très simple d’implémentation de l’argument obscureText, avec en bonus un bouton permettant de faire apparaitre ou disparaitre le texte quand je clique dessus.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Champ de mot de passe',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PasswordFieldExample(),
    );
  }
}

class PasswordFieldExample extends StatefulWidget {
  const PasswordFieldExample({super.key});

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

class _PasswordFieldExampleState extends State<PasswordFieldExample> {
  bool _isObscured = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Champ de mot de passe'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          obscureText: _isObscured,
          decoration: InputDecoration(
            labelText: 'Mot de passe',
            border: const OutlineInputBorder(),
            suffixIcon: IconButton(
              icon: Icon(
                _isObscured ? Icons.visibility : Icons.visibility_off,
              ),
              onPressed: () {
                setState(() {
                  _isObscured = !_isObscured;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

Ici, ma propriété obscureText prend comme argument ma variable _isObscured qui est de type bool et qui prend par défaut une valeur de true. Quand je clique sur mon IconButton, _isObscured devient faux et setState permet de refresh l’état de mon widget pour afficher le texte correctement.