Introdução

Neste artigo, você aprenderá tudo sobre widgets e a classe de cartão no Flutter, enquanto reúne os dois para criar um widget de cartão. No final deste artigo, você terá um widget de cartão reutilizável para personalizar o quanto quiser.

Widgets em Flutter

Criar aplicativos totalmente funcionais com o Flutter pode ser emocionante, pois envolve reunir vários componentes e combiná-los um de cada vez para criar um aplicativo completo. Não importa o quão complexo ou grande seja um aplicativo Flutter, todos eles usam os blocos de construção básicos chamados de”widgets”.

Os widgets formam a base das visualizações e telas em um aplicativo Flutter, e a combinação adequada dos diversos widgets disponíveis resultará em uma tela com um design elegante.

Existem dois tipos de widgets Flutter:

• Widgets sem estado são widgets imutáveis, o que significa que eles não mudam. Qualquer informação que eles carreguem permanece constante durante a vida útil do widget
• Widgets com estado são widgets cujas informações e propriedades podem mudar durante o tempo de execução do widget. Suas propriedades podem ser atualizadas, alteradas ou excluídas enquanto ainda está em tempo de execução

Exemplos de widgets são o widget central (alinha seu filho ou item ao centro), widget de linha (alinha seus filhos em um formato horizontal) e widget de coluna (alinha seus filhos verticalmente). Combinar esses widgets prontos torna o desenvolvimento mais fácil e rápido.

No entanto, há momentos em que alguns Widgets integrados não atendem a uma necessidade imediata de um aplicativo e você precisa combinar um ou dois. Por exemplo, o widget de cartão integrado no Flutter não atende totalmente às nossas necessidades, então temos que juntá-lo a outros widgets para construir nosso próprio widget de cartão reutilizável e totalmente personalizável.

Construindo um widget de cartão

Neste tutorial, criaremos um widget de cartão que funciona como um cartão de visita com uma imagem, descrição do trabalho e nome da empresa.

Isso pode ajudar a estabelecer seu conhecimento sobre widgets Flutter e também ajudá-lo a ver as várias técnicas que você pode aplicar para criar um único widget a partir da combinação de outros.

Primeiros passos

Vamos ao que interessa. A primeira etapa é criar um novo projeto:

 vibração criar card_widget

Este comando cria os arquivos, pastas e tudo o que é necessário para iniciar um novo projeto Flutter.

Em seguida, precisamos criar um MaterialApp padrão. A classe MaterialApp do Flutter é uma classe predefinida em um aplicativo Flutter. É o componente principal ou central.

Podemos acessar todos os outros componentes e widgets fornecidos pelo Flutter SDK com o seguinte:

 import'package: flutter/material.dart';
void main ()=> runApp (MyApp ());
class MyApp extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'Material App', casa: Scaffold ( body: Text ('Material App'), ), ); }
}

No código acima, um widget sem estado chamado MyApp é a base do aplicativo que iremos criar. Ele retorna MaterialApp , que nos dá acesso a várias propriedades e componentes no material design.

Passamos o título, que é o nome que queremos chamar de nosso aplicativo (no nosso caso, “Cartão de Visita”). Também passamos um widget Scaffold para a propriedade home do MaterialApp.

O widget Scaffold preenche todo o espaço disponível na tela do seu dispositivo móvel; fornece acesso a um grupo diversificado de outros widgets, como a barra de aplicativos, botão de ação flutuante, gavetas e muito mais.

No widget Scaffold , temos a propriedade body , que é o espaço em que todas as outras coisas, exceto a barra do aplicativo, podem ser colocadas. Só podemos passar um widget de texto neste aplicativo de material padrão com Text ('Material App') . Vamos mudá-lo à medida que avançamos no tutorial.

Determinando o comportamento do widget do cartão

A próxima etapa é criar um novo widget sem estado. Por que estamos usando um widget sem estado? Porque nenhuma das propriedades do widget de cartão deve ser alterada durante seu tempo de execução. A cor, a forma e os detalhes não devem mudar depois de configurados no aplicativo.

Chamaremos o widget sem estado de “BusinessCard”. Por enquanto, passamos um widget Container vazio com o código abaixo:

 class BusinessCard extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return Container (); }
}

Agora, passe o nome do widget sem estado para o parâmetro body do MaterialApp:

 import'package: flutter/material.dart';
void main ()=> runApp (MyApp ());
class MyApp extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'Material App', casa: Scaffold ( body: BusinessCard (),//<=o nome vai aqui ), ); }
}

No widget BusinessCard , retorne o construtor da classe Card :

 class BusinessCard extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { cartão de retorno ();//<==O construtor da classe Card }
}

Determinando as propriedades do widget do cartão

A classe Cartão fornece várias propriedades que podem ser usadas para modificar os visuais do cartão, como cor, forma, borda e posição. Por exemplo, podemos decidir estilizar nosso cartão com uma cor verde ( Colors.green ) ou vermelho ( Colors.red ).

O mesmo vale para as outras propriedades. Se desejarmos que o cartão tenha uma forma retangular arredondada, podemos passar RoundedRectangularBorder () para o parâmetro de forma, e ele é construído dessa forma.

Para este artigo, usaremos apenas as propriedades color e elevation .

