MDC-102: Estrutura do material e layout

O design de material oferece formatos de navegação que garantem grande facilidade de uso. Um dos componentes mais visíveis é a barra de aplicação superior.

Crie uma conta de desenvolvedor do Google Play

Informe suas informações pessoais, o endereço de sua escolha e sua senha.

Aceite as condições gerais de venda (GTC).

Adicione uma boa foto sua.

Crie uma conta de desenvolvedor do Google Play

O procedimento para criar uma conta do Google Play Developer é muito mais simples do que na Apple.

Conecte -se com seu endereço do Gmail.

Aceite o GTC.

Ajuste as taxas de registro: um único pagamento de 25 euros para publicar todas as aplicações de sua escolha !

Informe as informações relacionadas à sua conta: nome do desenvolvedor, endereço de e -mail e número de telefone.

Isso respondeu sua pergunta ?

Obrigado pelos comentários, houve um problema para enviar seus comentários. por favor, tente novamente mais tarde.

Última atualização em 9 de novembro de 2021

Artigos associados

• Crie um aplicativo no Google Play Console
• Gerar o certificado Android P12
• Exportar o arquivo APK ou AAB
• Publique um aplicativo Android
• Publique um aplicativo Android fora da Play Store
• Publique na loja do Google Play

MDC-102: Estrutura do material e layout

Os componentes materiais (MDC) ajudam os desenvolvedores a implementar o design de materiais. Projetado por uma equipe de engenheiros e especialistas em experiências de usuário no Google, o MDC oferece dezenas de componentes elegantes e funcionais da interface do usuário. Está disponível para Android, iOS, Web e Flutter.material.Io/desenvolver.

No workshop de programação MDC-101, você usou dois elementos de componentes de material para criar uma página de conexão: campos de texto e botões que compreendem animações “tinta”. Nessas bases, vamos enriquecer nossa aplicação adicionando navegação, estrutura e dados.

Objetivos da oficina

Neste workshop de programação, você criará uma tela inicial para Santuário, Um pedido de comércio eletrônico para a venda de roupas e itens para a casa. Esta tela conterá:

• Uma barra de aplicação mais alta
• Uma lista de produtos na forma de uma grade

Observe que este workshop de programação foi substituído pelo Material 3, com exceção das capturas de tela. Eles, no entanto, transmitem a mesma informação.

Este workshop de programação é o segundo dos quatro workshops que o ajudarão a criar um aplicativo para um produto chamado Sanctuary. Recomendamos que você siga todos os workshops de programação em ordem, para avançar nas tarefas pouco a pouco. Você encontrará seus workshops de programação aqui:

• MDC-101 Flutter: Princípios básicos dos componentes materiais
• MDC-103 Flutter: Uso de temas de design de material (cor, formas, elevação e tipo)
• MDC-104 Flutter: Componentes avançados de design de material

Componentes e subsistemas de material de vibração do material neste workshop de programação

• Superior
• Grades
• Cartões

Neste workshop de programação, você usará os componentes padrão fornecidos pela Flutter do material. Você aprenderá a personalizá-los na seção MDC-103: Uso de temas de design de material (cor, formas, elevação e tipo).

Como você avaliaria seu nível de experiência em desenvolvimento com flutter ?

2. Configurar o ambiente de desenvolvimento da vibração

Para este workshop, você precisa de dois softwares: The Flutter SDK e um editor.

Você pode executar o workshop de programação em um dos seguintes dispositivos:

• Um dispositivo Android ou iOS físico conectado ao seu computador e definido no modo de desenvolvedor.
• O simulador iOS (ferramentas Xcode para instalar).
• O emulador Android (que deve ser configurado no Android Studio).
• Um navegador (o Chrome é necessário para a depuração).
• Como Windows, Linux ou MacOS Desktop. Você deve desenvolver seu aplicativo na plataforma onde planeja implantá -lo. Por exemplo, se você deseja desenvolver um aplicativo Windows Desktop, deve fazê -lo no Windows para acessar a cadeia de compilação apropriada. Aprenda também sobre os requisitos específicos para sistemas operacionais, que são detalhados nos documentos.vibrar.Dev/Desktop.

3. Baixe o aplicativo de partida para o workshop de programação

Você já seguiu o workshop do MDC-101 ?

Se você terminou o MDC-101 Programming Workshop, seu código deve estar pronto para iniciar este workshop. Vá para o próximo estágio: Adicione uma barra de aplicação mais alta.

