Olá Habr! Apresento a você a tradução do artigo
"Os aplicativos Flutter sonham com widgets com reconhecimento de plataforma?"
Ao desenvolver aplicativos no Flutter com um design nativo para iOS e Android, deparei-me com o fato de que precisava escrever várias condições para verificar a plataforma na qual o código é executado, enquanto fazia duas implementações de interface do usuário semelhantes. Não gostei disso e estou feliz por ter encontrado um artigo que me ajudou a resolver meu problema.
Sobre o autor: Swav Kulinski - Desenvolvedor Android líder do App Business, Flutter GDE.
A seguir, falaremos em nome do autor.
O Flutter é uma solução de desenvolvimento de aplicativos móveis multiplataforma que promete liberdade absoluta na criação de uma interface do usuário, independentemente da plataforma. Isso é obtido pelo fato de a estrutura usar seu próprio mecanismo de renderização para desenhar widgets.
O problema com muitas soluções de plataforma cruzada é que elas têm a mesma aparência no iPhone e no Android. Mas e as empresas que precisam manter a aparência da plataforma? Quem precisa usar o Material Design para Android e a Interface humana para iOS? Para essas empresas, o Flutter é adequado, equipado com pacotes que contêm um conjunto de widgets personalizados para iOS e Android, chamados Cupertino e Material.
O Flutter é multiplataforma por natureza, mas quando se trata da interface do usuário de layout, que deve parecer nativa para cada plataforma, isso não é totalmente verdade. Temos que fazer duas implementações de layout semelhantes. Isso se deve ao fato de que, por exemplo, para iOS, o CupertinoNavigationBar deve estar no CupertinoPageScaffold e, no Android, o AppBar dentro do Scaffold. Esse recurso reduz a vantagem da plataforma cruzada no Flutter, pois para cada plataforma você precisa escrever seu próprio código para o layout.
Gostaria de propor uma abordagem que permita criar interfaces abstratas e ajustar a aparência e o comportamento do aplicativo, dependendo da plataforma em que ele é executado.
Considere os seguintes construtores para dois widgets que fornecem uma barra de aplicativos superior:
CupertinoNavigationBar ({ this.leading, this.middle, })
e
AppBar ({ this.leading, this.title })
Ambos os widgets acima desempenham o mesmo papel, sendo o painel superior do aplicativo no estilo de Cupertino e Material. Mas ainda assim eles exigem informações de uma maneira diferente. É necessária uma solução que abstraia a forma como criamos widgets específicos e, ao mesmo tempo, forneça implementação, dependendo da plataforma. Vamos usar o bom e velho método de fábrica.
import 'package:flutter/material.dart'; import 'dart:io' show Platform; abstract class PlatformWidget<I extends Widget, A extends Widget> extends StatelessWidget { @override Widget build(BuildContext context) { if (Platform.isAndroid) { return createAndroidWidget(context); } else if (Platform.isIOS) { return createIosWidget(context); } // platform not supported returns an empty widget return Container(); } I createIosWidget(BuildContext context); A createAndroidWidget(BuildContext context); }
De fato, a classe acima é uma fábrica de widgets dependente da plataforma que, quando implementada, pode fornecer um construtor personalizado (ou vários construtores nomeados) que suporta as necessidades de ambas as classes específicas.
Eu escolhi os genéricos para retornar classes específicas, porque às vezes o widget pai precisa de um determinado tipo, que deve ser retornado do widget filho.
Agora podemos implementar nosso primeiro widget.
class PlatformAppBar extends PlatformWidget<CupertinoNavigationBar, AppBar> { final Widget leading; final Widget title; PlatformAppBar({ this.leading, this.title, }); @override AppBar createAndroidWidget(BuildContext context) { return AppBar( leading: leading, title: title, ); } @override CupertinoNavigationBar createIosWidget(BuildContext context) { return CupertinoNavigationBar( leading: leading, middle: title, ); } }
Muito simples, certo? Observe que temos controle total sobre o conteúdo dos widgets no painel de aplicativos.
Suponhamos que implementamos o Andaime e o Botão.
class PlatformScaffoldWidget extends PlatformWidget<CupertinoPageScaffold,Scaffold> { ... } class PlatformButton extends PlatformWidget<CupertinoButton,FlatButton> { ... }
Agora estamos prontos para usar e reutilizar nossos widgets orientados à plataforma.
Widget build(BuildContext context) { return PlatformScaffoldWidget( appBar: PlatformAppBarWidget( leading: PlatformButton( child: Icon(Icons.ic_arrow_back), onClick: () => _handleBack() ), title: Text("I love my Platform"), ), content: ... ); }
Feito! O código acima exibirá uma barra de aplicativos orientada a plataforma em ambas as plataformas, e nosso PlatformScaffoldWidget está pronto para ser reutilizado no restante do aplicativo sem problemas.
O código pode ser visualizado no
github.