Olá seja bem-vindo ao vídeo pessoal na aula passada nós trabalhamos alguns elementos do flutter alguns wid só que nós trabalhamos eles de forma separada por exemplo nós trabalhamos com esse elemento com bar que é aquela barra que aparece na parte superior do aplicativo nós trabalhamos também Abrir outro projetinho aqui Pessoal esse aqui por exemplo ó é bar que nós trabalhamos na aula passada Trabalhamos também na aula passada com widgit colum para criar uma coluna aqui eu criei uma coluna nesse ponto criei aqui e fechei ela aqui embaixo dentro dessa coluna eu coloquei ó tudo isso
daqui tá dentro da col tá dentro da coluna então observem que dentro da coluna Eu tenho um texto depois desse texto Eu coloquei dentro da coluna eu tenho umer e a eu pegando aqui qual largura desse contêiner eu tô utilizando o Media Carry que ele pega a largura de acordo com o contexto então de acordo com o dispositivo que for aberto ele vai retornar a largura aqui desse contêiner o tamanho de 200 a cor amarela tem um texto aqui Centralizado o texto L depois dentro da colum um contêiner depois desse contêiner eu tenho uma linha
uma Row E aí nessa linha Eu tenho [Música] um um contêiner dois contêiners três contêiners e aí o que que eu fiz esses contêiners esses três contêiners estão dentro da Row dentro da linha a linha tá dentro da da coluna também e aí o que que eu fiz aqui pessoal a mesma coisa né ó usei media Car para pegar a largura de acordo com o dispositivo de acordo com o contexto só que eu tô dividindo ela por três por que que eu tô dividindo ela por três porque nessa linha eu tenho três coners 1 2
3 um vermelho um amarelo e um azul e aí como eu quero deixar de forma proporcional a largura desses contêiners Eu dividi por TRS já tá selecionado aqui o dispositivo eu vou pressionar F5 para rodar vamos esperar um pouquinho ele já vai abrir aqui a aplicação já tá carregando Pessoal lembrando que eu optei por não instalar o Android Stúdio eu optei por utilizar o o Google Chrome o navegador Google Chrome né para visualizar aqui o resultado das aplicações por por ser mais leve preferir o emulador do Android Studio ele demora bastante então eu tenho aqui
ó a a Nossa app bar comentei da APP bar aqui em cima ó a app bar nó nós temos o título seja bem-vindo esse título o texto foi estilizado cor branca tamanho 20 e o background color que é a cor do fundo aqui tá um um Pink e depois vem a a colum e a e a o que eu mostrei para vocês então nós temos aqui o resultado da aplicação eu posso vir aqui em mais ferramentas mais ferramentas ferramentas do desenvolvedor pronto e aí eu posso alterar aqui vou utilizar aqui o modo respons para diminuir
aumentar E aí observem que as dimensões aqui da largura dos contêiners estão proporcionais por conta daquela pontinha né pela divisão por TR eu peguei a largura total e dividir por TR vou fechar esse daqui vou abrir o próximo exemplo que eu queria mostrar para vocês esse daqui esse segundo exemplo sempre na pasta nós temos o arquivo principal esse aqui eu já vou rodar também pessoal F5 para rodar demora um pouquinho demora bem menos do que o emulador do Android Studio já vai aparecer já vai rodar deixa eu abrir aqui então o próximo Exemplo Pessoal próximo
exemplo é esse daqu nesse exemplo eu utilizei o botton navigation bar O que que é o botton navigation bar é a barra de de navegação inferior é essa Barrinha aqui ó essa barra é essa barra e eu defini aí Alguns botões quando eu clico não acontece nada não abre nenhuma outra página não acontece nada isso nós vamos fazer depois então vamos acessar aqui o modo responsivo mais ferramentas ferramentas do desenvolvedor pronto e aí nós vemos aqui embaixo os botões bota naveg bar E aí vamos dar uma olhadinha no código disso daqui pessoal para entender um
pouquinho melhor então eu utilizo o boton navigation bar e aí eu preciso associar a ele alguns itens quais itens os botões de itens que são o o o botton naveg bar it item então para esse primeiro botão para para esse primeiro item da Barra de navegação eu defini um ícone qual ícone o do aeroporto eu posso mudar isso daqui ó e colocar um outro ícone conforme eu vou escolhendo ele já aparece aqui tá poderia poderia escolher aqui out tá vendo que aparece aqui o ícone conforme eu escolho ó lá pronto então o o flutter Vai
disponibilizar aqui pra gente vou voltar aqui pessoal deixar o aeroporto mesmo então pro nosso primeiro item pro nosso primeiro botão nosso primeiro item esse ícone e esse Label o que que é o Label é um rótulo é a etiqueta o texto de exibição desse it pronto Terminou segundo item segundo item vai ter qual Icone café Label café R título café terceiro item qual ícone define o ícone vai olhando aqui ó ele mostra aqui na lateral então basicamente é isso nós quando vamos inserir essa barra na parte inferior que é a bot navigation bar nós precisamos
nela configurar os itens Quais são os ícones e os rótulos que eles terão E aí depois nós vamos adicionar funcionalidade aqui perfeito e aí tem outro projetinho aqui que eu quero comentar com vocês que é o do dra esse daqui pessoal já vou rodar né ele demora um pouquinho para carregar eu eu não sei se eu disponibilizei para vocês mas eu vou disponibilizar eu tenho esses prints aqui também eu fui printando eu tenho o resultado E o print do código aqui que aí eu disponibilizo para vocês tá embora que eu não não vou exigir que
vocês façam o código programa quem quiser fazer para testar mexer é bom mas eu vou disponibilizar um um questionário do Microsoft formance relacionado a esse vídeo para vocês responderem rodou aqui observem pessoal que além da F bar nós temos aqui um hamburguinho ó Open naveg Menu quando eu clico abre aqui um menu de navegação isso daqui quem trouxe exibiu esse hamburguinho aqui quando eu clico abre essa aba aqui isso daqui é o que nós chamamos de Dra tá então eu tenho aqui ó uma bar depois da bar eu tenho o drawer coloquei alguns comentários aqui
né pessoal ó o dra é um parâmetro do nesse caso inserimos entre a bar e o bar através dele é Ger o menu Sands vios tipo um contêiner uma tela lateral que ocupa apenas parte da tela Então dentro do drawer nós temos um list viw esse list viw mais para baixo aqui um pouquinho pessoal eh observem que tem algumas listas nós temos aqui list Tile o tex o título dele aeroporto e nós temos o um um ícone também tá nós podemos associar um um ícone também um ion então observem que nós temos três Litle o
que que é isso são esses itens aqui ó L tille aeroporto list Tile café L Style hospedagem aqui em cima eu configurei um ciclo a letra s meu nome e-mail aí são outras opções que foram definidas aqui em cima algumas informações de conta do do usuário que nós colocamos no cabeçalho do dra tá E aí nós temos alguns parâmetros account name account eil a picture aqui eu coloquei um um círculo o texto sentro vamos personalizar pessoal acho que é isso eu queria mostrar para vocês a junção da appb colum Row tudo numa tela só na
aula passada nós vimos isso de forma separada a botom navigation bar que são os botões de navegação na parte inferior e esse outro componente esse outro widgit que é o drawer nós vimos aí o drawer e o l a princípio quando eu clico aqui não acontece nada mas nas próximas aulas aí nós vamos lincar quando clicar aqui abrir uma uma página nova uma page viw uma page tá bom valeu pessoal um abraço