Você começa do zero ?

Baixe o aplicativo de partida do workshop inicial

O aplicativo inicial está no material-componente-fletter-codelabs-102-starter_and_101-complete/mdc_100_series .

… Ou clonar o workshop do GitHub

Para clonar este workshop de programação do Github, execute os seguintes comandos:

Clone git https: // github.Com/componentes materiais/componentes de material-fletter-codelabs.Git CD Material-Components-Flutter-Codelabs/MDC_100_Series Git Checkout 102-Starter_and_101

Para obter ajuda, consulte a seção de clonagem do Github

Escolha o ramo correto

Os workshops de programação MDC-101 em 104 dependem um do outro. Então, quando você termina o código do workshop MDC-102, ele se torna o código inicial do workshop MDC-103. O código é dividido em várias filiais, que você pode exibir a lista usando este comando:

Git Branch -Lista

Para exibir o código acabado, vá para a filial 103-Starter_and_102-Complete .

Abra o projeto e execute o aplicativo

1. Abra o projeto na editora de sua escolha.
2. Siga as instruções sobre o editor que você escolheu. Eles estão acessíveis ao parágrafo “Executar o aplicativo” (execute o aplicativo) no início da página de unidade de teste> (primeiros passos> teste).

Operação bem -sucedida. A página de conexão do santuário do workshop de programação MDC-101 deve ser exibida no seu dispositivo.

Agora que a tela de conexão está em vigor, vamos adicionar alguns produtos ao aplicativo.

4. Adicione uma barra de aplicação mais alta

No momento, se você clicar no botão “Avançar”, a tela inicial será exibida com a mensagem “Você fez isso!” (Você conseguiu.)). Perfeito. No entanto, nosso usuário não tem nada a fazer e não sabe onde ele está no aplicativo. Para ajudá -lo, é hora de adicionar navegação.

Lá navegação refere -se a componentes, interações, indicadores visuais e arquitetura de informações que permitem que os usuários naveguem em um aplicativo. Ele permite descobrir conteúdo e recursos e executar facilmente tarefas.

Para saber mais, consulte o artigo dedicado à navegação nas instruções de design de materiais.

O design de material oferece formatos de navegação que garantem grande facilidade de uso. Um dos componentes mais visíveis é a barra de aplicação superior.

Você pode conhecer esse elemento sob o nome “Barra de navegação” no iOS, ou simplesmente “barra de aplicativo” ou “cabeçalho”.

Para oferecer aos usuários acesso rápido a outras ações, vamos adicionar uma barra de aplicativo mais alta.

Adicione um widget AppBar

Em casa.Dart, adicione uma AppBar a “andaime” e exclua a const destacada:

