Flutter Bottom Sheet – Tout ce qu’il faut savoir

Bottom Sheet est l’un des moyens de montrer une certaine vue aux utilisateurs pour qu’ils effectuent certaines actions.

Pour bénéficier d’une bonne interface utilisateur, nous devons l’aborder avec beaucoup de soin. Plongeons-y.

En utilisant le code ci-dessous, nous pouvons afficher simple bottom sheet.

showModalBottomSheet(
  context: context,
  builder: (ctx) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text("I am bottom sheet"),
      ],
    );
  },
);

Si vous souhaitez ajouter une bordure en haut à gauche et en haut à droite.

showModalBottomSheet(
  context: context,
  shape:  const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0)
    ),
  ),
  builder: (ctx) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text("I am bottom sheet"),
      ],
    );
  },
);

Si vous souhaitez que votre bottom sheet occupe 80 % de l’écran. Nous utiliserons isScrollControlled. En lui attribuant la valeur true et en utilisant le widget SingleChildScrollview, nous pourrons faire défiler notre bottom sheet dans les limites de sa taille.

showModalBottomSheet(
  context: context,
  shape:  const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0)
    ),
  ),
  isScrollControlled: true,
  constraints: BoxConstraints.tight(Size(
      MediaQuery.of(context).size.width,
      MediaQuery.of(context).size.height * .8)),

  builder: (ctx) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Text("I am bottom sheet"),
        ],
      ),
    );
  },
);

Que faire si nous avons plusieurs champs de texte et que lorsque nous tapons, notre champ de texte doit se trouver au-dessus du clavier. Voyons comment y parvenir.

Voir l’image ci-dessus. Nous nous sommes concentrés sur un champ de texte mais nous ne pouvons pas le voir. L’utilisation de viewinsets avec le widget padding nous permet de résoudre ce problème.

showBottomSheetDialog(BuildContext context) {
  showModalBottomSheet(
    context: context,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0)),
    ),
    isScrollControlled: true,
    constraints: BoxConstraints.tight(Size(MediaQuery.of(context).size.width,
        MediaQuery.of(context).size.height * .8)),
    builder: (ctx) {
      return Padding(
        padding: MediaQuery.of(context).viewInsets,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(
                decoration: InputDecoration(hintText: "I am number 5"),
              ),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
            ],
          ),
        ),
      );
    },
  );
}