Flutter. Simplificando o layout do widget com extensões Dart

No Dart 2.7, fomos apresentados a extensões que permitem aos desenvolvedores adicionar novas funcionalidades aos tipos existentes. As extensões podem ser um grande auxiliar não apenas quando escrevemos a lógica de negócios, mas também quando temos outras tarefas! Um exemplo dessa tarefa é trabalhar com widgets.

Com base na minha experiência no desenvolvimento do iOS, inspirada no ViewModifierSwiftUI, eu queria descobrir como usar as extensões do Dart de maneira semelhante para reduzir a confusão visual resultante de um grande aninhamento da árvore de widgets.

Vamos dar um exemplo!

Opção com widgets aninhados

Abaixo está um MyWidgetwidget com texto dentro Padding(do exemplo padrão com 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)
      );
  }
}

Agora vamos ver como podemos fazer o mesmo com as extensões Dart.

Opção com extensões

Nós criar uma extensão para a classe Widgetcom o método padding. Quando esse método é chamado, o objeto será envolvido em Padding:

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

Com a nova extensão, podemos atualizar da MyWidgetseguinte forma:

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

? , ! , , .

Neste artigo, consideramos uma abordagem alternativa para formar uma árvore de widgets em um projeto Flutter, usando um conceito semelhante ao ViewModifierdo SwiftUI. Com essa abordagem, podemos simplificar as árvores de widgets, reduzindo seu aninhamento. E demonstrei apenas alguns exemplos dessas extensões, mas pelo mesmo princípio, você pode criar muitas novas para outros casos em que elas serão igualmente úteis.

Agradecimentos para sua atenção! Espero que você ache este post útil. Se você tiver alguma dúvida ou comentário sobre este material, não hesite em entrar em contato comigo no Twitter !

Até a próxima vez!