Retorne const Scaffold (// TODO: Adicione a barra de aplicativo (102) AppBar: AppBar (// TODO: Adicionar botões e título (102)), 

A adição doAppBar No campo AppBar: o andaime nos permite obter um layout perfeito e gratuito, deixando a barra de aplicação na parte superior da página e abaixo do corpo.

Andaime é um widget importante no materialpps. Ele fornece APIs práticas para exibir todos os tipos de componentes de assuntos atuais, como painéis, barras de notificação “Snackbar” e elementos da folha inferior. Até facilita a colocação de um botão de ação flutuante.

Consulte a documentação do Flutter para saber mais sobre o andaime.

Registre o projeto. Quando o santuário estiver atualizado, clique em Próximo (A seguir) para exibir a tela inicial.

O elemento está bem posicionado, mas não tem um título.

Adicione um widget de texto

Em casa.Dart, adicione um título à barra de aplicativos AppBar:

// TODO: Adicione a barra de aplicativo (102) AppBar: AppBar (// TODO: Adicione botões e título (102) Título: Const Text ('Suriário'), // TODO: Adicionar botões de direita (102) 

Registre o projeto.

Você pode ter notado variações para cada plataforma. O sistema de design de material leva em consideração que cada plataforma (Android, iOS, Web) é diferente e que as expectativas do usuário são diferentes. Por exemplo, no iOS, os títulos são quase sempre centrados. Este é o comportamento padrão fornecido pelo Uikit. No Android, eles estão alinhados à esquerda. Portanto, se você usar um emulador ou um dispositivo Android, seu título deve estar alinhado à esquerda. No caso de um simulador ou um dispositivo iOS, ele deve ser centrado.

Para saber mais, consulte este artigo sobre adaptação a diferentes plataformas com design de material.

Muitas barras de aplicativos têm um botão ao lado do título. Adicione um ícone de menu ao nosso aplicativo.

Adicione um botão IconButton no início da linha

Sempre em casa.Dart, defina um elemento iconbutton para o campo principal: da barra de aplicativos AppBar. (Coloque -o antes do campo do título: de acordo com o início do início ao final da linha):

 // TODO: Adicionar botões e título (102) LIVAMENTO: iconbutton (ícone: const Icon (ícones.Menu, semanticlabel: 'menu',), onpressed: () < print('Menu button'); >, )), 

Registre o projeto.

O ícone do menu (também chamado de “Hamburger”), aparece no local desejado.

A classe Iconbutton é uma maneira prática de integrar ícones materiais em seu aplicativo. Ela usa um widget Ícone. Flutter tem uma coleção completa de ícones na sala de aula Ícones. Os ícones são importados automaticamente de acordo com os mapeamentos de canais “const”.

Para saber mais sobre a aula de ícones, consulte a documentação da Flutter. Para saber mais sobre o widget do ícone, consulte a documentação da Flutter.

Você também pode adicionar botões no final da linha. Em Flutter, esses botões são chamados de “ações”.

Termos começo E FIM expressar o significado da leitura, independentemente do idioma em questão. Quando você trabalha em uma língua lendo da esquerda para a direita, como o inglês, começo significa Para a esquerda E FIM significa Para a direita. Em um idioma que lê da direita para a esquerda, como o árabe, o termo começo significa Para a direita, E FIM significa Para a esquerda.

Para saber mais sobre a reversão da interface do usuário, consulte as instruções de design de material sobre bidirecionalidade.

Adicione ações

Há espaço suficiente para outros dois elementos de iconbutton.

Adicione -os à instância do AppBar após o título:

// TODO: Adicionar botões de direita (102) Ações: [iconbutton (ícone: const ícone (ícones.Pesquisar, semanticlabel: 'Search',), OntPresd: () < print('Search button'); >, ), Iconbutton (ícone: const Icon (ícones.Sintonize, semanticlabel: 'filtro',), onpresd: () < print('Filter button'); >, ),], 

Registre o projeto. Sua tela inicial deve surgir da seguinte maneira:

O aplicativo agora tem um botão no início da linha, um título e duas ações à direita. A barra de aplicação também tem um efeito deelevação Devido a um leve tom indicando que está em um nível diferente do do conteúdo.

Em uma aula de ícones, o campo Semanticlabel é uma maneira comum de adicionar informações de acessibilidade ao vibração. É um sistema muito próximo da redação do conteúdo do Android e da funcionalidade de uiaccessibilidade no iOS acessibilidadeLabelbel . Você vai encontrar em muitos cursos.

As informações contidas neste campo possibilitam fornecer informações sobre os leitores da tela sobre o papel deste botão.

Se um widget não tiver um campo semanticLabel:, você pode encapsulá -lo em um widget Semântica. Para saber mais sobre o widget de semântica, consulte a documentação da Flutter.

5. Adicione uma folha em uma grade

Agora que nosso aplicativo é um pouco mais estruturado, vamos organizar seu conteúdo colocando -os em arquivos.

O cartões são elementos independentes que exibem o conteúdo e as ações associadas a um determinado assunto. Eles oferecem uma maneira flexível de apresentar conteúdo semelhante na forma de uma coleção.

Para saber mais, consulte o artigo dedicado aos arquivos nas instruções de design de material.

Para saber mais sobre o widget do cartão (folha), consulte o artigo sobre a criação de layouts em flutter.

Adicione um widget GridView

Vamos começar adicionando uma folha sob a barra de aplicação superior. Atualmente, o widget Cartão (Folha) não contém informações suficientes para se posicionar visivelmente. Vamos, portanto, encapsulá -lo em um widget Gridview.

Substitua o centro no corpo do elemento andaimes por um widget GridView:

// TODO: Adicione uma vista da grade (102) Corpo: Gridview.Conde (CrossAxiscount: 2, preenchimento: Const Edgeinstss.Todos (16.0), ChildAsPetratio: 8.0/9.0, // TODO: Construa uma grade de cartões (102) crianças: [Card ()],),), 

Vamos analisar este código. O widget de grife chama a contagem do fabricante (), porque o número de elementos que ele exibe pode ser contado e não é infinito. Mas ele precisa de informações adicionais para definir seu layout.

A variável CrossAxiscount: indica o número de elementos por linha. Queremos obter duas colunas.

EU’eixo transversal em flutter corresponde ao eixo que não rolamos. A sensação de rolagem é chamada eixo principal. Se você usa rolagem vertical, como é o caso padrão com GridView, o eixo transversal é horizontal.

Para saber mais, consulte a página dedicada à criação de layouts.

O campo de preenchimento: define um espaço livre nos quatro lados do widget Gridview. Obviamente, essa margem não é visível como resultado do elemento ou embaixo dela, porque nenhuma revista infantil ainda foi colocada ao lado desse elemento no momento.

O campo Childaspecto: identifica o tamanho dos elementos na forma de proporções (largura na altura).

Por padrão, Gridview cria blocos de tamanho idêntico.

Temos uma folha, mas está vazia. Adicione widgets infantis a esta folha.

Coloque o conteúdo

As folhas devem incluir áreas para uma imagem, um título e texto secundário.

Atualize as crianças do Widget Gridview:

// TODO: Construa uma grade de cartões (102) crianças: [cartão (clipbehavior: clipe.Antialias, criança: coluna (crossAxisalignment: crossAxisalignment.Início, crianças: [Aspectratio (Aspectratio: 18.0/11.0, criança: imagem.Ativo ('ativos/diamante.png '),), preenchimento (preenchimento: const EdgeInsts.Fromltrb (16.0, 12.0, 16.0, 8.0), Criança: Coluna (CrossAxisalignment: CrossAxisalignment.Iniciar, crianças: [texto ('título'), Const SizeBox (altura: 8.0), text ('text secundário'),],),),],),),)]]], 

Este código adiciona um widget de coluna (coluna) que permite que você tenha widgets infantis verticalmente.

O parâmetro CrossAxisalignment: Field especifica o valor do CrossAxisalignment.Iniciar, o que significa “alinhe o texto no ‘início da linha'”.

O widget Proporção da tela define as proporções da imagem exibida, independentemente do tipo de imagem fornecida.

O elemento Preenchimento define uma margem para o texto.

Os dois widgets Texto um acima do outro é colocado e separado por oito pontos espaciais vazios (SizeBox)). Nós criamos outro elemento Coluna para dar a eles margens internas.

