07 widgets Flutter méconnus qui vont pimper vos apps

Salut la compagnie ! Aujourd'hui, on va explorer les recoins obscurs de Flutter pour dénicher des pépites que même votre gourou du code ne connaît pas. Préparez-vous à en mettre plein la vue à vos collègues !

1. ReorderableListView : la liste qui joue aux chaises musicales

Vous voulez une liste où les éléments peuvent être réorganisés par glisser-déposer ? ReorderableListView est là pour vous :

ReorderableListView(
  children: List.generate(
    10,
    (index) => ListTile(
      key: Key('$index'),
      title: Text('Item $index'),
      trailing: Icon(Icons.drag_handle),
    ),
  ),
  onReorder: (oldIndex, newIndex) {
    // Logique de réorganisation
  },
)
        

Vos utilisateurs vont adorer jouer à réorganiser leur liste !

Pro-tip : Utilisez ReorderableListView.builder pour les listes longues et optimisez les performances.

2. InteractiveViewer : zoom et pan comme un chef

Besoin de zoomer et de déplacer un widget ? InteractiveViewer est votre nouveau meilleur ami :

InteractiveViewer(
  boundaryMargin: EdgeInsets.all(20.0),
  minScale: 0.1,
  maxScale: 4.0,
  child: Image.network('https://picsum.photos/seed/picsum/500/500'),
)
        

Transformez n'importe quelle image en carte interactive digne de Google Maps !

3. AnimatedList : pour des listes qui ont du peps

Envie d'animer l'ajout et la suppression d'éléments dans une liste ? AnimatedList va vous faire kiffer :

final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();

AnimatedList(
  key: listKey,
  initialItemCount: items.length,
  itemBuilder: (context, index, animation) {
    return SlideTransition(
      position: animation.drive(Tween(begin: Offset(1, 0), end: Offset(0, 0))),
      child: ListTile(title: Text(items[index])),
    );
  },
)

// Pour ajouter un item :
listKey.currentState?.insertItem(newIndex);

// Pour supprimer un item :
listKey.currentState?.removeItem(
  index,
  (context, animation) => SizeTransition(
    sizeFactor: animation,
    child: ListTile(title: Text(items[index])),
  ),
);
        

Vos listes vont maintenant bouger comme dans une pub Apple !

4. CustomScrollView avec SliverPersistentHeader : scrolling de ouf

Vous voulez une en-tête qui se réduit au scroll ? Combinez CustomScrollView et SliverPersistentHeader :

CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      pinned: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
        child: Container(
          color: Colors.blue,
          child: Center(child: Text('Titre qui rétrécit')),
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(title: Text('Item $index'));
        },
        childCount: 50,
      ),
    ),
  ],
)

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  // Implémentation du delegate...
}
        

Résultat ? Une interface qui va en mettre plein la vue à vos utilisateurs !

5. BackdropFilter : floutez-moi tout ça

Vous voulez un effet de flou sur vos widgets ? BackdropFilter est là pour ça :

Stack(
  children: [
    Image.network('https://picsum.photos/seed/picsum/500/500'),
    Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: Container(color: Colors.black.withOpacity(0)),
      ),
    ),
    Center(child: Text('Texte sur fond flouté', style: TextStyle(color: Colors.white))),
  ],
)
        

Et hop, un effet iOS en deux temps trois mouvements !

Pro-tip : Attention à l'utilisation excessive, ça peut impacter les performances sur les appareils moins puissants.

6. Flow : pour les layouts complexes

Besoin d'un contrôle total sur le positionnement de vos widgets ? Flow est votre nouveau dieu :

Flow(
  delegate: FlowMenuDelegate(),
  children: <Widget>[
    Container(width: 80, height: 80, color: Colors.red),
    Container(width: 80, height: 80, color: Colors.green),
    Container(width: 80, height: 80, color: Colors.blue),
    // Ajoutez autant d'enfants que vous voulez
  ],
)

class FlowMenuDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    double x = 0;
    double y = 0;
    for (int i = 0; i < context.childCount; i++) {
      x = i * (context.getChildSize(i)!.width + 5);
      context.paintChild(
        i,
        transform: Matrix4.translationValues(x, y, 0),
      );
    }
  }

  @override
  bool shouldRepaint(FlowMenuDelegate oldDelegate) => false;
}
        

Avec Flow, vous pouvez créer des layouts aussi fous que votre imagination !

7. ShaderMask : effets de ouf sur vos widgets

Envie d'appliquer des effets de dégradé ou autres sur vos widgets ? ShaderMask est votre baguette magique :

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.yellow, Colors.red],
      stops: [0.0, 1.0],
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcATop,
  child: Text(
    'Texte avec dégradé',
    style: TextStyle(
      fontSize: 40,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
)
        

Et voilà, vos widgets ont maintenant l'air de sortir d'un film de science-fiction !

Et voilà les amis ! Avec ces 7 widgets méconnus, vous allez pouvoir créer des interfaces qui vont faire baver d'envie tous vos collègues développeurs. N'hésitez pas à les combiner pour des résultats encore plus fous.

Rappelez-vous, avec un grand pouvoir viennent de grandes responsabilités. Utilisez ces widgets avec parcimonie, ou vous risquez de finir avec une app qui ressemble à un sapin de Noël sur LSD ! 😜

Allez, amusez-vous bien et rendez-vous pour le prochain article où on découvrira comment faire léviter votre téléphone avec Flutter ! (Bon ok, peut-être pas, mais on trouvera un truc cool, promis !)