A elevação é usada para controlar a coordenada Z do cartão e o tamanho da sombra sob o cartão. Cole o código abaixo para tornar o cartão cinza com uma elevação de 8,0:

 @override Construção de widget (contexto BuildContext) { cartão de retorno ( color: Colors.grey [300], elevação: 8,0,

Como o widget do cartão não tem parâmetros de altura e largura, podemos usar o widget Container passando altura e largura propriedades:

 filho: Container ( preenchimento: const EdgeInsets.symmetric (vertical: 16, horizontal: 16), altura: 200, largura: 350, filho: coluna ( crianças: [], ),

Neste ponto, o layout básico do cartão foi definido. Podemos passar os componentes do widget BusinessCard para o bloco filho do widget Coluna (como visto no bloco de código acima).

Determinando o layout do widget do cartão

Neste artigo, estamos usando um layout básico de cartão de visita. Mais ajustes e estilos podem ser adicionados para sua satisfação.

Começamos criando os componentes do widget Coluna . Primeiro, definimos mainAxisAlignment e crossAxisAlignment .

Esses dois parâmetros para os widgets Linha e Coluna são usados ​​para definir como os componentes filhos são organizados vertical e horizontalmente:

 Coluna ( crossAxisAlignment: CrossAxisAlignment.start, crianças: [ Fileira( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, crianças: [],

O MainAxisAlignment.spaceBetween garante que os filhos sejam espaçados o mais para trás possível, enquanto o CrossAxisAlignment.start garante que os componentes comecem do topo verticalmente.

Em seguida, precisamos passar o avatar do círculo. Este é um widget que o Flutter fornece para exibir uma imagem de ativos ou da Internet.

Estaremos utilizando um avatar aleatório da internet. Passe o link da imagem para o widget NetworkImage :

 crianças: [ const CircleAvatar ( raio: 50,//damos à imagem um raio de 50 backgroundImage: NetworkImage ( 'https://webstockreview.net/images/male-clipart-professional-man-3.jpg'), ),

A próxima etapa é construir a Coluna na qual outros detalhes de que precisamos serão passados. Usamos o widget Texto para exibir o número de telefone, cidade e organização.

O SizedBox é um widget para introduzir espaçamento no aplicativo. Vamos usá-lo para colocar um espaço entre os textos:

 Coluna ( crossAxisAlignment: CrossAxisAlignment.end,
//CrossAxisAlignment.end garante que os componentes sejam alinhados da direita para a esquerda. crianças: [ Recipiente( margem: const EdgeInsets.only (topo: 8), largura: 150, cor: Colors.black54, altura: 2, ), const SizedBox (altura: 4), Const Text ('+ 2348012345678'), Const Text ('Chelsea City'), Const Text ('Flutteria'), ], ), ], ), const SizedBox (altura: 20),

A seguir, criamos outra Linha para lidar com o nome, a posição e a empresa. Eles são todos textos, então passamos cada um para um widget Texto :

 Row ( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, crianças: [ Coluna( crossAxisAlignment: CrossAxisAlignment.start, crianças: [ const Text ( 'John Doe', style: TextStyle ( fontSize: 16, fontWeight: FontWeight.bold, ), ), const SizedBox (altura: 4), Const Text ('JohnDee'), ], ),

O que fizemos no bloco de código acima é criar um widget Row , cuja função é alinhar seus filhos em um formato horizontal. Como nosso cartão é dividido em duas seções, usamos dois widgets Column que fazem o oposto do widget Row e alinham seus filhos verticalmente.

Na primeira coluna, passamos o widget Texto , que usamos para exibir o nome e o apelido da pessoa (apenas uma pequena adição):

 const SizedBox (largura: 32), Coluna( crossAxisAlignment: CrossAxisAlignment.end, crianças: [ const Text ( 'Desenvolvedor de aplicativos móveis', style: TextStyle ( fontSize: 16, fontWeight: FontWeight.bold, ), ), const SizedBox (altura: 4), const Text ('FlutterStars Inc'), ], ) ], ), ], ),

Usamos SizedBox para separar os dois widgets Texto . SizedBox é um widget que cria um espaço de um tamanho específico. Ele pode ou não ter um widget ou componente filho. Depois que sua altura e largura forem declaradas, ele está pronto para prosseguir.

Nós o passamos com uma altura de quatro para criar um pequeno espaço entre nossos widgets Texto e torná-lo mais limpo e apresentável.

Na segunda coluna, repetimos a mesma coisa, passando a descrição do trabalho e o nome da empresa para os widgets Texto . Em seguida, usamos um SizedBox de largura 32 para separar as duas colunas.

Ótimo! Concluímos a criação do layout básico do widget BusinessCard . Execute o comando no bloco de código abaixo dentro de seu terminal para iniciar o aplicativo.

Com a combinação dos widgets de cartão, contêiner, texto, linha e coluna integrados, construímos do zero um widget de cartão que pode ser usado em qualquer lugar do aplicativo chamando seu construtor:

 corrida vibrante

Abaixo está uma captura de tela do widget do cartão totalmente construído e pronto para uso:

Conclusão

Existem várias coisas que o widget de cartão integrado pode fazer. Quando usado em combinação com outros widgets, ele se reúne para formar widgets lindamente projetados e totalmente reutilizáveis, prontamente disponíveis para uso em qualquer lugar do aplicativo. Lembre-se de que os widgets são blocos de construção, e a combinação certa pode trazer o melhor do seu aplicativo.

A postagem Construindo um widget de cartão no Flutter apareceu primeiro no LogRocket Blog .