Registre o projeto.

Nesta visão geral, você pode ver que a folha está posicionada com uma margem, seus cantos são arredondados e projeta uma sombra (representando sua elevação). Todo o formulário é chamado de “contêiner” no sistema de design de material (não deve ser confundido com a classe de widget chamada contêiner).

Além do recipiente, todos os elementos das folhas são opcionais em material. Você pode adicionar texto do cabeçalho, um adesivo ou um avatar, um texto de legenda, separadores e até espinhas e ícones.

Para saber mais sobre o conteúdo das folhas, consulte este artigo nas instruções de design de material.

Os lençóis geralmente são exibidos em uma coleção com outras folhas. Organize -os na forma de uma coleção em uma grade.

6. Crie uma coleção de arquivos

Quando várias folhas estão presentes em uma tela, elas são agrupadas em uma ou mais coleções. Os arquivos de uma coleção são coplanares: eles têm a mesma elevação em repouso (ou seja, quando não são selecionados ou movidos, o que não faremos aqui).

Crie uma coleção de arquivos

No momento, nosso lençol está posicionado dentro do campo infantil: grade de gridview. Isso leva a uma grande quantidade de código aninhado que pode ser difícil de ler. Vamos transformar esta parte do código em uma função, permitindo gerar quantas folhas vazias forem necessárias e retornar uma lista de arquivos.

Crie uma função privada acima da função Build () (lembre -se de que as funções que começam com uma linha sublinhada são APIs privadas):

// TODO: Faça uma coleção de cartões (102) Lista _buildGridCards (int Cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); Cartas de retorno; > 

Atribua os arquivos gerados no Widget do campo infantil do Gridview. Não se esqueça de Substitua todos os elementos contidos no widget GridView por este novo código ::

// TODO: Adicione uma vista da grade (102) Corpo: Gridview.Conde (CrossAxiscount: 2, preenchimento: Const Edgeinstss.Todos (16.0), ChildAsPetratio: 8.0/9.0, crianças: _buildGridCards (10) // substituir), 

