Os botões antigos no Flutter são suficientes para atender à maioria das suas necessidades de desenvolvimento para dispositivos móveis, mas podem ser difíceis de usar, especialmente quando seu aplicativo exige temas personalizados.
Um “novo’universo’de botões de material” foi disponibilizado com o lançamento de Flutter v1.22 em outubro de 2020. Se você ainda não teve tempo para verificá-los, eu recomendo fazer isso porque usar os novos botões Flutter pode economizar muito tempo quando construção de aplicativos móveis.
Neste tutorial, apresentaremos os novos componentes do botão de material disponíveis no Flutter, examinaremos alguns exemplos de como usá-los e demonstraremos como os novos botões do Flutter melhoram a experiência do desenvolvedor.
Cobriremos o seguinte com explicações detalhadas e exemplos:
- O que são os botões Novo material no Flutter?
- Quais são as diferenças dos novos botões Flutter?
- O que você pode fazer com os novos botões Flutter?
- Por que você deve usar os novos botões de Material no Flutter
Quais são os novos botões de material no Flutter?
Em vez de desenvolver as classes de botão existentes, o Flutter criou novos widgets e temas de botão para substituí-los. Os nomes dos novos botões Flutter destinam-se a sincronizar o Flutter com o Especificação do material design . Isso significa que os botões estão atualizados com as novas diretrizes e também têm novos estilos.
Simplificando, os novos botões disponíveis no Flutter são mais fáceis de entender e usar. Eles simplificam a definição de temas comuns nos níveis de aplicativo e widget. Por exemplo, você pode alterar a cor do texto de todos os TextButton s usados no aplicativo sem afetar a cor do texto de Elevatedbutton ou OutlinedButton . Você também pode definir a cor do texto de OutlinedButton em vários estados, como hover e focus.
Aqui estão os novos botões de material introduzidos no Flutter v1.22:
TextButton
Você pode simplesmente usar TextButton em um lugar como AppBar para fechar a tela, dentro da caixa de diálogo para fechá-la, etc. Você deve evitar colocar este botão dentro de qualquer lista rolável para óbvio Razões de UI/UX.
ElevatedButton
ElevatedButton é mais adequado em locais onde o aplicativo requer ação direta do usuário, como confirmar um pedido ou reservar um bilhete. Uma vez que já está elevado, você deve evitar colocá-lo sobre qualquer outro widget elevado, como cartões.
OutlinedButton
De várias maneiras, OutlinedButton é uma mistura de TextButton e ElevatedButton . É um TextButton se você remover a borda e dá a impressão de ElevatedButton se você passar o mouse ou pressionar sobre ele. Este botão é um botão de ênfase média, o que significa que pode ser usado em locais onde a ação é importante, mas não crucial.
Aqui está o código mínimo para implementar os novos botões de Material em seu aplicativo Flutter:
Coluna ( mainAxisAlignment: MainAxisAlignment.center, crianças: [ TextButton ( onPressionado: () {}, filho: Texto ('TextButton'), ), SizedBox ( altura: 20, ), ElevatedButton ( onPressionado: () {}, filho: Texto ('ElevatedButton'), ), SizedBox ( altura: 20, ), OutlinedButton ( onPressionado: () {}, filho: Texto ('OutlinedButton'), ) ],
),
Quais são as diferenças dos novos botões Flutter?
Cada novo botão de Material no Flutter tem seu próprio tema, em vez de especificar um tema comum que se aplica a outros botões também. Isso oferece mais flexibilidade do que os botões antigos do Flutter-a saber, FlatButton , RaisedButton e OutlineButton .
A tabela abaixo mostra os widgets e temas antigos associados à iteração anterior dos botões Flutter junto com os novos widgets e temas projetados para substituí-los.
Uma mudança sutil, mas importante, a ser observada: OutlineButton agora é OutlinedButton (há d adicionado ao nome). Se você não tomar cuidado, pode perder essa mudança e acabar escrevendo todo o seu código com o botão antigo (divulgação completa: isso aconteceu comigo ao desenvolver os exemplos para este tutorial).
Falando nisso, vamos mergulhar em alguns exemplos práticos para ver os novos botões Flutter em ação.
O que você pode fazer com os novos botões Flutter?
Para mostrar como os novos botões de material funcionam em comparação com os botões antigos de Flutter, criaremos uma demonstração prática de cada um.
O código a seguir representa o antigo FlatButton em comparação com o novo TextButton lançado com Flutter v1.22:
Coluna ( mainAxisAlignment: MainAxisAlignment.center, crianças: [ FlatButton ( onPressionado: () {}, filho: Text ('FlatButton (Old)'), ), SizedBox ( altura: 40, ), TextButton (onPressed: () {}, child: Text ('TextButton (New)')) ],
)
Isso gera a seguinte saída:
A primeira diferença perceptível é que o novo TextButton usa as cores do tema no nível do aplicativo sem nenhum esforço extra. Para este aplicativo, o primarySwatch é definido como Colors.teal e TextButton o define automaticamente como a cor do texto enquanto FlatButton falha em fazê-lo.
primarySwatch: Colors.teal,
Se você olhar com atenção, verá que, ao clicar em um TextButton , o efeito cascata é muito mais suave do que o de FlatButton .
Substituindo propriedades
No exemplo a seguir, tentaremos alterar a cor do texto dentro do botão:
Coluna ( mainAxisAlignment: MainAxisAlignment.center, crianças: [ FlatButton ( onPressionado: () {}, textColor: Colors.pink, filho: Texto ( 'FlatButton (Old)', style: TextStyle (fontSize: 30), ), ), SizedBox ( altura: 40, ), TextButton ( onPressionado: () {}, style: TextButton.styleFrom ( primário: Colors.pink, ), filho: Texto ( 'TextButton (Novo)', style: TextStyle (fontSize: 30), ), ) ],
)
Ambos os botões produzem a mesma saída, mas a forma como a cor é atribuída é diferente. Para FlatButton , a cor é dada ao parâmetro textColor . TextButton tem uma propriedade de estilo que aceita o classe ButtonStyle , que pode conter os padrões de um botão. TextButton.styleFrom é um método conveniente para retornar ButtonStyle com a capacidade de substituir os padrões. primário é usado para definir a cor do texto.
Ter uma propriedade de estilo para o botão fornece uma experiência semelhante ao estilo de escrita para o Texto .
Neste ponto, você deve estar pensando por que precisamos dessa propriedade de estilo complicada se podemos fazer as mesmas coisas com parâmetros simples no próprio FlatButton ? Imagine um caso em que você precise fazer muitas personalizações para um botão para se adequar à nova marca personalizada. É aí que se torna útil.
Personalização de botões no Flutter
Digamos que você queira alterar a cor do texto de um botão, mas apenas quando ele é pressionado. Veja como você faria isso:
TextButton ( onPressionado: () {}, estilo: ButtonStyle ( foregroundColor: MaterialStateProperty.resolveWith ( (Defina os estados de ) { if (states.contains (MaterialState.pressed)) return Colors.pink; return null;//Adie para o padrão do widget. }), ), filho: Texto ( 'TextButton (Novo)', style: TextStyle (fontSize: 30), ),
)
A cor é fornecida ao parâmetro foregroundColor , que aceita o MaterialStateProperty . MaterialStateProperty usado para definir quais cores mostrar com base nos diferentes estados do botão, como pressionado, pairar, focado e desabilitado. Isso cria um mundo totalmente novo de personalizações possíveis.
Definição de padrões no nível do aplicativo
O problema com os botões Flutter antigos é que se você tentar alterar a cor do texto para todos os FlatButtons no nível do aplicativo, isso mudaria a cor do texto de RaisedButton e OutlineButton também, como este:
MaterialApp ( título:'Flutter Demo', tema: ThemeData ( PrimarySwatch: Colors.teal, brilho: Brightness.dark, buttonTheme: ButtonThemeData (textTheme: ButtonTextTheme.accent), ), home: OldButtons (), debugShowCheckedModeBanner: false, );
Com a nova atualização do Flutter, agora temos mais controle sobre os padrões dos botões no nível do aplicativo. Usando o mesmo exemplo, veja como alterar a cor do texto de TextButton sem afetar outros botões no Flutter v1.22:
MaterialApp ( título:'Demonstração do Flutter', tema: ThemeData ( PrimarySwatch: Colors.teal, brilho: Brightness.dark, textButtonTheme: TextButtonThemeData ( style: TextButton.styleFrom (primary: Colors.red)), ), home: NewButtons (), debugShowCheckedModeBanner: false, );
Como você pode ver, queremos apenas uma cor diferente para TextButton e temos uma propriedade dedicada, textButtonTheme , para fazer exatamente isso.
Por que você deve usar os novos botões de Material no Flutter
Os novos botões do Flutter v.122 podem economizar muito tempo para que você possa se concentrar no desenvolvimento do seu aplicativo em vez de perder tempo procurando soluções para o que deveriam ser soluções simples. Em sua atualização mais recente, o Flutter abordou de forma proativa muitos dos desafios comuns associados aos botões antigos do Flutter. Parabéns à equipe e à comunidade do Flutter!
Os botões antigos do Flutter ainda funcionam para casos de uso mais simples, mas quem sabe por quanto tempo? É sempre uma boa prática sujar as mãos em novos recursos à medida que são lançados, especialmente se eles forem projetados para substituir recursos mais antigos.
A postagem Botões de novo material no Flutter apareceu primeiro em LogRocket Blog .
