Aleteo. Simplificación del diseño de widgets con extensiones de dardo

En Dart 2.7, nos presentaron las extensiones que permiten a los desarrolladores agregar nuevas funcionalidades a los tipos existentes. ¡Las extensiones pueden ser de gran ayuda no solo cuando escribimos lógica de negocios, sino también cuando tenemos otras tareas! Un ejemplo de tal tarea es trabajar con widgets.

Basado en mi experiencia con el desarrollo de iOS, inspirado en ViewModifierSwiftUI, quería descubrir cómo usar las extensiones Dart de una manera similar para reducir el desorden visual que resulta de una gran anidación del árbol de widgets.

¡Tomemos un ejemplo!

Opción con widgets anidados

A continuación se muestra un MyWidgetwidget con texto dentro Padding(del ejemplo estándar con 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)
      );
  }
}

Ahora veamos cómo podemos hacer lo mismo con las extensiones Dart.

Opción con extensiones

Creamos una extensión de la clase Widgetcon el método padding. Cuando se llama a este método, el objeto se envolverá en Padding:

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

Con la nueva extensión, podemos actualizar de la MyWidgetsiguiente manera:

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

? , ! , , .

En este artículo, consideramos un enfoque alternativo para formar un árbol de widgets en un proyecto Flutter, utilizando un concepto similar al ViewModifierde SwiftUI. Con este enfoque, podemos simplificar los árboles de widgets reduciendo su anidamiento. Y he demostrado solo unos pocos ejemplos de tales extensiones, pero con el mismo principio, puede crear muchas nuevas para otros casos en los que serán igual de útiles.

¡Gracias por tu atención! Espero que encuentres útil esta publicación. Si tiene alguna pregunta o comentario sobre este material, ¡no dude en ponerse en contacto conmigo en Twitter !

¡Hasta la proxima vez!