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 !

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
  },
)
        

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

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

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...
}
        

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))),
  ],
)
        

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;
}
        

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à 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 !)