Battement. Simplification de la disposition des widgets avec les extensions Dart

Dans Dart 2.7, nous avons découvert des extensions qui permettent aux développeurs d'ajouter de nouvelles fonctionnalités aux types existants. Les extensions peuvent être d'une grande aide non seulement lorsque nous écrivons une logique métier, mais également lorsque nous avons d'autres tâches! Un exemple d'une telle tâche est l'utilisation de widgets.

Sur la base de mon expérience avec le développement iOS, inspiré par ViewModifierSwiftUI, je voulais comprendre comment utiliser les extensions Dart de la même manière pour réduire l'encombrement visuel résultant d'une grande imbrication de l'arborescence des widgets.

Prenons un exemple!

Option avec des widgets imbriqués

Vous trouverez ci-dessous un MyWidgetwidget avec du texte à l'intérieur Padding(de l'exemple standard avec dartpad.dev ).

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}

Voyons maintenant comment nous pouvons faire de même avec les extensions Dart.

Option avec extensions

Nous créons une extension pour la classe Widgetavec la méthode padding. Lorsque cette méthode est appelée, l'objet sera encapsulé dans Padding:

extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}

Avec la nouvelle extension, nous pouvons mettre MyWidgetà jour comme suit:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}

, , ! , , .

:

extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) { // 
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) { //  
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) { // 
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}

dartpad.dev

? , ! , , .

Dans cet article, nous avons envisagé une approche alternative pour former un arbre de widgets dans un projet Flutter, en utilisant un concept similaire à celui ViewModifierde SwiftUI. Avec cette approche, nous pouvons simplifier les arborescences de widgets en réduisant leur imbrication. Et je n'ai démontré que quelques exemples de telles extensions, mais selon le même principe, vous pouvez en créer de nombreuses nouvelles pour d'autres cas où elles seront tout aussi utiles.

Merci de votre attention! J'espère que vous trouverez cet article utile. Si vous avez des questions ou des commentaires sur ce matériel, n'hésitez pas à me contacter sur Twitter !

Jusqu'à la prochaine fois!