Registre o projeto.

Os cartões estão presentes, mas não exibem nada no momento. Chegou a hora de adicionar dados do produto.

Adicione dados do produto

O aplicativo contém alguns produtos com imagens, nomes e preços. Adicione isso aos widgets já presentes no arquivo

Então em casa.Dart, importe um novo pacote e alguns arquivos fornecidos para um modelo de dados:

Importar 'Pacote: Flutter/Material.Dardo '; Importar 'Pacote: Intl/Intl.Dardo '; Importar 'modelo/produto.Dardo '; Importar 'Modelo/Products_repository.Dardo '; 

Por fim, modifique _buildGridCards () para recuperar as informações do produto e usar esses dados nos arquivos:

// TODO: Faça uma coleção de cartões (102) // Substitua toda essa lista de métodos _buildGridCards (contexto do BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Tema de temedata final = tema.de (contexto); NumberFormat FinalFormatTratter = NumberFormat.SimpleCurrent (local: instalações.Localof (contexto).para sequenciar ()); Retornar produtos.Mapa ((produto) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >)).Listar (); > 

PERCEBIDO : Aguarde antes de lançar a compilação e a execução. Permanece uma modificação para fazer.

Para formatar o texto, usamos os dados do tema Temedata do valor BuildContext atual.

Para saber mais sobre a formatação do texto, consulte o artigo sobre tipografia nas instruções de design de materiais. Para saber mais sobre a formatação de um tema, continue após este workshop de programação com o MDC-103: Uso de temas de design de material (cor, formas, elevação e tipo).

Também modifique a função Build () para transmitir o valor BuildContext em _buildGridCards () antes de lançar a compilação:

// TODO: Adicione uma vista da grade (102) Corpo: Gridview.Conde (CrossAxiscount: 2, preenchimento: Const Edgeinstss.Todos (16.0), ChildAsPetratio: 8.0/9.0, crianças: _buildGridCards (contexto) // Código de alteração), 

Reinicie o aplicativo quente.

Você pode notar que não adicionamos espaço vertical entre os arquivos. Porque eles têm quatro margens por parte superior e inferior têm.

Registre o projeto.

Os dados produzidos são exibidos, mas as imagens são cercadas por um espaço desnecessário. Por padrão, as imagens são desenhadas com o campo Boxfit definiram .Scaledown (neste caso). Substitua este valor por .FitWidth para que ela possa aumentar o zoom e remover o espaço desnecessário.

Adicione um campo de ajuste: como o valor do boxfit.FitWidth:

 // TODO: Ajuste o tamanho da caixa (102) FIT: Boxfit.FitWidth, 

Nossos produtos agora são perfeitamente exibidos no aplicativo.

7. Parabéns !

Nosso aplicativo oferece operação básica, permitindo que o usuário vá da tela de conexão para uma tela inicial onde os produtos são exibidos. Algumas linhas de código foram suficientes para adicionar uma barra de aplicação mais alta (com um título e três botões) e arquivos (para apresentar o conteúdo do nosso aplicativo). A tela inicial obtida é simples e funcional e tem uma estrutura básica e conteúdo utilizável.

A versão concluída do aplicativo MDC-102 está disponível no ramo 103-Starter_and_102-complete .

Você pode comparar sua versão na página com o aplicativo desta filial.

Seguintes passos

Com a barra de aplicação, a folha, o campo de texto e o botão localizado na parte superior da página, agora usamos quatro componentes principais da Biblioteca de Flutter de Material. Para saber mais, consulte o catálogo de componentes materiais.

Mesmo que nosso aplicativo funcione perfeitamente, ele não reflete uma identidade de marca ou um ponto de vista específico. No workshop do MDC-103: uso de temas de design de material (cor, formas, elevação e tipo), personalizaremos o estilo desses componentes para expressar uma marca moderna e dinâmica.

A realização deste workshop de programação me pediu um tempo e esforços razoáveis

Concordo plenamente

Não concorda nem concordo

não concordo nada

Eu quero continuar usando componentes de materiais

Concordo plenamente

Não concorda nem concordo

não concordo nada

Salvo indicação em contrário, o conteúdo desta página é governado por uma licença Creative Commons Cesatibilidade 4.0, e amostras de código são regidas por uma licença Apache 2.0. Para mais informações, consulte as regras do site do Google Developers. Java é uma marca registrada da Oracle e/ou de suas empresas afiliadas.