Effet de transparence floutée avec le package glossy

Installer le package Glossy

La première chose à faire pour utiliser un package Flutter est de l’exporter. Deux options s’offrent donc à vous pour télécharger le package glossy dans sa dernière version (0.0.4) :

Utiliser le terminal de commande dans Visual Studio et entrer la commande :

flutter pub add glossy ;
Placer la dépendance glossy: ^0.0.4 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:glossy/glossy.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser.

Utiliser le package Glossy

Une fois installé, le package Glossy va vous permettre de créer des effets de flous, comme si vos widgets étaient placés derrière une vitre opaque.

Celui est très simple d’utilisation, puisqu’il ajoute simplement un nouveau widget à votre libraire, du nom de GlossyContainer. Vous n’avez plus qu’à le placer au-dessus des éléments que vous souhaitez couvrir, grâce au widget stack.

Je vous laisse ici un code d’exemple que vous pouvez adapter à vos besoins :

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade800,
        appBar: AppBar(
          title: const Text('Glossy Effect Demo'),
          backgroundColor: Colors.indigo,
        ),
        body: Center(
          child: SizedBox(
            width: 350,
            height: 350,
            child: Stack(
              children: [
                // Decorative shapes
                Positioned(
                  top: 40,
                  left: 50,
                  child: Container(
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                      color: Colors.pink,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                Positioned(
                  bottom: 60,
                  right: 40,
                  child: Container(
                    height: 120,
                    width: 120,
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(20),
                    ),
                  ),
                ),
                Positioned(
                  top: 30,
                  left: 10,
                  child: Container(
                    height: 80,
                    width: 80,
                    decoration: BoxDecoration(
                      color: Colors.yellow,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                Positioned(
                  bottom: 40,
                  right: 70,
                  child: Container(
                    height: 90,
                    width: 90,
                    decoration: BoxDecoration(
                      color: Colors.cyan,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                // Glossy container in the center
                Align(
                  alignment: Alignment.center,
                  child: GlossyContainer(
                    width: 250,
                    height: 250,
                    borderRadius: BorderRadius.circular(24),
                    child: const Center(
                      child: Text(
                        'Container glossy',
                        style: TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Le GlossyContainer offre une variété de propriétés personnalisables pour créer des effets élégants et modernes :

width (double) : Détermine la largeur du container. (Requis)
height (double) : Définit la hauteur du container. (Requis)
borderRadius (BorderRadiusGeometry) : Permet d’arrondir les coins du container pour un rendu plus fluide.
blur (double) : Ajuste le niveau de flou appliqué aux éléments situés sous le container.
child (Widget) : Insère un widget enfant à l’intérieur du container.
color (Color) : Définit la couleur de fond du container.
opacity (double) : Contrôle la transparence globale du container (valeurs entre 0.0 et 1.0).
strengthX (double) : Modifie l’intensité du flou sur l’axe horizontal.
strengthY (double) : Modifie l’intensité du flou sur l’axe vertical.
border (BoxBorder?) : Configure les bordures du container, y compris leur couleur, largeur et style.
blendMode (BlendMode) : Applique un effet de fusion (compositing) entre la couleur du container et l’arrière-plan.
gradient (Gradient?) : Ajoute un dégradé de couleurs à l’arrière-plan du container pour un effet visuel enrichi.
boxShadow (List<BoxShadow>?) : Ajoute une ombre portée autour du container.
image (DecorationImage?) : Insère une image en arrière-plan du container.
imageOpacity (double) : Contrôle la transparence de l’image d’arrière-plan.