Extensiones dart para los árboles de widgets en Flutter

En la versión 2.7, Dart introdujo extensiones para permitir a los desarrolladores agregar más funcionalidades a un componente existente. Las extensiones pueden ser una gran herramienta en nuestro kit de herramientas cuando escribimos lógica empresarial, ¡pero también pueden ser tan útiles en otras áreas! Un ejemplo de ello puede ser la forma en que construimos los widgets.

Viniendo de un fondo iOS e inspirado en los ViewModifiers de SwiftUI, me intrigó usar las extensiones Dart de manera similar para reducir el desorden visual que viene con el árbol profundo de muchos widgets anidados.

¡Veamos un ejemplo!

Con widgets anidados

Aquí tenemos el widget predeterminado creado en dartpad.dev, donde también envolvimos el texto dentro de un widget Padding.

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 lograr lo mismo con la ayuda de las extensiones Dart.

Con métodos de extensiones

Primero, presentaremos una extensión en Widget que envolverá a la persona que llama con un widget de relleno:

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

Con esta extensión en su lugar, podríamos convertir nuestro widget a lo siguiente:

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

¡Este ejemplo es pequeño, pero espero que te hagas una idea!

Estamos utilizando el método de extensión como un azúcar sintáctico para estructurar nuestro diseño, en lugar de envolver un widget dentro de otro.

Del mismo modo, podemos agregar más funciones a nuestra extensión y crear interfaces de usuario más complejas:

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

¿No es genial? ¡Ahora tenemos un widget limpio y elegante que podemos entender fácilmente! Imagine cuántos niveles de widgets anidados tendría que usar para recrear este diseño sin la ayuda de extensiones.

Finalizando

Para finalizar, en esta publicación, hemos seguido un enfoque alternativo sobre cómo estructurar un árbol de widgets en un proyecto Flutter, aplicando un concepto similar a los ViewModifiers de SwiftUI.

Como resultado, esto podría ayudarnos a aplanar la jerarquía de widgets y reducir el anidamiento. He mostrado algunos ejemplos de tales extensiones, pero puede usar el mismo concepto en muchos otros casos como mejor le parezca.

Gracias por leer, espero que encuentres útil esta publicación.

¡Hasta la proxima vez!