Desenvolvimento de aplicativos para iniciantes absolutos

1. Introdução ao curso: Se você é novo no desenvolvimento de aplicativos e está procurando um emprego para ganhar uma quantia decente de dinheiro, não se arrependerá de fazer este curso. Como todos sabem que a Flórida é a tecnologia de tendências e mudou a forma como criamos aplicativos. É uma ferramenta multiplataforma para criar aplicativos para Android iOS web deck stop com apenas uma base de código. Neste curso, aprenderemos tudo do zero. É para iniciantes absolutos. Vamos entender sobre widgets, como gerenciar conceitos de navegação de estado, lidar com entradas do usuário, integrar a API rest. Todos esses conceitos são suficientes para lhe dar confiança como desenvolvedor. Então você sangrou pelo emprego dos seus sonhos? Portanto, sem desperdiçar mais do que a lente começa. 2. Como criar um novo projeto e entender a estrutura de arquivos: Agora chegou a hora de criarmos nosso primeiro projeto na Flórida. Agora, para garantir que o flutter esteja sendo instalado corretamente, podemos usar apenas um comando como a versão flutter. Primeiro abra o prompt de comando e , em seguida, basta selecionar este comando e pressionar Enter. Se você não conseguir ver nenhuma versão, então você a instalou corretamente. E se houver versões mais novas também, você também pode ver como se uma nova versão da Flórida estivesse disponível. Mas agora estaremos trabalhando com o Flutter 2.2 se necessário mais tarde e ambíguos, vamos atualizar, mas não sabemos. Os dados do Crf estão instalados corretamente em seu sistema. Agora, criar o Projeto Florida diretamente para meus filhos são duas maneiras. Primeiro é usar o Android Studio. Se você usa o lote do Android Studio, então você pode simplesmente anexar Android Studio e instalar as extensões necessárias flutuam muito, porque haverá uma ferramenta de extensão no Android Studio como bem. Você simplesmente precisa baixar ou instalar as Ferramentas de dados. Mas eu não prefiro um estudo enriquecido porque antes de tudo, é muito, é, ele usa muitas das suas fontes de PCD. Isso o torna mais lento, acho que porque sou um modo de usuário do VS Code ou morro texturalmente, prefiro o código de nós. Então isso é onda. Usaremos o código VS. Certifique-se de instalá-lo em seu sistema. É muito fácil. Você pode simplesmente ir pegá-lo para baixo. Agora, para criar um projeto primeiro, vá para a pasta onde você deseja seu primeiro projeto. Em seguida, basta anexar um prompt comum lá e simplesmente escrever, Flutter, criar. Este é o código. Ou você pode dizer, aguarde para criar um novo projeto. E depois da criação, qualquer nome que você der será um nome de projeto que é o nome do seu aplicativo. Você pode dizer, obviamente, você pode alterá-lo mais tarde. Não é um problema. Vamos simplesmente um tutorial de flutter. Tutorial, ok, clique em Enter. Então, ele apenas baixará e criará seu projeto queimado. Se você está vendo tudo feito, é isso. Você fez isso corretamente. Em, Inside Definitivamente projeto. Você pode ver muitos arquivos que discutiremos agora apenas. Mas antes disso, apenas anexamos o código VS do pátio, vamos para o arquivo e apenas anexamos. E aqui você simplesmente precisa anexar seu projeto assim. Então você vê pastas e arquivos que estavam presentes. Você usou com sucesso o VS Code. Agora. Agora, o que faremos, veremos mais sobre essas duas estruturas de pastas. Existem pastas diferentes. Isso é Android, iOS ao vivo, teste de ponto de especificação YAML do que a web, pastas e arquivos lord of thing. Só precisamos lembrar que a pasta android é onde os arquivos excluídos do Android são armazenados. Nós não mudamos muito. Vamos usá-lo apenas para algumas coisas como qual será o ícone do seu aplicativo, dispositivo Android, qual será o nome do aplicativo? São muito poucas coisas específicas para o Android são plugins, mas não todo o curso. mesmo com a pasta iOS dobrada é ter todos os arquivos que serão usados para criar um aplicativo iOS. Mas vamos apenas fazer essas mudanças, pequenas e pequenas alterações que adquiriram nó, não código de cor escura. Agora que esta folha cai, isso é o principal, esta é a pasta que vamos usá-la de novo e de novo. É aqui que estaremos trabalhando na maior parte do tempo. Por padrão, ele contém Main.jack. Este é o ponto de entrada do aplicativo de fotos, como eu disse que já vimos nessa seção de dados. E esse ponto principal, ponto ou a função principal, é o ponto de entrada. Se você for clicar neles. Esta principal função aqui, salve. E definitivamente haverá outras citações também. E você pode ficar sobrecarregado no momento. Portanto, não olhe para esses códigos. Basta lembrar dessa função principal. Depois disso. Há teste, teste isso onde você coloca o código de teste unitário para o aplicativo. Quando você estiver pronto, quando seu aplicativo estiver pronto para produção, você precisa testá-lo muito tempo. Testar é um tópico totalmente diferente que não abordaremos porque antes de ir para o teste, você deve ter um aplicativo de flutter estruturado muito limpo. E então o próximo e muito importante arquivo é o arquivo YAML do ponto de especificação Pub. Esse arquivo define a versão e o número da compilação do aplicativo. Se você vir, só veremos esta versão e isso será usado quando você estiver publicando seu aplicativo em qualquer lugar, torr ou iOS Store. O primeiro uso é isso e, em seguida, essas dependências. E você pode estar perguntando o que são dependências? Veremos e entenderemos isso no próximo vídeo também. Como dependências significam que seu aplicativo definitivamente dependerá de software ou biblioteca ou plugins de terceiros. Isso também é muito importante. Ele deve ter um vídeo separado para discutir. Mas lembre-se, eu pulei outras pastas e arquivos porque na maioria das vezes não precisamos tocá-los. Nós só temos que trabalhar no salto, ponto de especificação do Pub YAML e pouco na pasta Android e iOS. Então, agora você tem seu aplicativo de flutter ativo. É hora de executá-lo em um dispositivo. Para o dispositivo, basta anexar Android Studio porque você deve ter um emulador. Se você não tiver o emulador, também poderá usar seu dispositivo Android físico. Você só precisa se certificar de que tem o modo de depuração ativado nas configurações do seu dispositivo Android. Aqui. Sim, clique em, configure-o. Aqui, eu tenho um dispositivo. Você também pode criar seu dispositivo virtual também. É muito fácil, mas eu tenho essa grande célula três APH seria 8. Vou apenas executá-lo. Pode levar um pouco de tempo. Veja, seu emulador está aqui, diz dispositivo Android. Agora, simplesmente o que você tem que fazer é ser seu código VS ir para o ponto principal. E em sua execução, basta clicar em Iniciar depuração. E agora você tem que esperar um pouco, porque pela primeira vez, levará algum tempo, mas você pode ficar. Está lançando nosso ponto principal em que emula o modo de depuração. Então isso é bom. Isso está funcionando. Só quero dizer que inundado é uma ferramenta muito incrível. É como se fosse muito fácil de entender e fácil de trabalhar. Além disso, você entendeu que os conceitos básicos em qualquer linguagem de programação são os mesmos que na linguagem escura. Lembre-se, quando você estiver usando o Android Studio, seu sistema pode estar lento. São, ele pode travar porque seus usos em sua RAM. Portanto, você pode não usar ou fazer qualquer outra coisa enquanto estiver trabalhando em um emulador Android porque ele mesmo está fazendo seu sistema funcionar muito duro. E você não quer falhar porque está atualizando o sistema não conseguiu lidar com isso. Sim. Ele está mostrando saídas de compilação flutter, APK, aplicativo debug dot APK. Então, espero que você saiba que a extensão APKs geralmente aplicativo de dispositivo Android. Agora, tudo bem. Veja, você terá essa largura de tela, como a página inicial de demonstração de flutter. E no ouvido médio deles será, você apertou o botão muitas vezes e um botão está aqui. Se eu clicar nele, veja 1, 2, 3, 4, 5, está aumentando. Então, finalmente, temos nosso aplicativo flutter em execução em nosso emulador. No próximo vídeo, falaremos mais sobre conceitos como widgets e outras coisas. Por enquanto. Espero que você tenha gostado. 3. O que são widgets: Hoje falaremos sobre widgets. Quando estamos trabalhando flertado. Você encontrará essa palavra muito tempo porque eu escrevi dentro do esforço a aplicação é um orçamento. De um texto simples, dois botões a layouts de tela. Vou dar um exemplo para você. Se você estiver chegando, se você tiver alguma experiência em desenvolvimento web, então você entenderá que há navbar, campo de texto, div, tabelas no Bootstrap ou em HTML. Em flutter. Tudo aquilo que outros elementos da interface do usuário são chamados de widgets. É isso. Portanto, não é um conceito muito difícil. Não estou dizendo que os widgets são, a menos que no líder você esteja escrevendo, mas para o entendimento básico, você tem que lembrar que se você vir algo nessa tela, será um widget. É isso. Agora, cada widget terá propriedades, ou você pode dizer argumentos que temos que passar. Então, se você se lembra do conceito de argumentos nomeados do programa escuro anterior, duvide de tutoriais, nós já fizemos. Da mesma forma. Eu teria. Widget também é uma função que você pode salvar porque na parte de trás do código do núcleo de flutter, é mencionado como argumento nomeado. Só vou dar um exemplo. Aqui. Definitivamente este código que você não deve tocar. Você só verá o que estou falando. Este centro é um widget. Portanto, a propriedade está aceitando é 11. A propriedade é chamada de criança. Imagine. Sim, eu só estou escrevendo aqui. Temos um call center de funções. E aqui pode estar aceitando algo como argumento nomeado. Suponha que o nome da string. Aqui, a mesma coisa está lá, mas é uma propriedade rígida chamada criança. É por isso que estamos chamando essa propriedade filho de re-indexação do widget centrado. Estamos enviando novamente um widget diferente, esta coluna. Nos próximos vídeos, vamos mergulhar profundamente em todos os textos da coluna central estável do orçamento, sejam eles quais forem, widgets que entenderemos todos e tudo. Mas agora eu só quero dar uma visão geral básica. Pelo menos você deve saber qual é o significado da palavra widget. Agora você pode irradiar, ouvir isso, e essa propriedade na maioria das vezes aceitará widget como seu valor, como eu disse, como eu mostrei que nessa propriedade filho, Ele está aceitando uma coluna que é novamente Abhijit. E a última coisa é que cada widget começa com seu nome seguido de parênteses. Então, novamente, vou raquete e suponho que este seja um texto rígido e depois parênteses. E dentro de si, você tem outras propriedades. Suponha que uma criança assim e esta, novamente excluída, valorize-a, mas em um texto, não é criança, acho que é diferente, mas estou apenas dando um exemplo básico. Agora. Veja esta imagem. Essa é uma forma, este é um aplicativo criado usando flutter. Então aqui, se você pode ver este botão de Verde, esta imagem ou essa seta, tudo isso, nossos orçamentos. Esse texto é novamente um widget. Esta barra de navegação está novamente em média. Um exemplo. É um aplicativo de entrega de alimentos muito básico, mas parece tão bom porque é construído com o Flutter. Portanto, essas categorias também são um widget chamado linha porque é da esquerda para a direita, horizontal. Então, dentro dessa coisa circular ou qualquer coisa, ou o ícone de pesquisa também é um widget. O mesmo é esse exemplo. Essa barra de pesquisa é novamente um widget. Este botão de navegação é novamente um widget. Esta imagem é novamente um widget. Qual é o widget que existe a imagem. É isso. Você o verá no vídeo posterior. Eu só quero mostrar que o que quer que você esteja vendo agora na tela, todos eles são widgets diferentes e diferentes. É isso. Não sei se você estiver sobrecarregado, então também está tudo bem porque está tudo bem. Você não fez nosso trabalho, fez nada assim, mas é muito simples. Ok, até agora, isso é suficiente com esse tópico de widgets. Obrigado. 4. Trabalhando com Ativos e arquivo Pubspec: Na sessão de hoje, abordaremos um tópico muito básico de ativos. Então você pode estar perguntando o que são ativos? Imagine que você tem um aplicativo e, definitivamente, nesse aplicativo, você terá algumas imagens, algumas imagens diferentes. Você é o logotipo de uma empresa, são alguns arquivos de fonte diferentes, são algumas animações, o que quer que você veja, você tem alguns arquivos diferentes para sua aplicação. Naquele momento. Você tem que se certificar de que fez. Você disse que, para o seu projeto de flutter, esses são os ativos que eu quero ser incluído no meu aplicativo. É isso. Até agora, o que você precisa fazer é ir para a pasta do projeto de filtro. Você verá pastas diferentes aqui. Você só precisa criar uma nova pasta de ativos. Ou o que quer dizer com você quer dar? Geralmente dou ativos de TI porque é conveniente para mim. Então, dentro dos ativos, quais ativos você quer se você tiver apenas se quiser, você também pode simplesmente soltar todos os seus arquivos aqui, o eleitoralmente. Mas eu prefiro isso. Novamente, criar uma pasta de imagens é se você quiser. Desculpe. Se você quiser. Se você quiser, você também pode ter pastas diferentes, como fundos são o que for. Então, dessa forma, você tem sua estrutura de pastas mais antiga corretamente. Agora, nas imagens, basta ir e copiar qualquer imagem que você quiser e simplesmente colá-la. Eu tenho isso se quiséssemos ver a imagem. Agora, o que você precisa fazer é ter sua pasta aqui corretamente. Mas agora é hora. Implementamos nosso, dizemos ao nosso Projeto Florida, Esta é a pasta Ativos. Para isso. Você precisa ir para esse arquivo KML. Agora, lembre-se que este arquivo YAML de ponto de especificação Pub é muito sensível, bom, porque se você tiver uma guia extra ou espaço extra ou o que quer que seja, todo o seu aplicativo falhará. Então lembre-se e tenha muito cuidado. Não toque em nada. Apenas lembre-se aqui. No entanto, você pode ver esses ativos coisa que está no comentário. Então, basta ir para um e antes de um e apenas empilhar o espaçamento duas vezes. É isso. E novamente aqui, backspace duas vezes. Não mais do que isso, porque se você estiver vendo um joelho, lembre-se de desfazer e tentar novamente. Agora, esses ativos, esses códigos de ativos só são feitos lá para mencionar os nomes de pastas. Aqui. Vou apenas escrevê-lo desde o início. É como ativos e depois imagens, e depois perna, é isso. Isso simplesmente significa essa pasta de ativos. Dentro dessa pasta, há uma pasta de imagens que acabou de ser carregada. Vou parar minha sessão de depuração da Flórida. Desde que você fez uma mudança, as dobradiças do treinador. E simplesmente, se você quiser incluir fontes aqui, essa é a coisa da fonte em que você só precisa desfazer o comentário e mencionou a localização do arquivo de fonte. No momento, não estamos lidando com fontes porque não é a coisa mais importante em seu aplicativo para iniciantes. Agora, mais sobre este arquivo de especificação do Pub. Apenas lembre-se, a primeira coisa importante é esta versão. E agora não vamos usá-lo. Você só o usará quando estiver publicando seu aplicativo em qualquer Android ou App Store, Apple App Store. Em segundo lugar, essas dependências pasta. Agora você pode estar me perguntando, o que é essa dependência? Se você tiver algum pacote externo, nosso plugin para implementar no aplicativo de inundação do ano, usamos essa coisa de dependências. E quando estou dizendo pacote externo, para isso, você tem um site chamado pub surdo. Você pode ver que é um gerenciador de pacotes para o aplicativo Flutter. Aqui você receberá muitos pacotes e tudo mais. Veja a parte do analisador, seletor de números de login do Google e eu compareço. Então, isso ajudará você a criar o aplicativo muito rápido, e definitivamente você precisa usá-lo. Então, vou procurar. Suponha que HTTP. Então você tem esta biblioteca STDP. Basta ir. E suas dependências, você só precisa copiá-lo assim e colá-lo abaixo, assim e salvar. Mas agora não estamos fazendo isso porque isso depende. Em seguida, a subunidade que usamos no momento, pelo menos quer mostrar o que são esses ativos e o arquivo YAML do ponto de especificação do Pub. E quais são dependências externas que você usará extensivamente mais tarde, quando estivermos construindo um aplicativo de dados intermediário. Espero que você tenha entendido os conceitos. Obrigado. 5. Widget de texto e de andaimes: Então, agora é hora nesta sessão, entraremos diretamente no conceito de flutters. Ou seja, temos que ter nossas mãos sujas escrevendo o código nós mesmos. Traga seu código VS e simplesmente vá para Main.jack. Agora, o que você precisa fazer é simplesmente ir e remover todo esse código, exceto a função principal. Assim, acabamos de remover todo o código. E no arquivo main.js, que é o ponto de entrada, você precisa simplesmente escrever meu aplicativo, aplicativo material e, em seguida, nomear meu primeiro aplicativo. E depois em casa. É isso. Então, importamos o pacote de material no topo porque vamos usá-los Material Design rico, desenvolvido pelo Google, design de material do Android. Para iOS, você tem um, você também pode usar o pacote Cupertino, mas ele só funciona no sistema Mac. Você dirá que precisará um dispositivo iOS para que ele fique bem. Mas na maioria das vezes você usará o Material Design e usará apenas alguns iOS. Botões também são elementos, se você quiser no futuro. E também você pode ver que estamos implementando dívidas de Material Design. Por que estamos usando o aplicativo de metadados aqui. E o aplicativo material é virgem. Como eu disse, é o nome e, em seguida, parênteses, que aceita duas propriedades. Esse é o título mais rápido e o segundo é todo. Título é o nome do aplicativo que é mostrado nesse texto, mas é local. Saia do aplicativo quando o aplicativo estiver em segundo plano. Mas e esta casa é o layout principal que será visível para o usuário. Portanto, a KV tem nossa primeira aplicação Flutter. Você entendeu até agora, essa é a função principal é o ponto de entrada. Depois disso, você pode estar me perguntando, o que é esse aplicativo executado? Isso é culpa? O que você dirá é a visualização padrão da flutter de executar nosso aplicativo. Então você só precisa se lembrar disso porque é predefinido. Predefinido, não podemos fazer ou não podemos alterá-lo. Mas podemos saber mais sobre widgets, que é o conceito central. Então, antes de tudo, falaremos sobre esse widget de texto. Em qualquer aplicativo. Definitivamente, você precisa colocar algo para o usuário ler. Eu que é o nome de usuário dele ou dela ou quais são dados básicos simples. Para isso também, você precisa primeiro saber qual widget usar para imprimir na tela. Anteriormente, costumávamos apenas escrever impressão nesse código escuro. Porque naquela época estávamos apenas imprimindo naquele console de depuração, o que não era nada. Foi ainda mais que a conveniência dos desenvolvedores. Mas agora vamos escrever algo que será mostrado ao usuário que é um aplicativo. Portanto, o texto é esse widget como nome de tolueno e , em seguida, parênteses. E nisso, é exceto a primeira coisa como uma string, que é um argumento posicional. Você precisa se lembrar daqueles conceitos sombrios cor para garantir que você não fique confuso. Pergunte o que é isso, por que esse parâmetro é enviado assim e não como um argumento nomeado? Vou voltar ao argumento do nome também. Mas agora você simplesmente precisa salvar, depois abrir seu emulador e executar seu aplicativo. E também você pode ver que o arquivo de teste é dela porque removemos os tribunais. Você, se quiser, poderá simplesmente remover este teste rígido. Por enquanto. Porque não precisamos disso. Agora, novamente, basta executar seu aplicativo. Você, novamente, você tem que, pode demorar um pouco. Na última sessão também, entendemos como importar ativos. É por isso que temos que ser tido pode vender essa sessão de depuração dessa vez. Se fizermos alguma alteração principal no aplicativo, devemos interromper a depuração e reiniciá-la para que saiba o que muda sua impressão feita. Só quero que vocês consigam familiares. Acostume-se com este conceito de escrita de widget que é primeironome, depois parênteses, depois dentro dos parênteses I, então ele será um parâmetro de nome como este título ou nome em um parâmetro nacional como este campo de texto. vez, demorará um pouco enquanto você tem que esperar. Está demorando um pouco mais. São pelo menos nossos APKs de depuração sendo criados. É um processo muito demorado. Mas para que algo bom aconteça, temos que esperar. Basta ignorar o que eles foram exibidos no console de depuração. Não precisamos nos preocupar com isso. Mas veja, agora a saída estará aqui. E temos um primeiro aplicativo Predator muito feio. Mas basta ver que enviamos textos com sucesso na tela do aplicativo. Isso significa que se você, se você publicou este aplicativo por favor, para todos os usuários, sempre que anexar, anexar este aplicativo, eles verão este texto do meu primeiro aplicativo Flutter. Agora, você pode estar pensando, isso está parecendo muito feio. Esse texto está preso ao topo e que esses brancos para torná-lo bonito, estaremos usando nossa próxima região. Isso é widget de andaime. Então, o que é um andaime? Para alterar a cor de todo o aplicativo ou usar botões da barra AB são algo como navegar, folha inferior ou qualquer coisa. Usamos este widget de andaime. Ele dá uma boa aparência ao seu aplicativo. Ele tem todos os elementos necessários. Agora, vamos apenas para o nosso código. Simplesmente dentro da casa, você removerá e escreverá andaime. Este também é um widget que aceitará e não saberá quais propriedades são aceitas. Você pode apenas controlar e espaço e ver aqui primeiro sustentar meu laboratório. Essas são todas as propriedades que ele aceita. Primeiro você vai, você pode escolher APA. Esta parte, novamente, exceto um widget de aplicativo. O lado que o widget Bart. Mais uma vez, clique em tipo Control plus space. Aqui haverá muitas propriedades que precisávamos para dois. Então este título aceitará o texto, rochas esvoaçadas. E agora você reinicia. 21 só pode controlar S. E agora ver essa mudança. Veja, está muito bonito do que antes. Só porque usamos um widget de andaime. Isso aqui, o que quer que você esteja vendo, é essa barra AB ou essa coisa branca está dentro por causa dessa tampa para widget. Agora, essa porção branca é o corpo onde você produzirá qualquer coisa que deseja mostrar ao usuário nas primeiras propriedades do andaime. Então você apenas irá atrás desse controle de vírgula e espaço e corpo direito. No corpo você terá outro texto que nos permitirá limpar a aplicação. E novamente Control S. Então você pode estar pensando que nada está sendo mostrado. E esse motivo é porque essa cor desse texto e da guia de cores Plano de fundo é duas. Agora, para mudar a cor de fundo, eu iria para o andaime todas as luzes. Cor de fundo. Você não precisa entender o que estou fazendo agora. Antecedentes, suponho. Veja se reiniciei o aplicativo. Ele está mostrando minha primeira deposição de camada porque era de cor vazia. Nos próximos vídeos, entenderemos como mudar cores assim. Eu fiz isso agora só para mostrar a saída do corpo. Então essa coisa vermelha é o corpo do esboço da sua aplicação. Você só precisa lembrar até aqui que APA e corpo são propriedade do widget de andaime. Apa tem o título como sua propriedade, que aceita widget de texto agora, porque o título direito, você pode ter qualquer widget que discutiremos um por um. Se quisermos ver outra propriedade da barra AB, você pode simplesmente ir abaixo do título e à direita, apertar o centro. E então é verdade. Esta é uma propriedade que, por si só , diz que centralizará esse título. Título da barra de aplicativos. Iremos para o centro da sua aplicação. Então, espero que você tenha gostado de aprender porque você é capaz de construir um aplicativo básico com letras. Pelo menos você tem algo na tela agora, que é muito legal. No próximo vídeo, aprenderemos mais sobre widgets adultos porque, como eu disse repetidas vezes, flutter é tudo sobre orçamentos. Obrigado. 6. Botão de ação de Center e flutuante: Então, continuaremos explorando outros orçamentos. Como o sílex não sabia se você tem um aplicativo de aparência muito básica, ele não aplica apenas um UA com algum texto nele. O próximo widget, do qual falaremos é que a visita ao centro é muito simples e faz o que o nome diz. Ele se concentra em qualquer rígida. Então, se quisermos centralizar o texto no corpo, podemos envolver esse texto dentro de uma visita ao centro. Então você pode ver isso, minha replicação plana está no lado superior esquerdo. Se você quiser para o centro do corpo, que o centro da tela. Só temos que embrulhá-lo. E o que você, o que você quer dizer com rapt? Se você for, você pode simplesmente ver essa coisa material dentro, então é um andaime. Esta parte do aplicativo é enrolada sob o andaime. Este texto é encapsulado dentro da barra AB. Agora, se eu quiser usá-lo, orçamento do centro de texto, você pode simplesmente ir. Um passo de fazer é apenas copiar ou cortar o cuidado. Em seguida, chai center rígido. Isso é rígido. Então entramos, temos uma propriedade infantil, e simplesmente torcemos. Portanto, isso é envolvido por outro widget centrado. E como checkout nosso aplicativo. Veja, temos esse texto no centro da tela. Apenas lembre-se, eu disse que este era um primeiro caminho e o segundo foi, eu vou desfazer isso. O segundo caminho é simplesmente Cu, clique nesta lâmpada. Pense assim correções. E aqui você pode fazer um widget e simplesmente um centro. Essa também é outra maneira de fazer a mesma coisa. Porque quando temos uma aplicação maior, é impossível que simplesmente cortemos e colemos o tempo todo porque há muitas vírgulas, elas não são parênteses envolvidas em nossa aplicação. Agora. Então lembre-se, não podemos simplesmente imprimir diretamente a string dentro desta centralizada, como eu vou apenas cortá-la e ver que você pode simplesmente escrever diretamente uma string aqui assim. Não, você tem que usar a propriedade filho dentro dessa criança. Você tem, e você tem que usar outro widget, que é ele widget de texto. Agora estamos usando, mas como filho é um tipo de widget de dados, você pode ver aqui, se eu passar o mouse sobre ele, isso significa que ele aceitará qualquer região. A lei que não aprendemos sobre outros widgets. É por isso que estou usando o widget de texto básico. Então, espero que você tenha entendido o widget central. É um widget muito básico. Agora, o próximo widget que falaremos é o botão de ação flutuante. Então, estou supondo que você já conheça o aplicativo WhatsApp. Em seu aplicativo WhatsApp, no lado inferior direito, você verá um ícone em nosso botão. Esse é o botão de ação flutuante. Assim, podemos implementar o botão de ação flutuante pela propriedade, o mesmo nome que é botão de ação flutuante para a visita ao andaime. O que quero dizer com isso. Você tem seu andaime. Nós fizemos aqui. Primeira propriedade, acabamos de dar uma cor de fundo, pois temos que torná-la vermelha. A segunda propriedade era AB bar. A terceira propriedade era corpo. Agora temos essa vírgula. Se eu for controlar um C, há tantas outras propriedades isentas. Mas usaremos o botão de ação flutuante. Portanto, esse botão de ação flutuante aceita o nome do widget. Botão de ação flutuante. Assim. Você pode ver que agora tem um botão de ação flutuante. E tem que apoiar isso, o que é obrigatório. Primeiro, esta criança, e a segunda está pressionada. Então, criança, teremos apenas um anúncio de texto simples. Vou reiniciar nosso salvar nosso aplicativo para que as alterações sejam mostradas na interface do usuário. No lado direito aqui, você pode ver este botão Adicionar. Portanto, este é um botão de ação flutuante. Neste momento, quando clicamos nele, não acha que se você quiser ver, você pode simplesmente continuar, pressionado e apenas escrever, imprimir, olá e salvá-lo. Agora, se eu for clicar com a direita, se eu for e clicar no nosso botão Adicionar. Na depuração, você pode ver que há esta impressão olá, imprimindo. Mas o principal é que você precisa entender que essa é a maneira de escrever código de um aplicativo de flutter. Propriedades da engrenagem, existem widgets dentro dos widgets. Mais uma vez, propriedades de dados. Essa propriedade voltará , exceto algum widget. E então esse descompactado é novamente a propriedade do botão de ação flutuante. Você precisa se lembrar de onde ele começa, onde termina, qual propriedade é qual rígida. E se você ainda está recebendo países, eu só gostaria de dizer que ela te que assumiu que isso é uma função. Estamos chamando uma função de botão de ação flutuante e , em seguida, enviamos dois argumentos de nome que humanos. Esse é o primeiro, exceto o widget de salvamento. E o segundo aceita uma função. Isso é novamente para cada primeira letra idiota rígida é sempre maiúscula. Você pode ver este f, este t, seu centro, o andaime S. Então, cada widget tem fósforo de letra maiúscula, e cada propriedade está aceitando outro widget como seu valor. Portanto, esta é uma propriedade filho, aceita texto e todas essas propriedades têm estatísticas com essas letras pequenas a, B, a, uma barra, um botão de ação flutuante. Este f, que é a propriedade, este f é uma letra pequena. E na maior parte do widget essa propriedade filho se tornará. E aqui você pode ver criança, isso também é criança. Portanto, a propriedade infantil será comum. Muitos dígitos duplos. Se você ainda está ficando confuso, vou pedir que você faça pausa por algum tempo e tente fazer isso sozinho e cometer alguns erros para que você entenda corretamente. Mas espero que este vídeo tenha sido limpo e tenha dado a você a informação de dois ou mais widgets. primeira é a visita ao centro, e a segunda é o botão de ação flutuante, que discutiremos mais coisas nos próximos vídeos. 7. Alterando cores e estilo: Ei, bem-vindo de volta. Nesta sessão, aprenderemos a mudar cor e dar estilo aos nossos elementos. Agora, para mudar a cor de qualquer elemento, como a barra AB v, tem certas propriedades. Como em uma barra de aplicativos há uma propriedade chamada cor de fundo. Agora geralmente amigável, estamos lidando com outras propriedades. Tínhamos o valor de string ou inteiro, ou um widget. Mas agora, outro caso é um pouco diferente. O valor de uma cor é mantido usando o teclado. Vamos pontuar e seguir o nome da cor. Agora vamos fazer isso praticamente. Agora vamos mudar a cor da nossa barra de aplicativos, iremos e agora veremos outras propriedades aqui. E um deles é a cor de fundo é apenas cores retas, escuras, âmbar. É uma das cores. Agora, verifique nosso aplicativo. Este azul, ele muda? Sim, mudou. Agora está na cor amarela. Cor amarelada. Você pode se separar, mas é um tom diferente, definitivamente. Então, espero que você tenha entendido que dar descuidado é muito fácil. Essas cores pontilham e se esse widget tiver uma propriedade que esteja aqui, sua cor de fundo, em outros limites, pode haver diferente. Agora, para alterar a cor do botão de ação flutuante, novamente, temos que ir e verificar se existe alguma propriedade. Agora, aqui você pode ver que há uma propriedade chamada cor de fundo, e nós apenas escreveremos cores. Dot mais cedo. Essa cor era azul. Vou deixá-lo verde. Vamos ver. Isso funciona? Espero que sim. Sim, mudou. Então, obviamente, quando você está construindo um aplicativo do mundo real, você terá diferentes combinações de cores para o seu aplicativo. Portanto, é necessário entender isso, qual cor usar e como implementar o código de cores. Agora, a próxima coisa, o que temos, o que vamos fazer é como estilizar esse elemento de texto. Então mude a cor, nossos presentes, estilo para um texto. Temos que dar uma propriedade de estilo ao widget de texto. Então agora, novamente, você pode ler que existe uma propriedade chamada estilo. Vamos para o elemento de texto. Este primeiro é um argumento posicional que está em 0. O próximo, vamos ver aqui. Sim, um estilo texto alinha a direção do texto. Estarei usando a propriedade style. Agora, como mencionei, um texto que também aceitamos argumentos diferentes. Mas isso lembre-se que a primeira propriedade é vetor posicional v mencionou o texto real. E outras propriedades são argumentos nim, como um deles é apertado. Agora a propriedade style aceitará outro widget como seu valor, que é o widget de cauda de texto de estilo. Então, aqui só temos que escrever estilo de texto. E dentro desse fim de semana mencione que muda as propriedades que quisermos. Como primeiro, gostaria de mudar essa cor. Cores, azul escuro. Vamos ver Vamos ver aqui. Isso muda? Sim. Além disso, gostaria de remover esse fundo de cor vermelha. Não está bonito. Então, está feito. Certo. Agora, a próxima propriedade que usaremos é o tamanho da fonte. Agora vamos alterar o tamanho da fonte para 30. Desculpe, tamanho da fonte , deve ser divertido. Diz, sim, aceita um número inteiro, podemos dizer valor W. Então veja, o tamanho da fonte mudou. A próxima propriedade que usaremos é o estilo de fonte. E haverá estilo de fonte, itálico e normal. Então, o que é esse itálico? Espero que você saiba que ele só lhe dará posição inclinada. Aqui. Vê isso? E, e nenhum staling que usamos é o peso da fonte. Fonte com pesquisa de pontos. Ele só terá uma aparência mais ousada. Veja. Então é assim que fazemos o estilo para o nosso elemento de texto. Sim, lembre-se, existem suas propriedades também. Aqui você pode apenas verificar seu plano de fundo, fundo, cor, decoração, fonte, família, altura, espaçamento entre letras, espaçamento entre palavras, sombras. Então, se você quiser, você pode usar todos esses. Mas é muito Pacífico dos EUA se quisermos usá-lo ou não. Mas, geralmente, na maioria das outras obrigações, você usará o tamanho da fonte colorida e o peso da fonte. Além disso, se você quiser ter certeza que o texto está destacado, você pode dizer. Então. Espero que você tenha entendido esse conceito de mudança de cor e estilo. Isso é tudo para esta sessão, aprenderemos mais sobre widgets nos próximos vídeos. 8. O que são widget de Stateless: Oi, Esta sessão é muito importante porque estaremos discutindo o que são a região sem estado. Então, até agora, estávamos escrevendo código somente em nossa função principal. Mas este não é o caso quando acreditamos na obrigação, ousamos, definitivamente temos que separar nosso código em partes menores e usá-los sempre que necessário. Podemos criar nosso próprio widget, que continuará nos outros widgets nele. Que tipos de widgets de compilação personalizados são região sem estado e com estado? Neste momento, você só precisa se concentrar no estado menos rígido. Definitivamente nos tornaremos preocupantes com a outra região nos vídeos posteriores. Então, aqui você pode ver que podemos criar uma região apátrida estendendo nossa classe para a região apátrida e ter uma implementação mínima de cerveja como esta. Portanto, este é um código muito básico de um widget sem estado. Vamos lá dizer arquivo, vamos ter um novo arquivo chamado ponto de ponto inicial. Então agora aqui você pode simplesmente primeiro o que você precisa fazer é ter que importar um pacote de material. Então você pode ter a tela inicial da aula, que estende a região sem estado C. Ok? Então, aqui está feito. Agora basta clicar nesta lâmpada. Você pode ver que há 11 substituições ausentes. Se você clicar nele, isso lhe dará essa coisa. Então aqui você só precisa devolver alguma coisa. Vou devolver este andaime aqui. Então veja nossa primeira tela, ou seja, a tela inicial está escrita, que é uma região sem estado. Então você pode estar me perguntando, Ok, mas o que o widget de status significa exatamente? Portanto, basta lembrar que os dados dentro de um widget sem estado não podem ser alterados depois de serem renderizados. Suponha que queremos que depois que o botão for clicado, a cor do texto seja alterada. Isso não é possível na leitura sem estado porque essa cor, que é verde, é renderizada. É quando anexamos nosso aplicativo, ele está sendo renderizado. Então, em um apátrida realmente, não é possível mudar a cor. Mais tarde. É como se não clicássemos em User fazer alguma Harvard ou seja lá o que for. Se o usuário interagir com ele, então, para esse tipo de coisa, você deve ter um widget com estado. Mas você entenderá a diferença entre ambos lentamente. Agora, aqui, qualquer nome que seja, este é um widget sem estado. Há um nome do widget, e ele tem que evitar a função chamada buildup, que retorna um widget como um tipo de retorno. E este widget significa que isso pode ser andaime, isso pode ser contêiner, isso pode ser botão, isso pode ser ícone. Portanto, não é como se o widget sem estado fosse sempre uma tela completa. Ele também pode ser definido, mas também é um pedaço separado de códigos. Não há necessidade de aguentar tanto estresse no momento. Você só precisa ir com o fluxo. Então, agora vamos ver. Implementos, Vamos implementar data menos widget. Agora, esse conceito, então o que você tem que fazer é simplesmente ir para isso e cortar este andaime e colá-lo aqui. Agora, dentro dessas casas, você pode apenas escrever a tela de casas? E nesse topo, você precisa importar essa tela assim. Agora, se eu reiniciar novamente, você verá que nada mudou. Mas temos nossa tela inicial em um arquivo separado que existia menos rígido. E o que quero dizer com apátrida, gostaria de explicar novamente. Essa é a cor do texto azul não será alterada se eu tentar clicar nele neste anúncio. Então, simplesmente, esse é o significado de um widget sem estado. Agora, se eu quiser mudar essa cor desse âmbar para dizer o que de novo? Verde, digamos azul. Veja, isso é, você sabe, e se você vir agora Control S Hot Recarregar está funcionando perfeitamente. E não foi porque escrevemos tudo no No.5 principal. Não é assim rígido. Mas agora, quando pressionamos o Control S, essa função de fatura está sendo renderizada novamente. Ele é chamado e sendo renderizado novamente. Meu projeto de primeira letra todos os dias e basta clicar em Control S. Veja, está funcionando perfeitamente. Então, agora é por isso que o capô Hot Reload funcionará. Agora, você pode estar pensando por que não está funcionando só porque não nos separamos em widget sem estado e sem estado. Porque naquele momento em que Lee que funcionará será recuperado e as mudanças serão feitas. Então, espero que você tenha entendido o conceito de widget sem estado e sem estado. E podemos separar seu código de um arquivo para várias descobertas. Mais sobre isso, definitivamente, definitivamente, aprenderemos quando estaremos construindo alguns projetos básicos. Mas agora, esse conhecimento é suficiente. 9. Ativos e imagem de rede: Hoje vamos aprender a exibir uma imagem em nosso aplicativo. Então, até agora, estávamos apenas exibindo texto, mas o aplicativo real definitivamente contará as imagens. Então, agora existem dois tipos de imagens. Principalmente. Essa é uma imagem de rede e a outra é uma imagem definida. Agora a imagem da rede, quando a pecamos pela imagem, significa que a imagem virá da internet. Ou seja, não estamos hospedando essa imagem ou não estamos armazenando essa imagem em nosso código de flutter. Então, temos que ter no URL da imagem para mostrá-la. Primeiro de tudo, traga seu navegador e apenas escreva qualquer imagem do Google, você quer que ela seja um logotipo de flutter. Então eu tenho tantas imagens, tenho tantas imagens, vou escolher essa imagem e escrever o endereço da imagem de cópia. Agora aqui você pode ver essa sintaxe de imagem de rede é image.network. Então, dentro disso, temos que colar o URL. Vamos. Agora, no centro, removerei esse texto e image.net e simplesmente colarei aqui assim. Vamos ver. Podemos mostrar a imagem ou ela está mostrando, sim, veja, esta é a primeira vez que estamos usando uma imagem real em nosso aplicativo. E foi muito fácil. Neste momento, removemos que são textos em camadas rígidos porque não podemos passar dois widgets diretamente dentro da criança. Este problema definitivamente será resolvido nos vídeos posteriores, onde discutiremos sobre o widget que nós, que podemos usar para exibir vários, para exibir vários widgets em nosso aplicativo. Agora, existem algumas propriedades também, como aqui você pode ver a altura. Então altura, podemos dar, se eu reduzir a altura imediatamente, muito pouco, muito pequena. Se eu mudá-lo. Veja assim. É assim que trabalhamos com imagens de rede. Agora, a outra coisa é uma imagem de ativo para inserir uma imagem que já está presente em seu sistema. Então, geralmente o que fazemos é fazer com que você caia deixar imagens no diretório raiz como este aqui nós criamos ativos e dissemos que criamos o diretório de imagens antes porque é uma estrutura de pastas muito limpa para fazer. Agora colamos um arquivo dentro morto assim. Eu tenho esta imagem arquivo PNG de 6 pontos. O próximo passo é dar a seção HTML do ponto de especificação do CO2 Pub e descomentar ativos que já não gostamos disso. Consulte esses ativos seção. Nós não comentamos. Ele garante recuo ou então ele será adicionado, o que significa. E esse arquivo é muito sensível. Então você precisa ter certeza que não dá espaços ou guias extras nele. Só tinha que escrever assim ácidos. Agora, ele saberá que dentro de nossas imagens de ativos lá. Seremos arquivos mais antigos. Além disso, você pode escrever a localização do diretório de imagens com ou sem o nome da imagem. Ou seja, se não mencionarmos o nome da imagem como este , então direi que está correto porque Vince carrega todas as imagens nele. Agora, ao selecionar como inserir uma imagem de ativo anteriormente para a imagem de rede, simplesmente surpreendemos essa rede. Agora vamos fazer conjunto de pontos de imagem, imagem, conjunto de pontos como este. Então vamos apenas dizer conjuntos, depois imagens. Então, qual é o nome do arquivo? Emita 6 pontos PNG. PNG de 6 pontos. E agora vamos ver, funciona? Veja, temos nosso arquivo de ativos carregado, ou seja, nosso aplicativo principal, saberia de qual arquivo estamos falando. E isso não vem da Internet. Agora, podemos alterar algumas propriedades como a altura do lago, podemos dar um 100 C como este. Com também podemos mudar. Essas são as outras propriedades que você pode alterar. Mas agora não queremos. Normalmente, a altura está boa. Suponhamos 150 anos. Bem, está parecendo bom. Portanto, é muito importante entender essa diferença entre o ativo, a imagem da rede, porque em seu aplicativo do mundo real, você estará jogando com imagens todo esse tempo. Todos os aplicativos têm algum tipo de imagem neles. Ou é uma imagem ácida como o logotipo dos aplicativos, logotipo. Ele não mudará facilmente. Então, podemos simplesmente enviá-lo para eles em nosso código. E a disponibilidade, algo como a imagem de perfil de um usuário. Ele virá do banco de dados porque o usuário o alterará, tornando-o com frequência. Essa é a diferença. É isso por hoje. Nos próximos vídeos, falaremos sobre alguns outros widgets continuando nossa sessão assim. Obrigado. 10. Widget de ícone e botão: Agora é hora de aprender sobre outros orçamentos, como a visita ao Ícone. Flórida vem carregada com toneladas de ícones que podem ser usados para tornar nosso aplicativo mais bonito. Se você vir algum aplicativo, seja através do Facebook, Instagram, WhatsApp, você definitivamente verá algum tipo de ícones porque é, é muito agradável aos olhos. As pessoas podem se relacionar diretamente com esse ícone. Agora, a sintaxe é muito simples. Primeiro, temos que escrever o ícone. E dentro disso, v não pode simplesmente escrever diretamente o nome do ícone. Temos que escrever como ícones pontuar qualquer nome de ícone. Suponha que eu possa iniciar o usuário, eu posso iniciar o alarme, o que quer que seja. Vamos tentar. Eu removerei esse filho da imagem. Agora. Vou apenas dizer ícone e então posso iniciar o excesso de alarme. Agora vou simplesmente salvá-lo e ver nosso ícone é exibido na tela e é muito fácil. Agora, como qualquer outro widget V usado, definitivamente, podemos mudar sua cor e poucas propriedades também. Agora, para mudar a cor, vamos apenas dizer vírgula e depois ver cor, roda, cores, laranja. E depois o tamanho. Vou escrever para um 100. Agora você vê que é tamanho muito maior que dei a uma borda só para mostrar que podemos alterar suas propriedades do ícone. E a coisa é, não é que possamos usar o ícone somente nesse corpo. Agora, eu, se eu quiser no botão de ação flutuante, posso apenas escrever o ícone e depois ícones, essa mensagem lá dentro. Botão de ação flutuante. Veja. Então agora você pode compará-lo com o WhatsApp. O aplicativo Whatsapp também tem esse tipo de eu posso acabar com eles. E está parecendo muito bom. Tenho que dizer depois do botão de ícone, há outro widget, que é a região do botão. Portanto, sem um botão, qualquer aplicativo é inútil. Como os botões estão lá no lead para dar um feedback, estão recebendo feedback do usuário. Ou seja, se diz códons de cintas Adicionar ao carrinho. E se for algum formulário, você terá que enviar o formulário. Se algum outro, se houver dois karma, se você tiver alguma edição em seu, se você usou algum aplicativo, você pode ter encontrado muitos botões. Então, em fluttered, existem três tipos de Botão, Texto, botão, botão elevado, e eu posso colocá-los. Vamos entender isso um por um. Então, o que é esse livro didático? Portanto, neste botão de texto, não haverá alívio. Nosso efeito 3D assim, se eu simplesmente remover o ícone aqui e escrever texto. Mas então a primeira propriedade é obrigatória, é essa criança, ou seja, o que devemos dentro desse botão, vou simplesmente clicar com o botão direito do mouse em mim. E o segundo obrigatório está em precessos. O que deve acontecer quando um usuário clica nesse botão? Então veja, este é um botão de texto. Não há cor de fundo ou alívio ou é apenas texto simples. É por isso que o nome é esse. Agora, se você realmente quiser mudar ou estilizar nosso botão, você pode fazê-lo. Mas eu não acho que seja tão necessariamente porque se você quer fazer o estado, há outro, mas a densidade é elevada, mas um animal. Mas vou mostrar você como mudar o estilo deles também. Se você vir a propriedade de mosaico e ela aceitará, se for um texto, mas aceitará textos, mas, em seguida, estilo de ponto de e dentro, você pode simplesmente escrever primário, essa é a cor do plano de fundo e esta laranja. Veja que a cor mudou. Então, se você quiser, você pode dar algum preenchimento. Inserções de borda, áreas, certo? Simplesmente 10. Para o preenchimento definitivamente, ele não está sendo exibido agora. Podemos adicionar cor de fundo, fundo preto se você realmente quiser essa cor. Porque geralmente o que acontece se você realmente quiser esse tipo de botão? Você irá diretamente para o botão aumentar porque ele fornece esses recursos automaticamente. Mas está tudo bem. Então. Alguma outra coisa importante? Acho que não. É muito importante. Não. É assim que você exibe um botão de texto. E se você realmente quiser, você pode estilizá-lo como usando textos, mas estilo de 10 pontos e em seguida, fornecer propriedades diferentes e diferentes. Agora, lembre-se se eu removo esse estilo. Este é um botão de texto básico. Mas o que acontece se eu usar um botão elevado? Se eu simplesmente, a sintaxe é a mesma. Se eu simplesmente escrever um botão limitado aqui, então você verá que a cor do fundo é a cor do texto é branca e algum alívio é girado, dado que é, algum efeito 3D é dado. Então é por isso que usamos o botão elevado, porque é muito útil de usar. Agora, novamente, se você quiser, você pode estilizá-lo como aqui. Temos um estilo limitado , mas, em seguida, ponto de e primário será feito de cor de fundo. Vamos dizer este. No botão de texto. Quero dizer, era essa cor do texto, mas aqui está a cor de fundo. Agora, se você quiser aliviar, você pode apenas dar cinco. Você pode ver mais algum efeito 3D existe. Se você quiser alterar o preenchimento, você pode alterar as inserções de borda. Quando T C, Isso é preenchimento também é feito. Agora, se você quiser mudar de forma. Você também pode fazer isso usando uma borda retangular arredondada. E, em seguida, ponto da borda do raio fronteiriço. Em um ponto de raio de borda. E você pode usar em anos essa circular como a1 de todos os lados, circular, conjunto de pontos de raio de polar e dar dez aqui. Veja, se eu der dois em D, você notará mais. Essa forma está sendo alterada por esse programa por causa do ADS que demos. E aqui, estilo você os entendeu. E isso no local simplesmente o que deveria acontecer quando um usuário pressionou o botão dele. Então eu escrevo tempo, apenas imprimindo. Mas geralmente você faz algum tipo de atividade aqui, veja assim. Então, até agora, discutimos textos, mas depois um botão elevado. O tipo final de botão é o botão de ícone. Então, simplesmente o que ele faz, é um tipo de ícone que podemos pressionar e fazer alguma coisa. E acabamos de remover o código anterior e simplesmente levantamos eu posso. Mas, em seguida, pressionar estará lá em botões mais antigos. E no ícone. Já ensinei a exibir qualquer ícone. Este ícone aqui, checkout. Agora este é um ícone, mas você pode clicar nele. Você pode clicar nele aqui. Agora você pode descobrir, verificar quais outras propriedades ele aceita, como cores, o acento azul. Então posso dizer que você pode dar um 100. Veja, está tão bom. E se houver mais alguma coisa, cor de respingo, você pode estar pensando, qual é a cor do splash? Vamos ver. Veja. Se eu clicar nele. Esta é a cor do splash. E, da mesma forma, tem na imprensa que eu simplesmente imprimirei. Eu posso. Mas, em seguida, veja na depuração você pode dizer o botão Can. Então, cobrimos com sucesso todos os três botões. Esse é um botão de texto elevado , mas um botão de ícone NDA. E também como usar ícones em nosso aplicativo de flutter. Neste botão de ícone, lembre-se, a propriedade child não está lá. Aqui. Posso propriedades lá que aceitam um ícone. E nos botões Alda que pressionados são obrigatórios. Então você tem que mencionar o que deve acontecer se alguém clicar nele porque, como é um botão, você precisa saber o que deve acontecer depois disso. Então é isso. Espero que você esteja curtindo o curso e aprendendo mais sobre diferentes tipos de widgets. Vejo você no próximo vídeo. 11. Widget de contêiner: Nesta sessão, falaremos sobre o widget de contêiner. Então, o que é um contêiner? Um contêiner apenas envolve seu orçamento. Então, se você estiver familiarizado com o conceito de div no desenvolvimento web, ele funciona da mesma forma que isso. Usamos esse widget para que possamos dar margem em alinhamento com e muitas outras propriedades a esse elemento são os dois widget dentro dele. Então pense nisso como um invólucro que será usado para manipular os outros widgets. Então, qual é a sintaxe? Sua sintaxe é muito simples. Assim. Container é o nome do orçamento e as balas filho o que deveria estar dentro desse contêiner. Então, ok, vamos começar. Eu só veria mover esse código anterior e ter um widget de contêiner aqui. Na criança. Terei decks região antes de tudo. Então, será assim. E não isso. É como se flertar fosse incrível. Vamos salvá-lo. Vamos ver aqui. Então você pode ver que o texto está lá, mas não há nada como se você nem perceba que ele foi enrolado dentro de um widget de contêiner. Então, o que temos que fazer se você quiser ver esse contêiner, a primeira propriedade que você pode usar é essa propriedade de cor. As cores começam a temer. Você já sabe como usar a cor não. Veja. Então agora você pode ver o que é isso, essa coisa vermelha é aquele contêiner, você pode dizer como uma caixa também agora. Portanto, este é o contêiner e tem propriedades diferentes e diferentes. Primeira propriedade, duas primeiras, usamos criança e cor. Agora vamos ver o que é preenchimento e margem. Certo? Portanto, o preenchimento e a margem são usados para dar espaçamento entre os elementos. Então, o que é um preenchimento? preenchimento é o espaço dentro, que significa que você pode ver este incrível II e a caixa, e isso está aqui, coisa vermelha. A coisa do insight está se espalhando. E a coisa vermelha acaba azul. Isso é o exterior, lado de fora é margem. Veja-o com o exemplo e nós apenas fornecemos a propriedade de preenchimento, preenchimento e ele aceita um valor como inserções de borda. Depois, depois, digamos que se você clicar ponto-ponto-ponto, então você terá outra a opção Isso é tudo da esquerda, direita, esquerda, superior, direita, inferior em Lee simétrica. Por simplicidade, usarei tudo o que é do site mais antigo. Vou dar 20. Agora você vê, veja pelo insight de que isso, isso e isso, Este é o preenchimento e está parecendo compatível mais agradável do que antes. Então essa é a coisa do preenchimento. E o que eu estava dizendo é a próxima propriedade que é margem e fusão, é esse espaçamento fora disso, seja aqui, aqui estão o topo e o esquerdo aqui. Então, se eu for para a margem e novamente marginal, então aceita valores, inserções de borda, e por tudo isso, darei 20. Então, agora você saberá essa diferença. Veja do lado de fora aqui você obtém essa coisa de margem. Você também pode ler aqui. Margem é espaço externo e preenchimento. A idade é espaço no interior. Essas propriedades também estão lá, como largura. Se eu clicar em esperar e dar a ele um valor suposto AT, então vê-lo encolher. Se eu der um dia. É assim. Se eu chegar a ele, ele irá mais longe. Então, esses são os contêineres dentro se eu não der nenhuma maneira. Vai levar o que estiver dentro dele. Há um texto e que estamos apenas. Agora. Há outra propriedade que está dentro do contêiner, que é o alinhamento. E tem isso, exceto o alinhamento Sibelius. Suponha superior esquerdo, superior esquerdo, superior direito. Veja agora eu tenho que dar uma taxa de 250 e uma altura de 50, 58 anos. É menos depois de você ter comido D. O alinhamento. Agora mesmo. A coisa é que não há outro elemento, é que somente esse elemento está aqui. É por isso que o alinhamento não está funcionando porque a altura ou a posição é este lado e essa área apenas. Se eu o removi em C agora pega toda a tela. Essa é a coisa que temos que primeiro atribuir altura e peso do recipiente de tudo o que eles estavam envolvendo dentro. Então, apenas o invólucro. Esse alinhamento funcionará. Nos próximos vídeos, quando estaremos construindo um aplicativo mais agradável. Então eu vou te ensinar esse alinhamento e quando usar o código de alinhamento. Porque agora você pode estar pensando, não, isso não está funcionando. Por que não está funcionando? Talvez tenhamos muitas perguntas. E essa propriedade é a declaração do widget de contêiner, que excede a decoração da caixa como seu valor. Agora dentro da decoração da caixa, você também pode dar uma forma. Forma da caixa, círculo. Decoração de caixa interna. Veja quando você está usando a decoração da caixa. O problema é que eles também têm uma propriedade de cor, então você não pode dar várias cores. Nesse caso, você deve mencionar essa propriedade de cor dentro da decoração da caixa. E eu voltarei a dar estofamento para que o círculo pareça um pouco mais agradável, está dentro dele. Agora, não fizemos decoração de caixa. Há cor, borda, raio de borda, sombra de caixa. Portanto, essas propriedades também podem ser usadas para decorar seu contêiner, o que é muito específico para sua necessidade. Então, se você precisar, você pode apenas experimentá-lo sozinho também. Então, nos próximos vídeos, falaremos sobre as últimas visitas que restam a ser discutidas. Obrigado. 12. Widget de TextField: Hoje vamos discutir sobre TextField virgem. Portanto, os textos permitem que o usuário insira o texto. Ou contratamos muito ração estão dentro do teclado na tela. Então, basicamente nos permite coletar informações do usuário. Se você usa qualquer aplicativo móvel, você sabe que o texto é a espinha dorsal do aplicativo de dívida. Agora, qual é essa sintaxe, é uma sintaxe muito básica do campo de texto TXT. Então, como você deve nosso parêntese. Vamos tentar isso no corpo deles. Eu removerei o contêiner anterior e o terei texto, campo de texto. Aqui. Se eu salvá-lo, então você dirá isso, esta linha. E se eu clicar nele, temos nosso teclado. Posso escrever o que quiser. Mas o problema é que esse campo de texto não parece nem diz nada para o usuário. O usuário nem saberá o que escrever nele. Então, para isso, temos que usar algumas outras propriedades dentro dela, que são como decoração. Decoração, e aceita declaração de entrada é seu valor. Dentro disso. Aqui você verá muitas opções. Vou usar textos com dicas ou rotulados primeiro. Agora, se você passar o mouse sobre ele, ele aceita strings diretamente, não um widget. Então podemos apenas dizer direito, nome assim. E você pode ver agora que está olhando até pouco por 10 porque quando clicamos nele, sabemos o que temos que escrever nele. Agora há, além de textos rotulados, há muitos outros como o contador de bordas habilitar, habilitar é, se isso falhar deve ser desativado para esse momento ou não. Textos de dicas são como e nome completo, por favor. E se eu salvar. Agora, nesse texto, você poderá ver essa dica. Isso é que temos que escrever nosso nome completo. Então, pelo menos, podemos dar alguns dados fictícios para o usuário sobre o que ele tem que escrever. Agora, outra coisa que você pode ter é um ícone de prefixo. Os ícones dão um pouco de visual. Você pode dizer visualmente que parece bom quando estamos usando um Eu posso ver agora, esse texto está parecendo comparativamente melhor. Com este pequeno ícone ao vivo. Há algo mais parecido com borda, que podemos obter borda de entrada de contorno. Agora. Agora você não consegue vê-lo corretamente. Eu farei o quê? Vou apenas envolvê-lo em torno do recipiente que já aprendemos e damos uma margem de vantagem. Inserções. 20. Veja, esta fronteira está tão boa. E tão bonito. E se eu der nenhum ponto de borda de entrada, então toda a borda será C movida. Mas eu geralmente gosto desse esboço em pó. Agora, você pode estar pensando que apenas essas propriedades existem mais. Portanto, há muitas propriedades que definitivamente discutiremos corretamente. Porque sem um campo de texto, não poderemos criar nenhum aplicativo. Maxlength simplesmente nos diz que o nome não deveria, deveria ter caracteres Dan desiluminados nele. Não mais do que isso. Ele pode ser usado quando estamos usando uma senha, qualquer número de telefone, é qualquer número de telefone, deve ter um número específico de dígitos nele. Não mais do que isso. E agora, agora, veremos apenas a propriedade onchange receber muito que é onsubmit outra, mas em change significa que ela fornece uma função que nos dá um valor qualquer que seja seu campo de texto de retorno. Imprimiremos esse valor em nosso console de depuração. Agora. Acabamos de ter flutter. Veja. Agora, com esse valor, se você quiser, podemos atribuí-lo a uma variável e seguida, usar essa variável em qualquer lugar que quisermos. Cabe a nós o que queremos fazer. Mas definitivamente o TextField tem uma regra importante. E mais sobre isso discutiremos no próximo módulo. Obrigado. 13. Coluna e linha: Nesta sessão, falaremos de um widget muito importante. Então, falaremos sobre dois widgets. O primeiro widget é o orçamento da coluna. Então, se você notou até agora, estávamos apenas emitindo um widget na época. Mas isso não está acontecendo em aplicação real. Uma tela contém vários widgets, como textos com imagens, mas um completo. Portanto, para isso, um widget de coluna é usado porque ajuda a produzir widgets na direção vertical, que é de cima para baixo. É por isso que Seu nome é coluna. sintaxe é muito simples. Temos que selecionar o nome da coluna. Ou seja, o nome rígido é coluna. Mas aqui, uma coisa é mudada agora porque eu moro com todos os widgets que estávamos usando propriedade filho. Mas aqui estão crianças. E simplesmente porque estaremos produzindo vários widgets. E é por isso que é telefone plural. Então, sim, traga seu editor de texto. E vou acabar com o corpo. Vou ver apenas mover o código anterior e a coluna noturna. Então aqui serão crianças. Crianças. Nós insulina você apenas escaneia de cima para baixo quais elementos você deseja imprimir. Vou apenas aquele primeiro V alto, estou aprendendo. Flutter. Em seguida, o próximo widget, você pode usar o botão elevado. Nessa criança, podemos ter texto de envio. Vamos salvar e ver. Veja. Pela primeira vez, conseguimos imprimir dois widgets ao mesmo tempo, corpo de índices. Portanto, este é o uso do widget de coluna, se você quiser após a eliminação, mas então você pode usar o conjunto de pontos de imagem e, em seguida, define imagens, imagem seis, PNG. Aqui nós já temos, temos essa imagem aqui. Veja. Agora temos três elementos na pele. Primeiro é um widget de texto, segundo é elevado, mas depois, e esse terceiro é a imagem. Então agora aqui você pode ver na seção de notas, crianças estão sendo usadas. Em vez de uma criança. Todos os elementos são separados por uma vírgula porque dizia simplesmente É uma lista de widgets, ou seja, Y. E cada widget é a ordem desse widget será a mesma forma como você escreve aqui. Esta imagem não está sendo impressa de cima para baixo. Dead é outro widget que ajuda você a imprimir um objeto da esquerda para a direita. Então o rho também é o mesmo que a coluna. Isso ajuda a produzir vários widgets, mas uma linha ajuda a produzir widgets na direção horizontal. E vamos primeiro mudar a altura e o peso. É muito grande. O peso será 100. Veja, está olhando para a pia agora. A sintaxe é a mesma. Vou mudar essa linha. Portanto, esta coluna para filmar e salvar. Agora essa coisa horizontal se torna vertical. Portanto, esse é um elemento muito importante porque quando você está construindo uma interface de usuário completa, Getty é cada tela que você usará uma linha ou uma coluna. Combinação de ambos. A linha tem outra propriedade que é a dívida dos alinhamentos do eixo principal. É assim que os elementos devem ser exibidos na tela. Então, se escrevermos espaço uniformemente, visto da esquerda, deixado em todos os lugares, todo esse espaçamento de espaços é igual. E se eu escrever espaço entre, espaço entre, então c é o lado extremo esquerdo e extremo. espaçamento não está lá. E também há centro. Tudo se unirá no centro. Portanto, o fato interessante é que a porta de linha e coluna tem essas saídas principais e cruzadas existentes. A única diferença é que você precisa se lembrar quando diz desenhar os acessos principais da esquerda para a direita. E o eixo cruzado será de cima para baixo. Ou seja, se eu cruzar a cruz de x existe alinhamento, isso é centralizado. Acho que não. É realmente agora, porque o elemento já está no centro, porque isso está ocupando apenas tanto espaço, não a tela inteira. É por isso que não foi enviado para o centro. Mas o sucesso cruzado para uma linha significa de cima para baixo e o principal existe é da esquerda para a direita. E da mesma forma em uma coluna, o eixo principal é de cima para baixo e o eixo cruzado é da esquerda para a direita. Então você tem que praticar sozinho e tentar entender o que acabei de dizer. Porque o conceito é muito simples. Coluna e linha que estamos, estamos apenas usando-a para produzir vários elementos em uma determinada direção. E também podemos usar uma coluna dentro de uma linha e uma linha dentro da coluna. E com isso, com a ajuda desses e de Lee, você poderá criar uma interface completa. Obrigado. Então, na próxima sessão, falaremos outro widget que é muito importante e que nos ajudará a produzir vários elementos também. Obrigado. 14. ListTile e ListView: Nesta sessão de exploração de visitas, falaremos sobre qual estilo de lista e o que é o widget ListView. Portanto, um estilo de lista é uma única linha que normalmente contém X, contém algum texto, bem como ícone à esquerda ou à direita da imagem, apenas você pode entender como, o que é um estilo de lista e como ele se parece. Alguns podem ser um pouco parecidos com a interface do usuário muitas vezes o que espero que você ame, você tem uma conta do WhatsApp e é muito familiar a isso. Então, qual é a sintaxe? É simplesmente seu azulejo. Então, essas são as propriedades que ele aceita. Menos experimente por conta própria primeiro. Vou ter apenas um bloco de lista no início. Então, no título, terei texto de Elon Musk. Vamos salvar. Veja. Então é o que diz linha tipo de coisa horizontal. Então o outro elemento, qual outra propriedade eu usarei é legendado indo para a lua. A legenda é apenas Seton, tem uma fonte menor e sua cor padrão está um pouco em algum lugar lagostim. Então outra propriedade está liderando, isso é o que deveria ser uma frente duff. Vou usar um ícone aqui. E eu posso começar no círculo de contagem. E vamos dar-lhe a cor das cores, azul e tamanho para t. Vamos experimentar. Veja, isso é o que eu estava dizendo. Este é o ícone principal. E agora outra propriedade, muitas propriedades, mas mais uma importante é a direita. Isso é o que deveria ser no final. Terei um elevado, mas dez suponho. E ele só terá o texto do que deveria ser o texto. Não é uma boa ideia usar um botão como esse. Nessa trilha. Só terei um ícone. Mas então, se eu quiser, então no ícone, vou ter, posso começar a atrasar. Veja, temos um ícone aqui. O trailing significa o fim da coisa horizontal, o vento principal, o elemento frontal. E a última propriedade importante é o destoque. Ou seja, o que deveria acontecer. O que deveria ter sido se o usuário clicar nesse bloco. Então, no console que você acabou de ver, eu vou clicar aqui e ver então deve. Não estou falando sobre esse botão. Isso, isso temos, se quisermos fazer algo bom, temos que escrever isso neste local. Mas toda essa coisa de azulejo está imprimindo esse Elon Musk. Digamos que eu clique nele cinco décimos. É por isso que está aqui assim. Esse estilo de lista também é um widget de interface do usuário muito interessante porque, é, é um pacote de todas as coisas que podem ser necessárias em nosso aplicativo. Agora, já sabemos o que é um widgets de coluna. Vou envolvê-lo em torno da coluna. Veja que nada mudará. Agora, o que vou fazer é falar sobre o próximo elemento, que é ListView. Mas antes de ir para isso, gostaria de mostrar o problema com a coluna. Se eu, se eu tiver esse estilo de lista, tanto assim, isso muitas vezes, mais, se eu tiver, se eu pressionar é mu2 vezes, veja algum erro está lá na parte inferior, ou seja, o fundo é o nosso fluido. Isso se estivermos diretamente certo. Coluna aqui como esta, mostrará erro e não é rolável. Então, aqui vem nosso próximo widget, que é Exibição em lista. Listview é como uma coluna. Isto é, ele imprime essa coisa. Widgets da Alda da forma vertical para esta de cima para baixo. Mas também é uma coisa rolável. Se eu escrever a Exibição de lista aqui e salvá-la. O erro é que podemos ver que somos capazes de percorrer nossos elementos são widgets. Então ListView é, novamente é dizer que é o mesmo que a coluna no líder. principal diferença é que é, é nível de coral e lembre-se, ele imprime os widgets na direção vertical por padrão, se você quiser mudar, você pode simplesmente alterá-lo aqui no direção de rolagem e ponto de acesso que você também pode dar vertical. Mas nosso saudita horizontal também. Mas o problema é, então o elemento deve ser diferente porque verticalmente você não pode imprimir um estilo de lista. Além disso, você pode estar pensando, o que devemos fazer se você não quiser usar dados? Coluna rígida? Mas não queremos usar o widget ListView, mas ainda queremos remover esse erro. Porque obviamente todo o aplicativo, todas as páginas da tela que usaremos terão tantos elementos nessa tela. Nesse caso, você pode simplesmente adaptar esse elemento superior, ou seja, este é o elemento mais alto do corpo. Você pode simplesmente envolvê-lo com um widget e esse nome da visita é uma única visualização de rolagem filho. Você só se lembra desse nome porque é um divisor de águas. E isso ajudará você a tornar o widget da coluna rolável. Veja se o erro se foi, e agora, esta coluna agora está rolando sem nenhuma adição na parte inferior. Se você quiser, você pode pesquisar estes termos no Google. O que uma única visualização de rolagem filho, o que essa ListView, qual nossa coluna, se quisermos aprofundar. Mas eu lhe dei as informações básicas em um conceito básico de como e quando devemos usar esse tipo de widgets. Espero que você tenha gostado deste módulo porque aqui você está pronto para entrar em coisas mais aprofundadas nos próximos módulos. E no final deste curso, você se tornará um desenvolvedor completo de aplicativos de flutter. 15. O que é um Estado: Este módulo é muito importante porque aqui estaremos discutindo sobre o que são orçamento estatídico. Nas sessões anteriores V, estamos muito acostumados a declarar menos widget. Também criamos nosso próprio widget sem estado pelo nome da tela inicial. Mas definitivamente na aplicação mundial ideal V, minha garota pode ser muitos cenários em que temos que usar um orçamento com estado. Antes de entrar no estado totalmente widget, você pode estar pensando o que é esse estado? Portanto, um estado é apenas um valor ou um pedaço de dados em nosso aplicativo. Qualquer coisa que possa mudar, como contador, texto, cor, etc., pode fazer parte dos dados de instruções de estado em seu aplicativo. Isso como Zoom, um estado de nome de usuário, é o quê? Suas habilidades, flutter, Firebase, estas são todas estaduais. Qual é a cor do aplicativo? Azul, isso também é um estado. O widget com estado é simplesmente um rígido cujos dados internos serão alterados em alguma ação. Ou seja, o botão é clicado e em seguida, a cor do texto deve ser alterada são o, deve haver algum tipo de animação. Nesse caso. Ficar rígido é atualizar e reconstruir com 10 novos dados. Isso não é possível na região sem estado. Então, teoricamente, você entendeu, mas definitivamente estamos trabalhando em nosso código. Você pode ter muitas dúvidas. E vamos limpá-lo um por um. Então, removerei novamente todos esses dados. Mas antes de remover todos os dados, gostaria de ter uma nova tela. É em casa, está tudo bem. É um estado menos rígido. Mas eu gostaria de supor ponto de contato, ponto. Temos essa tela. Agora vamos criar nosso primeiro estado em tela cheia. Então, primeiro, temos que importar material como de costume e, em seguida, criar uma classe e um nome. Nome Eu chamarei é contato e, em seguida, data de vencimento estendida, visão completa. Certo. Em seguida, ele terá alguma máquina faltando ou quais direitos. E isso é assim. Este é o estado de criação. widget com estado terá duas classes. Um deles é o estado completo div, que estende o estado. E o segundo é aquela classe estadual que a estende. Então aqui você pode simplesmente retornar, suponha que eu vou chamá-lo de tecnologia. Estado. Isso novamente será rígido. Vou criar esse estado de contexto. Ele se estenderá é data, que terá esse nome. E então agora aqui, novamente, faltará já faz a conta. E agora você está familiarizado com esse cinto. Eu simplesmente devolverei o andaime aqui. Portanto, este é o esqueleto mínimo ou dub de um widget com estado. Então você pode estar pensando, Oh não, eu não quero escrever isso de novo e de novo. Nesse caso, você pode precisar de algumas extensões. Como aqui, eu tenho esses trechos de flutter incríveis. Então você definitivamente terá Dart e fértil nele. Com essas fantásticas tremulações, trechos. Recebemos muitos atalhos. Um dos atalhos é criar um widget com estado diretamente. Então, vou remover todas essas teclas de atalho S, D, F, que é um widget com estado de flutter. E então eu vou clicar em Enter e vou nomeá-lo. Contato. Para ver. Isso está feito. Não precisamos fazer nada com esse atalho. E qual é esse estado aqui? Eu terei esse nome de string igual ao convidado. Suponha que este nome de convidado seja um estado que mudaremos mais tarde e mostraremos como ele é, como a tela dribles e como ela, como a interface do usuário muda Gs em qualquer ação que fazemos. No próximo vídeo, continuaremos a partir daqui. Então tendão e alegria e pratique o seu melhor. E você. 16. O método setState(): Agora já discutimos sobre isso e como escrever um widget com estado. Agora é hora de fazê-lo praticamente e entender quando inverter, temos que usar o método set state. E qual é o benefício de usá-lo? Vamos fazer isso. Temos esta página de contato, ponto-ponto-ponto. Aqui no andaime, terei uma barra de aplicativos e ela terá um tipo de texto. Suponha widget com estado. Certo? E no corpo, vamos ter uma coluna nas crianças. E as crianças menos o primeiro campo de texto Hábito. E abaixo disso, vamos ter um texto suposto olá, Dan, variável de nome. E no ponto principal, em vez de entrar na tela inicial, vamos para a tela de contexto. Atualize nossa reinicialização do aplicativo. E veja que você verá apenas um texto normal, mas campo de texto com este widget de texto de saudação. Agora, o que eu quero é sempre que algo é mudado aqui , está no valor alterado. Eu quero que essa variável de nome seja definida. O que quer que seja reescrevendo. Certo? Mas o problema é que, se fizermos assim, há sem usar o estado definido, não funcionará. Vamos ver Olá, eu gostaria do arquivo Flutter. Veja, nada está funcionando aqui. É sólido. É novamente, olá convidado. Mas se usarmos apenas o método set state aqui, isso é um dado de teste de alteração e como, como gostaríamos de sentar Estados, SET 10 capitais, set state e, em seguida, parênteses. E dentro disso, novamente, função IF assim, é assim que está escrito. Então, dentro desse estado definido, agora, se eu mudar o nome é igual ao valor, e então começamos. Agora você só se concentra no texto Olá. Veja, a primeira vez que eles foram, estamos escrevendo, a interface do usuário está sendo reconstruída apenas por causa de um motivo, porque diz o widget de estado completo. Agora aqui afirma que é o nome. Podemos alterá-lo de acordo com algumas ações aqui. Essa ação é um campo de texto. Para entender o que está acontecendo e como a tela está se reconstruindo. Podemos apenas ter uma declaração impressa. Primeiro nessa conta, isso é a tela de impressão Building. E um aqui. Valor de impressão, se você quiser. Ou você pode usar um estado de conjuntos de impressão é chamado. Agora, quando eu reinicio, você só vê a construção da tela do console de depuração ou seja, essa função de fatura é chamada. É por isso que somos capazes de ver essa saída. Agora vou escrever, ver, se eu escrever f, então novamente define o descarte e a tela está reconstruindo. E você d, d, e. Então todo esse tempo o CUI era que essa função bill estava chamando novamente e esse nome de valor estava sendo alterado. É por isso que está sendo refletido aqui. Então, através do console de depuração, você pode entender o que está acontecendo sob o capô. E meia letra está usando o método de estado definido para alertar a interface do usuário para se reconstruir. Portanto, essa é a diferença entre um widget sem estado e com estado. Em dívidas rígidas apátridas, a dívida é o que está escrito, não pode ser alterada se queríamos através de alguns botões, cliques ou o que quer que seja. Mas em um widget com estado, esses valores podem ser alterados usando esse método de estado definido. No próximo vídeo, faremos outro exemplo de cauda do estado definido e, em seguida , tente pesquisar e praticar por conta própria também. 17. Widget stateful em ação: Então, até agora, sabemos como usar uma instrução SET e como ela pode ser usada para reconstruir nossa tela com o novo estado Dan. Mas é melhor praticarmos alguns com mais alguns exemplos. Vamos começar e criar uma nova tela. Novo e novo arquivo será. Suponha que não deva ser. E vamos apenas nomeá-lo com estado. ponto-ponto. Como de costume pacote de material de importação. Em seguida, tem uma visita com estado da minha data em tela cheia. Acabei de nomeá-lo assim. Em seguida, pegue o andaime. E então, como de costume, nesse título, tenho um texto de data, totalmente rígido no corpo. Você no corpo. Vamos ter o widget e o filho centrados. Vamos ter um widget de coluna. Agora fica em um widget com estado. Definitivamente, há algum estado em que criarei uma lista de string. Vou nomeá-lo. Nomes são iguais a isso. E eu aprendo Bill, Mark. Certo? E terei um NSDate de int I é igual a 0. Você pode estar pensando, o que são esses? Portanto, é apenas 0 porque o índice de uma lista começa com 0. Agora aqui, nesse primeiro, haverá alguns textos, um campo de texto e para convidar, minha média é então nomes. E eu, então ele adicionará o começo, ele mostrará IL-1. E para isso, temos que mudar para o meu ponto ponto médio, que é o meu estado em tela cheia e, em seguida, reiniciar. Vamos ver. Veja meu nome e meu nome é 11. Certo? E também a coluna usarei um centro de pontos de alinhamento principal do X principal que é de cima para baixo, deve ser centralizado. Certo? Agora o que eu quero é que eu quero levantar botões na mesma coluna. Levantado significa que sinto muito, quero dizer botão elevado. E o primeiro botão será o próximo. E o segundo elevado, mas depois vamos voltar. Certo, vamos ver. Certo. O que eu quero é quando clico neste botão Avançar, Meu nome é Elaine deve ser, Meu nome é Bill. Isso é H deve circular ou deve passar por essa lista de nomes para isso. No local, tenho que mudar esses dados. Eu fiz é que eu sou 0. Deve ser um. Se eu clicar no botão Avançar, até agora vou escrever estado definido e depois eu mais, mais. Vamos ver. Vou clicar neste próximo C, Meu nome está incorporado. Se eu clicar em Meu nome, Marcar. Da mesma forma, se eu quiser voltar, vou apenas definir o estado que menos menos. Aqui. Se eu clicar em Avançar, ele será Bill. Na verdade, podemos voltar. Ele aprenderá novamente. Mas o problema é que, se o usuário clicar se conectar várias vezes, ele mostrará alguma letra C. Porque eu sou apenas o Atlantis apenas 0, 1 dívida é três. Mas se eu for mais de dois, começará a mostrar erro longe demais que temos que fazer algum tipo de condições aqui no local, como o estado definido. Se eu vou apenas dizer aqui. Se eu for menor que o comprimento do ponto de nomes, então somente execute essa coisa de estado definido. Certo. Agora vamos reiniciar e verificar o que acontecerá. 012 vai para tratar não deve executar 01 marca. E novamente, tenho que escrever menos um aqui, definitivamente. Vamos fazer isso de novo. Eland Bill, veja, agora não está mostrando nenhum erro. E da mesma forma, volte. Quando você está voltando, temos que verificar se eu não é igual a 0, dez menos se já for 0, então não podemos ir mais longe. Agora, vamos tentar. Se eu for 123, certo? Agora, se eu for o Bill 11, e agora se eu tentar voltar também, também não funcionará porque temos nossa condição que garantirá que a tela não trave. Portanto, esse é um exemplo muito básico de estado definido. Mais um exemplo que você pode ter é supor que morto seja uma cor, essa cor é vermelha. Certo? Este é um estado. Agora terei um botão de ação flutuante. Botão de ação flutuante que eu gosto. Nessa criança, ela terá um ícone. Posso começar. Vamos ver. Não sei qual é a lente colorida. Vamos verificar isso. Veja, ok, eu tenho esse ícone aqui. O que eles querem é que quando eu clico neste ícone, sua cor deve mudar. Agora. Eu tenho essa cor fundo e essa cor de fundo será o estado vermelho. Ok, então, no início, o estado é vermelho. Mas eu quero é que quando clico neste botão, esse estado deve ser alterado. Então, quando clico neste botão, defina o estado, cor é igual às cores ponto Âmbar. Só estou mostrando exemplos diferentes e diferentes para que você fique mais confortável com os dados de conjuntos de dados entenda o que ele faz. Agora estou clicando nele, veja uma mudança de cor para Âmbar. Portanto, esse é o uso de conjuntos de data, e é assim que funciona um widget com estado. Ele simplesmente altera esses dados e reconstruir a tela Status com novos dados de dívida, simples assim. Então, no próximo vídeo, discutiremos alguns dos conceitos restantes deste módulo. E depois disso, estamos prontos para entrar nos próximos conceitos mais lisos. Obrigado. 18. O que é a função initState(): Então, agora já trabalhamos em widget com estado e como alterar o estado usando a instrução SET e get é outro método que é muito importante em um widget com estado, que é chamado de estado init. Então, o que há em cada estado? É uma função que já está morta dentro de cada widget com estado que só temos que escrever IN. Veja aqui eu consigo esse ajudante. Então, se eu clicar em Enter, há essa função em seu estado e o que ela faz quando esta tela, nossa van, esse widget com estado está sendo construído para a primeira coisa. Isso é chamado. Isso significa que antes dessa função de fatura, antes da interface do usuário, isso em seu estado será chamado. Então, se você quiser ver o que estou dizendo, vamos imprimir. Isso é cérebro. Aqui. Estado de inicialização e na função Bell. Vamos imprimir a função de construção. Agora vamos reiniciar o aplicativo. No console de depuração. Você verá primeiro que o estado init foi chamado e, em segundo lugar, essa função bill foi chamada. Portanto, isso é muito poderoso e muito útil quando estamos construindo um aplicativo do mundo real. Então você pode estar pensando, ok, mas qual é o uso desse estado init? Então, o que costumamos fazer é atribuir algum valor. Nós atribuímos algum valor às nossas variáveis, variáveis de instância, você pode dizer a esses dados, suponha que isso seja apenas, por exemplo, esse é o nome da string e essa é uma variável. Agora, esses dados estão chegando. Suponha que, na tela anterior, use o nome dela. Aqui. Vou apenas dizer esse nome. UserID, os dois. Jeff Bezos. Agora, no estado init, gostaria de atribuir esse valor. são os dados que vêm da tela anterior para esta tela. Acabamos de escrever este nome de ponto é igual ao nome de usuário do ponto do widget. E depois no texto, mas eu gostaria de mostrar esse nome de usuário. Vamos ver, funciona ou não? Veja. Então, o que fizemos foi que os dados vinham da tela anterior para a tela, apenas por exemplo. E aqui você está atribuindo esse valor a uma variável que estava vazia, que era nula anteriormente. Mas antes de criar a tela, esse valor era atribuído a essa variável usando o estado init. Desde então, porque é a primeira função que está sendo chamada quando esse widget foi compilado. Há, você pode dizer quando esse orçamento estava aumentando. Agora, suponha, espero que você se lembre do estado estabelecido conservador anterior. Se eu clicar nisso, essa função de fatura será chamada novamente. Mas a função init state só é chamada uma vez. Então veja, a função bill está sendo chamada novamente porque a página está sendo atualizada. Mas essa coisa de estado init, von, não podemos chamá-lo novamente, já é bem isso em Lee enrolado uma vez ADH você tem que remover esta tela ou ir para a diferença pode totalmente diferente de duas páginas e depois volte para esta página novamente. Esta é a imagem em branco. Aqui nós apenas atribuímos esse valor do widget pai a este widget. Que coisas você pode ver. Há muitas coisas, como fluxos, textos e ser controlador. Portanto, o valor das dívidas são aquelas coisas que queremos inicializar serão usadas ou o VK pode inicializá-lo no estado init. Então, neste momento, você pode estar pensando no que estou dizendo, mas depois quando estamos usando o banco de dados do Firebase ou precisamos inicializar algo. Suponha que alguma solicitação HTTP. Essas coisas, podemos fazê-lo no estado init. Isso significa que acabou de morrer são inicializados essa coisa assim que esta página estiver sendo construída. Então, espero que você tenha entendido o conceito de orçamentos com estado e como as páginas estão sendo construídas. Esse estado init é muito importante. Mas agora, se você entendeu, a menos que o conceito também, então é suficiente. Podemos passar para alguns outros tópicos. E Q 19. Entendendo o ciclo de vida de Widget: No último vídeo, V e, em seguida, como o estado init funciona Vogue. Da mesma forma, também temos funções ou outras coisas. Qualquer widget com estado, que é chamado de ciclo de vida do orçamento completo do estado. Portanto, DRF, algumas das funções que podemos usar no widget com estado. O primeiro é o estado init, que já discutimos. Este é o primeiro método chamado quando o widget é criado. É chamado uma vez e apenas uma vez. Geralmente é usado para inicializar propriedades que dependem desses widgets que criam a criação dessa árvore. Subscrito dois fluxos alteram modificadores. Qualquer outro objeto que possa alterar a data abaixo desse widget. Então, isso discutimos. Em seguida, são dependências de mudanças profundas. Esse método é chamado imediatamente após em cada estado. E quando a dependência do objeto do estado de morte muda via widget herdado. Então você pode ver que isso mudou as dependências. Eu vou simplesmente, vou simplesmente escrever impressão. Alterou as dependências. Vou reiniciar o aplicativo. E aqui você verá primeiro em seu estado estará lá. Em seguida, eles mudam as dependências, depois a função dupla. Esse método raramente é necessário ou usado. Essas docas do flutter também sugerem que poderia ser útil se você precisar fazer algumas chamadas remotas. Mas quando n herdou atualizações de widget, esse conceito não é tão importante. Eu tenho construído absolutamente muitos, muitos anos e isso não é importante. Terceiro é essa função de sino. Esse método é chamado toda vez que fizemos essa reconstrução, é obrigatório e deve retornar um widget. Então esta é a função bell. Já temos, já sabemos que será chamado naquele 30 lugar primeiro em seu estado. Em segundo lugar, altere as dependências. E em terceiro lugar, a função para dias atualizou a região. Esta também é uma função que é dada pelo widget com estado. É chamado de mudanças frígidas pai e tem que reconstruir discreto. Esse é esse widget. Então, o que quero dizer é, suponha que aqui esses dados estejam vindo daquele frígido pai, é da tela anterior. E aqui atualizei. Essa coisa é chamada se esses pontos, suponha que o nome não seja igual a 0, nome de usuário de ponto rígido. Ou desculpe, você pode apenas dizer este ponto ponto ponto ponto nome de usuário, marca. Eles mudaram? Então agora não podemos mostrar isso, mas você tem que entender o conceito. Suponha casos típicos quando um pai passa alguma variável para as crianças através do construtor, que é esse caso que já fizemos. O pai está passando alguns dados pelo construtor. E se isso, se os dados do pad e dos widgets mudarem, essa função também lembrará e mostrará que as alterações foram feitas. Então, para a causa que funcionará depois disso, não há necessidade de ler o estado definido por conta própria. Essa função também não é muito usada. Mas quando estamos aprendendo sobre widgets com estado, pelo menos você deve saber. Esses termos também existem. 50 estados definidos. Já sabemos que este é um rei do estado definido. E depois disso, a função bill é chamada novamente e a interface do usuário é criada. Isso não é uma coisa nova. sexto está desativado. Essa função é chamada quando o objeto é removido da árvore. Isso novamente raramente é usado. Esse método existe basicamente os objetos de dados de custo podem ser removidos de 1 para outro e podem ser removidos temporariamente. Vou apenas mostrar que isso também existe desative assim. Quando você acabou de imprimir, desative. E uma final e a última estão descartadas. Isso é muito importante. Esse método é chamado quando esse objeto, ou seja, quando esse widget com estado é removido da árvore permanentemente. Aqui devemos liberar fontes de energia retidas pelo objeto, como parar qualquer missão é o que for. Um exemplo é que o meu TED de Wendy é chamado vil usando o posicionamento do empurrador do navegador. Somente na próxima sessão estaremos falando sobre navegação. Então isso é de uma página para outra página. Se formos, então a página anterior deve ser descartada corretamente. Não deve haver vazamento de memória. Então, em um aplicativo do mundo real, é muito importante usar esses mentores de descarte. Aqui vamos parar alguma animação, nossas chamadas de banco de dados ou qualquer outra coisa, o que não é necessário mais tarde. Portanto, esses widget secular, livre e stateful primeiro é o estado init segundo, abandonando as dependências. O terceiro é a função de compilação. Do que 40 é se fizermos algum, se o widget pai deles fizer alguma alteração em suas variáveis aqui. Então atualizou vd, essa chamada, comparamos isso com valores. E então o último é o desativação, que também não é muito útil, mas essa postagem é muito usada. Muito. Então você tem que ter certeza, você conhece todos esses termos e quando estamos usando isso mais tarde, você não está confuso sobre o que é isso ou isso é algo novo? Porque pelo menos esse conceito que conhecemos mais tarde praticamente aprenderemos a usá-lo. Obrigado. 20. Conceito de pilha por trás da navegação: Neste módulo, iniciaremos um novo tópico que é a navegação. A navegação é uma parte fundamental da experiência dos usuários para qualquer aplicativo móvel. Porque definitivamente os usuários constantemente navegam constantemente entre telas diferentes e diferentes. É impossível que você esteja construindo e um aplicativo completo e tenha apenas uma tela nele. Se você viu se você vê um site de comércio eletrônico, DNR, pedir meu pedido, carrinho , página inicial e página de oferta. Há muitas telas para dívidas. Temos que saber como navegar corretamente. Agora papai está doente conceito de flutter de navegação, que é pilha. Se você está vindo de qualquer linguagem de programação R, Se você fez sua formatura, então definitivamente, você sabe o que é uma pilha? É simplesmente empurrar e estourar elementos. Então você pode ver esse diagrama e entender isso. Suponha que isso não seja uma pilha vazia. Em seguida, uma tela que é quando o aplicativo é aberto e, em seguida, a tela inicial está sendo enviada para a pilha. Então, a partir da tela inicial, se navegarmos para a tela de contexto, ou seja, se apenas acessarmos os contextos limpos e tivermos a opção de voltar para a tela inicial. Então essa tela de contexto vai acima escola em casa, como apenas a pilha. Ou seja, está acima um sobre o outro. Então você pode simplesmente dizer que segue a regra do último a sair, que é lifo e não primeiro a primeiro a sair. Então, se aparecermos a tela de contextos e voltarmos novamente para a tela inicial, esses contatos verdes serão removidos da pilha. E então, novamente, invade a pilha. A tela inicial estará lá somente, o que ficará visível para o usuário final. Então este é o 2D, esse é o conceito por trás da navegação na Flórida. Você precisa entender porque definitivamente em sua mente, você deve visualizar como páginas ou como seu código está funcionando. Vamos começar então. Se você conhece o conceito , vamos começar com uma navegação básica. Traga esse editor de texto. E essas páginas que eu não quero, vou apenas criar uma nova página. E o nome é o primeiro ponto do ponto da tela. Então vou importar material. Então, será apátrida. Não quero alterar nenhum dado. Será a primeira tela. Será um andaime na barra AB. Vamos ter e do texto do título da primeira tela. Agora, basta atribuir esta primeira tela no ponto do domínio. Agora atualize seu aplicativo e vamos ver. O primeiro rei está morto. Então, no próximo vídeo, aprenderemos sobre o conceito de Bush e Bob. É assim que enviar essa pilha, uma tela dentro da pilha e como removê-la. E volte novamente para a tela anterior. 21. Método de push e Pop: Vamos continuar trabalhando na parte de navegação. Então, se tivermos essa primeira tela no corpo, vamos ter um widget central. E então filho de botão elevado. E o dx será igual à segunda tela. Certo? Certo, temos esse botão. Agora. Temos que criar uma nova segunda tela também. Então, vou criar um novo arquivo na segunda tela, mas Dart. Mais uma vez, eu tenho que fazer esse material de importação. Em seguida, tenha um widget sem estado chamado tela de segundos. Nós, já que é uma tela, então é realmente andaime. Nesta parte, teremos um título. Isso é muito repetitivo, eu sei, mas você tem que praticá-lo. Você tem que se acostumar tanto isso que você sabe tudo sobre isso. Certo? Temos essa segunda tela, certo? Agora, temos que navegar para, você pode estar pensando, ok, mas como navegar? Para navegar, há um método chamado push and push placement. Ou seja, primeiro é empurrar. Ou seja, vamos apenas empurrar para cima a próxima tela acima da tela. Ou seja, vamos empurrar a segunda tela dentro da pilha. Mas a primeira pele vai ousar a pilha. O que quero dizer é que temos que usar o push, mas a sintaxe que você precisa lembrar é primeiro é o ponto do navegador, depois a era do CD, tantas opções. Empurre, pop, empurre a substituição. Então, vamos usar push. Então aqui você verá que aceita duas coisas. O primeiro é um contexto e o segundo é uma rota. Esta rota temos que me enviar widget de rota de página TDL como este. Veja, é um pouco diferente, mas este é um código que você precisa aprender ou simplesmente lembrar de cor, é isso. Agora, este Construtor é uma função como esta, que, aqui será contexto. E então essa função retorna. Assim, o nome da tela atinge em nosso caso é a segunda tela. Portanto, esse é o código necessário para navegar de uma tela para outra. Além desta segunda tela, tudo o que você precisa lembrar, essa é a sintaxe. E o push de ponto do navegador usa dois parâmetros. Um deles é o contexto e o segundo é a rota da página de material. O material page it out aceita um parâmetro do Builder, que é uma função que retorna esse nome de tela. Esse é o widget tensor de identidade. Você pode apenas dizer, vamos ver, está funcionando? E lembre-se aqui que estamos usando e vou apenas escrever o método push porque há uma diferença entre push e push replacement. Vou apenas clicar em ir para a segunda tela e ver que a segunda tela está lá. Portanto, esta é a primeira vez que estamos usando várias telas de uma tela para outra. E agora você pode ver aqui que há esse botão de seta. Então, imagine por causa desse empurrão, estamos prestes a voltar para a tela anterior. E se você puder visualizar uma pilha, isso significa que acima da primeira tela, essa segunda tela estava sentada. E então nós apenas o removemos. E você pode estar pensando, ok, eu entendi de alguma forma o que é empurrão, mas o que é a substituição de push? Então, a substituição por push limpa essa pilha. Isso significa que não podemos voltar para essa tela anterior. Uma vez que navegamos para a segunda data da tela, não há seta para trás. Todas as telas anteriores serão removidas. Então, esse é o navegador. Substituição por push. Simplesmente. Depois disso, tudo será o mesmo, desde o contexto até a rota da página material e tudo mais. Somente a diferença será enviada sintaxe de substituição. Agora, novamente, traga o emulador e experimente sozinho. Quando clico em ir para a segunda tela, veja que não há botão de seta. Não podemos voltar daqui. Você pode entender isso com um exemplo do Facebook. Primeiro de tudo, essa tela de login aparece quando inserimos nome de usuário e senha. Depois disso, o usuário está e, se estiver correto, o usuário é navegado para a tela de perfil. E a partir da tela do perfil da dívida, ele não pode voltar novamente para a tela de login até e a menos que ele clique no botão de logout. Portanto, este é um exemplo muito bom e típico de quando usar push e quando usar a substituição por push. Agora, entendemos e aprendemos a enviar páginas. Mas há outro conceito de popping pages. Então, o que faremos aqui nesta segunda tela. Apenas no corpo deles. Mais uma vez. Crie o centro certo e depois criança. Em seguida, botão elevado. Aqui está que eu fiz algo errado. No botão elevado. Acabei de ver quando a criança que você vai, vou escrever aqui e voltar. Agora, aqui estaremos entendendo o conceito de pop, o que significa simplesmente remover esta página da tela e menos no push de pontos do navegador de impostos. Agora aqui apenas pop simples e aceita contexto de passo. É isso. Nada muito. E para aparecer, lembre-se aqui, ele é empurrado, não por push replacement, ou então seu aplicativo falhará. Você simplesmente sairá diretamente do aplicativo. Certo? Agora, se eu clicar em ir para a segunda tela, ver que temos este botão Voltar e quando eu clicar nele, voltarei novamente, voltarei para a primeira tela. Agora você pode estar pensando esse roteamento também faz a mesma coisa. Ele também, por padrão, chama a função pop de ponto do navegador. Ambos fazem a mesma coisa, mas aqui escrevemos deliberadamente o código para voltar. É isso. E este ponto pop do navegador remove a página mais alta da pilha. Portanto, pode haver menos de 23 páginas, mas só remove essa página superior. É isso. E se você quiser desta segunda página, você também pode voltar. Bom, duas páginas diferentes. Vou apenas navegador da escola, mas empurre. Então aqui, a rota da página de material, depois simplesmente contextos. Agora eu gostaria de ir para para esta página de contato. Suponha que a página de contato aqui. Certo? Isso também é push. Lembre-se, agora o que acontece no índice tag laticínios. Ele só está recebendo widget no, neste momento. Então, quando clico em ir para a segunda tela, então a adição de tecnologia muito abaixo da dívida é a primeira tela acima dela, depois a segunda tela. Então, se eu for para isso, desculpe, esqueci de mudar o nome. Se eu for para a tela de contato, veja agora os contextos cana estão lá e agora nas telas de diretório de tags dest uma acima e abaixo. Então, quando eu voltar aqui, a segunda tela virá e a tela de contextos será exibida da pilha. E agora, se eu voltar aqui novamente, então esta primeira tela está aqui. Mas suponha que a partir dessa segunda tela, eu usarei a substituição por push. Agora, o que acontecerá? É muito interessante ver na primeira tela, quando vou para a segunda tela, temos duas telas na pilha. Mas se eu clicar em Ir para contato e já que ele está usando a substituição por push, ele removerá todas as telas. Essa é a segunda tela , bem como a primeira tela. Agora, se eu for para Contato, veja, ele está sendo removido. Agora eu tenho uso de substituição push aqui. E é por isso que não devemos ser capazes de usá-lo. Você tem que dizer isso de novo, às vezes simplesmente para pequeno eu venho, está tudo bem. Mas você precisa entender que essa substituição de push remove toda a pilha, todas as visitas dessa pilha. Isso pode acontecer por causa de algum cache normal ou algo assim. Mas até que você não tenha familiaridade suficiente, você entendeu esse conceito de cor. Isso é o que importa. Nos próximos vídeos, discutiremos navegação, modo em profundidade e água, as outras funções em vez de apenas empurrar pop e todas as outras coisas também, que serão discutidas em um enquanto. 22. Entendendo o nome de rota: Até agora, aprendemos a navegar usando o método push. Mas há outra maneira de navegar é usando rotas nomeadas. Agora suponha que se você precisar navegar para a mesma tela em muitas partes do aplicativo, a abordagem anterior pode resultar não é duplicação de código. A solução é definir um nome, rota e usar esse nome para navegação onde quiser. E a sintaxe também está pronta simples, não como antes, temos que usar a rota da página de material e, em seguida construtor e muita coisa antes era muito mais código de caldeira, codificação boilerplate e tudo. Mas agora a sintaxe é muito fácil. Assim, as etapas são. Primeiro, temos que criar duas telas, o que já fizemos, ok? E o segundo é definido as rotas fornecendo propriedades adicionais no widget ADL. Então, agora temos que ir para a nossa página principal de pontos. Aqui. Temos que usar propriedades de rotas aqui como esta e, em seguida, chaves. Portanto, isso também é propriedade das rotas de laboratório de materiais, o que definitivamente o ajudará na navegação e no código limpo. Então, primeiro você precisa determinar a sequência de tarefas correta. É o que ele deve ser chamado. Esse é o nome da rota. Mas aqui acabei de dar barra, que significa a página inicial. E é uma função como antes apenas. E aqui estarei enviando a tela inicial. E, portanto, segunda rota você pode ter contato. Você pode ter esse contato. E aqui novamente, essa tela de funtion e contextos. Quando estamos usando rotas , não devemos usar a propriedade doméstica. Devemos usar a rota inicial. E aqui, qual é a rota inicial é essa barra invertida. Então, tenho que comentar esta casa e depois reiniciar nosso aplicativo. Digamos que a rota inicial seja na tela inicial ou não. A rota inicial define qual rota o aplicativo deve começar. Então, pelo nome, só você entenderá. Está demorando um pouco no meu sistema. Sim. Mas está feito. Digamos que o ensino inicial em casa está aqui. E vou apenas enviar a primeira tela inicial 2. Vamos ver. Agora, como navegar para a segunda tela usando o nome, que é navegado pela camada de propriedade push name. Nós, estamos usando a substituição de push e push de ponto do navegador. Mas agora podemos usar o push nomeado e push Nim substituto. Vamos para a primeira tela. Aqui. Veja que temos nosso método push, que vou comentar e ter push chamado meu 10. E a sintaxe é muito simples. Navigator dot push nomeado, depois contextos e seu nome de rota. E o nome deles será contato de barra. Vou enviá-lo para ir para Contato. Suponha. Então você pode ver que a sintaxe é muito simples. É o nome do push de ponto do navegador. Então aqui não precisamos usar nenhuma página de material, rota e tudo mais. Simplesmente podemos escrever o nome da rota e isso nos ajudará a navegar. Vamos para Contato e ver as páginas de contato aqui. E da mesma forma, nós empurramos. Nome de substituição push. Ele faz o mesmo trabalho a substituição por push nas diferenças de líderes. Aqui estamos usando um nome de seca. E é clicar e ver que não há botão Voltar. Não podemos voltar aqui também para navegar de volta. Ou se você tiver, se você quiser criar um botão, podemos simplesmente usar o navegador dot pop, como antes. A única diferença é que estamos usando rotas de nome para nós para a Marinha para navegação. Bush nomeado. E da mesma forma na reunião, mas que você pode escrever quantos nomes quiser. Suponha que a segunda página, então. Contexto. E segunda página. Segundos. Bom. Certo? E vamos apenas dizer que é a segunda tela. Certo? Portanto, essa é a maneira de usar rotas. Agora a coisa é, a única desvantagem aqui é quando estamos navegando, taxa deve ter que lembrar esse nome corretamente. Suponha que nós o escrevemos. Suponha que o ponto de contato S seja contextos, então ele mostrará erro. E definitivamente, é muito difícil para nós nos lembrar da ortografia. Essa barra invertida corretamente, sempre que longe fica mais fácil uma solução pequena. E isso é usar modificador estático para chamar rotas de nomenclatura. O que significa é que se usássemos um nome, se você começar o método para navegar de um lugar para outro dentro do conceito de nomeação, então teremos que lembrar a string que fornecemos ao seu nome. Nem sempre é dívida. Lembramos o nome quando há várias telas em um aplicativo. Então, criamos um tipo de dados de string dele com o modificador estático, para que possamos atribuí-lo diretamente, chamando-o através de sua classe, o que significa simplesmente significa que estamos usando uma variável tática dentro do nosso estado menos rígido e dê um nome como esta casa, simplesmente escreveremos estática. String. Id é igual a casa assim. Certo? E então, no arquivo main.js, podemos simplesmente escrever para o principal como essa chave. Podemos escrever 0 ID de ponto de tela. E isso terá um contexto de tela inicial. Simples. Então, fica muito mais limpo e agradável. E definitivamente você faria, você pode se lembrar do nome da classe, pelo menos na tela inicial. É muito mais fácil de lembrar do que a corda. Da mesma forma, se você for para a segunda tela, podemos simplesmente escrever, pegar o ID da string é igual a. E então eu posso escrever uma segunda tela assim e ir para o ponto principal. Aqui, eu só tenho que escrever a segunda tela. E como é variável estática, podemos chamá-la diretamente sem criar um objeto. Então é assim que é feito. Como você pode ver acima, usamos um modificador estático, que tipo de dados de string para a tela e atribui a ela uma variável de string. Agora a próxima coisa é que temos nossa senhora. Em seguida, esses IDs de string, que são essas variáveis estáticas nas rotas. Agora é hora de chamá-lo, porque podemos acessá-lo diretamente facilmente e navegar de uma página para outra lembrando esse className. E agora não precisamos nos lembrar dessa corda. E eu vou de novo e de novo, o que quero dizer com isso. Novamente nesse contexto, o mesmo de antes. ID de string estática X é igual ao contato. Então aqui, basta escrever o ID do ponto de contato. E se você puder mudar isso também. Agora, quando vou para a primeira tela aqui, não preciso escrever essa string como esse contato. Posso simplesmente escrever contato e estética. Então, assim, método tático, eu posso simplesmente chamar o ID assim. Veja a diferença. É uma maneira muito limpa de escrever nosso e gerenciar nosso código. Posso dizer ilegal para entrar em contato assim. E veja, novamente, está funcionando. Não há erro. Se estivermos usando essa abordagem. Cabe a você qual você prefere. Se você estiver assistindo a muitos vídeos e tutoriais, você também pode se deparar com esse método, porque é uma preferência pessoal. O que você quiser, você pode fazê-lo, Nem sempre é necessário usar essa tática, mas definitivamente vou sugerir você porque quando você tem muitas e muitas rotas, então é impossível para você todas e cada string corretamente. É isso. No próximo vídeo, aprenderemos mais sobre como passar dados entre duas telas e mostrá-los na interface do usuário. 23. Passando dados através do Construtor: Então, até agora, entendemos como navegar de uma tela para outra usando uma maneira normal e usando uma maneira nomeada. Então, agora é hora. Entendemos como passar alguns dados enquanto navegamos definitivamente em um aplicativo. E haverá cenários. Então temos que passar um dado da primeira indo para a segunda tela. Suponha também que haja uma situação como na segunda tela, precisamos de nome de usuário desse usuário, caso de rede. Não queremos ter novamente um banco de dados chamando a segunda tela porque ele consome muito tempo e consome recursos. É melhor que, se tivermos os dados já na primeira tela, passamos os dados para a segunda tela para esse construtor. Como já sabemos, existem dois tipos de construtor. Construtor parametrizado, construtor de nomes. Portanto, para aceitar dados, primeiro temos que criar uma variável de instância na tela para a qual estamos navegando. Essa é uma segunda tela que você pode ver e criar um construtor nesse espírito, que aceita e atribui o valor à variável de instância. O que quero dizer com isso é, vamos lá. Suponha que tenhamos esse creme de contexto que ele tem. Vou simplesmente pegar esta segunda tela. Aqui. Primeiro, terei uma variável de instância do nome da string. E então eu tenho que declarar. Mencionei um construtor que, exceto esse valor, e o atribuirá a Buda, nomeado para essa variável. Mas definitivamente para baixo só fizemos esse construtor. Vou apenas remover este e criar um novo como antes. E simplesmente escreva esse nome de ponto. Certo? Esta seção está concluída. Agora em main.jack definitivamente. Aqui. É pedir que tenhamos que enviar algum valor. Portanto, é melhor quando estamos usando, porque os fornecedores estão usando rotas nomeadas agora isso não é para enviar um valor. Também discutiremos isso. Mas, por enquanto, vou apenas comentar essa segunda tela. E agora, na primeira tela, usarei o método push, não o push chamado meu turno. E você pode ver nesse método push, a segunda tela está dando alguns adicionados porque está dizendo que tem que haver algum argumento inserido na segunda tela está aceitando algum argumento. Então, simplesmente vou enviar isso porque, como é um argumento posicional, não um construtor nomeado, é uma partição que é a 0ª posição. Então, vou simplesmente dizer nome, nome, vou dizer crianças. Agora, na segunda tela, no estado init, sinto muito, esta é uma região sem estado. Então, temos esse botão para entrar em contato. Aqui. Vou simplesmente imprimir o valor, que é o nome. E vou escrevê-lo impresso. Ok, agora vamos ver, funciona? Podemos enviar dados de uma tela para outra? Vamos descobrir. Abra seu emulador. Agora vá para o contato para que seja bom em segundos. Espero que você tenha entendido. Então, quando eu for, agora temos esse botão impresso. E quando clico neste botão, vejo Bill Gates na tela de impressão, podemos ver esse valor de Bill Gates, que foi enviado da primeira tela. Então, finalmente, v saber como navegar com a configuração de dados. Mas agora era apenas um argumento posicional. mesmo que quando estamos passando dados para um construtor de nomes. Que não é uma coisa muito difícil , pois fizemos isso novamente novamente. Simplesmente o que você tem que fazer. Vá para a segunda tela e simplesmente faça isso no construtor de nome. E você pode dar obrigatório , pois não é um elemento nulo em um valor liberal. Agora, na primeira tela, você não terá que fazer nada. É um nome parâmetros ter que escrever o nome que é o meio como mencionamos lá. E agora vou chamá-lo de Elon Musk. Agora, novamente, verifique se ele está funcionando com o construtor de nomes também. Quando eu vou para a segunda tela e clico em Imprimir, consulte Elon Musk. Então essa foi essa diferença e desde o início das sessões de pontos, você deve saber que a diferença entre os construtor particional e os parâmetros nome foram ênfase sobre isso de novo e de novo porque é um conceito muito central. Agora, essa coisa está morta. No começo, removo essa rota nomeada porque ela estava mostrando alguns adicionados. Só porque se você tiver uma rota de nome e quiser passar esses dados, também podemos enviar parâmetros val1 navegando, mas simplesmente adicionamos argumento a um mapa empurrando para a próxima tela. Você pode ver aqui com o exemplo push de ponto do navegador contextos nomeados, ID do ponto de contato. Em seguida, é um novo parâmetro chamado argumentos e aceita mapa. Aqui, a chave é nome e um valor que eu dei tem string. Mas você também pode ter objetos diferentes ou modelos personalizados no futuro. Mas, para entender esse conceito, você precisa ver como isso é feito trazendo seu editor. Agora, na primeira tela, preenchi ir e verificar no domínio ponto, ponto. Certo? E como estamos usando rotas nomeadas, tenho que remover esse construtor. Ou seja, não podemos aceitar valor como esse. Para isso, Quais foram os passos? O passo 1 foi? Aqui, você simplesmente vai para a terceira posição que é o contexto mais rápido. segundo é o nome da tela. Esse é o ID do ponto de contato. Vou entrar em contato, mas gostaria de ir para a segunda tela, então vou fechar a segunda tela. Aqui podemos fazer a tela. Se você vir o vermelho é esse parâmetro de argumento chamado argumentos. E aqui você pode simplesmente escrever o nome como chave e valor. Como você pode ver, Mark Zuckerberg. E eu só estou dizendo aqui, suponha que estou enviando dois valores, fundador, Facebook, ok? Então, agora estamos enviando o valor deles, mas definitivamente nesta segunda tela, devemos aceitá-lo. Recupere-o. E para recuperar os dados. Este é o código que você precisa lembrar que é a rota modelada. Muito contexto, configurações de pontos, argumentos de ponto também. Então lembre-se disso. Antes de tudo, vou verificar se é nulo. Ou seja, se o valor for dado ou não. Pescoço, isso não é igual a nulo. E aqui, isso mostrará um pouco de vermelho, rosa porque não pode ser acessado incondicionalmente. Porque, obviamente, isso também pode ser nulo. Então, ou temos que usar o operador assim, que significa que ele feriu. Sabemos r, podemos VR, permitindo que ele verifique. Este conceito foi adicionado recentemente na não segurança. Então, em primeiro lugar, estamos verificando se não é nulo, então sim, exceto armazená-lo em uma variável. mesma coisa. Copie e cole. E assim como o mapa. Então você tem que escrever o mapa em ordem como mapa porque, de outra forma , ele será um objeto. Ele vem como um objeto, que estamos dizendo Não, é um mapa aqui. E então simplesmente escreva argumentos. A primeira chave era o nome e, em seguida, imprima argumentos. E a segunda chave foi o fundador. Vamos verificar novamente. Agora, a partir do nome da primeira tela e financiador, podemos imprimi-lo? Assim que vamos para a segunda tela? Vá para a segunda tela e veja Mark Zuckerberg e Facebook. Portanto, este é o V de passar dados para o nome drop. Nós aprendemos anteriormente como passar dados para um normal, que é uma maneira normal de navegação construída. E a segunda maneira é usar uma rota de nome. Aqui temos que nos certificar de que nos lembramos dos contextos de ponto fora da rota do modelo. Esta é uma maneira de extrair os valores de vinil navegando. Então, a última coisa de passar o valor é que também podemos retornar um valor ao voltar. Então, da primeira para a segunda tela, aprenderemos como passar dados. Mas pode haver alguns cenários em que, da segunda tela, você deve obter algum tipo de conformação. Algum tipo de sucesso, pode vender status e que resultará nessa mudança na primeira tela. Para isso, precisamos modificar a função post na primeira tela para garantir que ela aguarde o valor usando await e passe o valor na função pop desta segunda tela. O que quero dizer com isso é, na primeira tela, suponha que, ao empurrar, agora eu não estou enviando nenhum dado. Temos que esperar. Então eu, o status boo é igual a aguardar. Este conceito assíncrono e aguardado definitivamente aprenderemos na próxima sessão. Agora mesmo. Você só se lembra aqui, estamos aguardando esse valor, por essa função, para que essa ação seja concluída. E, em seguida, no lead, o valor será armazenado nesse estado é booleano. E aqui vou apenas dizer status de impressão. E agora, assim, a partir da segunda tela. Enquanto voltamos, valorizamos. Aqui, vou simplesmente escrever um contexto Bob ponto. E então aqui acabamos de cortar meu relato verdadeiro. É isso. Tão simples que sair da tela, temos que enviar esse valor verdadeiro. Agora, quando vou para a segunda tela e quando clico, volte com o valor c, true. Então isso é impresso desde a primeira semana porque precisamos aguardar. Estava esperando até voltarmos da segunda tela para a tela. E depois disso, somente esse código foi executado como assíncrono e aguardar são um conceito muito importante. É chamado de programação assíncrona. E, definitivamente, na sessão posterior estaremos indo muito fundo nisso porque sem esse conceito, você não será capaz de criar nenhum aplicativo completo. Para que a parte de navegação esteja concluída. Espero que você tenha se divertido e tenha todas as suas dúvidas claras. Por favor, tente criar mais e mais telas e pratique-a, porque definitivamente você precisa se lembrar disso de cor. Obrigado. Vejo você na próxima sessão. 24. Widget de navegação em gaveta: Nesta sessão, falaremos sobre o widget de arrasto, que você também pode dizer que ele envia a barra de navegação lateral. Então, se você usa qualquer aplicativo como a Amazon, acho que a maioria do aplicativo tem essas três linhas ou no ícone de hambúrguer na parte superior. Quando clicamos nele, a barra lateral vem com muitas opções para navegar. Então, definitivamente, na Flórida, é uma maneira muito fácil de implementar isso. Em aplicativos que usam design de material, existem duas opções principais para navegação. Primeiro são os toques. Ou seja, se você tiver, se você vir o exemplo do que CEP, as guias na parte superior, os chats chamam essas etapas. E a outra opção são gavetas. Quando há espaço insuficiente para suportar torneiras, para fornecer uma alternativa útil, podemos usar uma gaveta somente dentro de um widget de andaime. Então você tem que se lembrar disso. Vamos experimentá-lo. Vamos para a primeira tela. Andaime Indus. Temos essa gaveta. Certo. Esta é uma sintaxe de escrevê-lo em nosso widget. Vamos verificar se algo acontece na primeira tela. Veja este ícone de hambúrguer chegou. Essas três linhas. Quando clico nele, temos isso, essas navegações laterais aparecem. Mas como não temos nada dentro dele, está vazio. Mas espero que você tenha entendido que nós apenas um código, conseguimos mostrá-lo na interface do usuário. Agora, por dentro, aceita uma criança. Eu posso definitivamente, haverá muitos outros laticínios, haverá muitas operações de navegação shuns. Então, lá, seremos usados suponha que não coluna a ListView. E vou te mostrar por que não escolhemos a coluna também. Mas agora, lembre-se, exceto por dentro que só tem uma exibição de lista. E dentro do ListView, V pode ter opções diferentes e diferentes. Primeiro, vou mostrar o estilo de lista com uma opção de navegação. Naquele Titan. Terei texto da segunda tela. E no toque, não farei nada por enquanto, mas vou apenas salvar e mostrar que você vê nossa primeira opção de navegação que é ir para a segunda tela que você pode ver são apenas o exemplo Home Contacte-nos Sobre nós categorias, o que você quiser, cabe a você. Então, se você tiver se lembra, nosso cabeçalho também, se você se lembra do laboratório do Gmail, no cabeçalho há alguns detalhes de contas como um lucro de nome de usuário para aumentar. Você pode ter isso usando conta de usuário, conta usuário, desenhar nosso cabeçalho. Então simplesmente mencionei essas coisas. O nome da conta deve ser Elon Musk, conta, e-mail pode ser Tesla e que é.com. É muito raro que você nunca use a semelhança de uma conta do Gmail. O terceiro, podemos ter. Então, foto da conta corrente, usarei um avatar circular. E dentro disso você pode ter uma imagem de rede, mas vou usar apenas um ícone. Vamos ver qual é a saída. Mas se você tiver um aplicativo do Gmail com você agora, basta anexar o Gmail e mostrar. Veja essa navegação lateral disso como fin. Você pode comparar e ver. Temos essa imagem de perfil, nome usuário e e-mail de usuário com esse belo fundo também. Você também pode mudar outras coisas. Mas agora, é melhor mantê-lo simples. Porque o flutter é muito vasto e haverá muitos argumentos de propriedades para dar. Se você quiser ver, vou aqui e direi Cor da seta, margem de tecla nos detalhes pressionados. Essas são outras opções nele. IA líder me dará um ícone para olhar. Agora está parecendo assim. Suponha que este seja o lar. Vou copiar e dar outro baralho como simplesmente escrever. Veja. Então, com essa navegação lateral, está parecendo muito bom. Vou pular outras homepages. Bem, em casa e apenas escreva quem aqui. Você pode ver essa gaveta. Agora está parecendo muito profissional, principalmente por causa desse cabeçalho. Ainda está incrível. E como eu disse, há algo chamado cabeçalho da gaveta também, que você pode experimentá-lo sozinho, se quiser. E agora suponha que isso não seja ListView, mas a coluna, digamos que algo mude. Diga não, nada mudou. Mas lembre-se, se você tiver muitos dados que ainda estão aqui e não serão roláveis se você estiver usando uma coluna. Então, liste nós o usamos quando você tem muitas outras opções também. coluna funciona bem. Também. Agora vamos navegar. Para a tela inicial. Eu me relaciono, navego, empurro. Dan na rota. Teremos um construtor de páginas. Contexto. O nome é tela inicial. Certo. Vamos verificar. Navegamos até a tela inicial? Veja, estamos na tela inicial. Agora. Você tem que prestar atenção e entender o que acontece quando clicamos no botão Voltar. Quando clicamos no botão Voltar, esse desenho ainda está aberto, mas não parece bom. Ele deve ser fechado assim. Longe isso antes de empurrar , tem que estourar. Temos que escrever, navegar para cima pop para fechar a gaveta e depois passar para a segunda tela. Inicie seu aplicativo. Agora, quando vou para a casa, navegamos para esta tela inicial, mas não neste momento se eu clicar no botão Voltar, ele vem corretamente para a tela inicial e não que o desenho anexar porque já fechamos com o navegador dot pop. Então, essa coisa que você precisa lembrar porque quando temos um aplicativo completo, você não quer nada que não seja colocado no usuário. usuário fica irritado ou qualquer coisa assim, temos que evitá-lo. Portanto, certifique-se de tomar nota dessas coisas porque definitivamente expor mais tarde depois de um mês, você pode esquecê-lo. É isso. Isso é tudo muito abaixo e desenhe uma porção. No próximo vídeo, falaremos sobre a navegação inferior. Obrigado. 25. Barra de navegação inferior: Hoje vamos falar sobre a barra de navegação inferior. Deixo isso se tivermos discutido o que é uma gaveta e como implementá-lo. Portanto, essa é outra navegação com muita frequência. E esse widget é usado na maior parte do aplicativo. Porque imagine que esta é a tela e nesta área que não é um lado inferior, existem algumas opções que são blocos, ou seja, contato doméstico ou chats ou o que quer que seja. Se clicarmos nele, o limpo será alterado. Portanto, este é um widget muito legal, que foi dado pela estrutura da Flórida. E podemos adicionar isso facilmente ao andaime. Como naquela gaveta também. Existe um parâmetro no andaime. Então, vamos experimentá-lo por conta própria. E se você vir sintaxe desse andaime, existe essa barra de navegação inferior, que aceita uma barra de navegação inferior, rígida, que tem um par. O primeiro parâmetro é o índice atual. Ou seja, qual tela é VR naquele momento. E o segundo são itens. Quais são esses itens, ou seja, o ícone ou pode salvar o que nós, o que estamos prestes a navegar. Ou seja, chats domésticos são o que queremos mencionar na interface do usuário? E o terceiro está na torneira. Isso é o que deve acontecer se alguém tocar nessa opção de navegação. Normalmente, temos que mudar essa tela. E aqui na seção de notas você pode ver que deve haver mais de um item da barra de navegação inferior para fazê-lo funcionar. Obviamente, se os outros vários itens só pecam a navegação. Para uma opção, por que alguém usa uma barra de navegação inferior? Não adianta. Então aqui na imagem você pode ver o que estou falando. É isso que estamos prestes a construir. Traga seu VS Code. E agora, Ok, nós não fizemos. Esse é o erro por causa da coisa booleana. Nada muito. Desde que você já mencionou que precisamos de algum tipo de valor booleano lá. Comentário, brindando. E, assim, o andaime usará a barra de navegação inferior. E o nome de um widget é a navegação inferior, mas agora ele tem itens. Índice atual por enquanto, diremos apenas 0 itens. Terei barra de negação. Não sei como dar nenhum ícone. Eu deveria estar. Usaremos rotulados porque o ideal está sendo depreciado e o rótulo aceita string. Direto para casa. Da mesma forma, dias e cole-o duas vezes, digamos que pode e acabará por aqui. E quando suponha que você possa dar pesadelo, eu vou mantê-lo simples. E vamos apenas dizer, ok. E o próximo é sobre isso. O que dá, que é uma função que nos dá um índice. Vou simplesmente imprimir o índice por enquanto e vamos ver o que foi feito. Consulte os usos do contato residencial. Está tão bom. Quando clico em Contato, o índice é 1. Quando clico em Usuários, o índice é dois. Quando clico em OK. Whoa, o índice é 0. Então é disso que estou falando. Com esse índice. Agora faremos as alterações para que sempre que alguém clicar em contato, ele deve ir para a página de contato. Ou você pode dizer aqui que a página de contato será construída. Não, não estamos navegando diretamente, mas aqui apenas nesta tela, apenas as páginas da Alda veremos. Agora, o que temos que fazer. Temos segundo baço. Temos uma tela cheia. Sua tela. Você simplesmente vai para a tela e, no topo, menos tem um número inteiro que é 0. O segundo deve ser uma lista de páginas. Aqui. O que não deveria acontecer? Devemos escrever todas as páginas que precisamos. Portanto, primeiro deve supor que o conjunto de tela seja contato. E terceiro é este que é meu estado em tela cheia. Meu estado em tela cheia. Certo. Temos todas as páginas aqui. Agora simplesmente acabe com o corpo. Aqui no corpo. Eu removerei tudo e escreverei páginas. Então o índice está no início, ainda está. Mas quando alguém clica em qualquer coisa, isso deve mudar. Isso é estado, o estado deve mudar. E para isso temos que torná-lo uma visão completa do estado. Agora é um widget com estado. Quando alguém toca nessa navegação em particular, disse um estado do índice 2, esse índice que estamos recebendo o d 0, 1, 2, 3. Então você pode estar pensando, por quê? Qual é a necessidade? Vou explicar você de novo. Temos uma lista de páginas, uma posição na educação em casa, depois contextos de uma posição limpa e posicionar minha tela com estado. E temos uma variável chamada index, que começa inicializada com 0. Portanto, no início, sempre a tela inicial será mostrada quando alguém iniciar nosso aplicativo. Porque nesse corpo, temos essas páginas e o índice é 0. Agora, sempre que alguém clica, isso é ao toque em qualquer um desses itens da barra de navegação inferior. Seja um contato fraco ou o que quer que seja, o índice será tomado que é um. E essa tela será mostrada. Traga o emulador e veja que temos esse contato. Temos essa casa e temos esses usuários. Então, que educação em casa em vez disso? Estas são as casas em Sibelius. Altere a tela e a tela assim. Agora, a tela inicial está corretamente. E os usuários, temos toda a lista. Agora eu não quero 2 desta parte do aplicativo. Então, o que posso fazer, posso remover a barra AB da tela, que é a primeira tela. Vamos trazer nosso aplicativo novamente. Diga que está parecendo muito melhor. Agora, quando eu mudo no bar é trocado. Mas, ele, está parecendo muito bonito. Além disso, você pode estar pensando por que essa cor não está mudando, porque não mencionamos esse índice aqui. Acabamos de ler 0. Mas aqui temos que escrever esse índice de variável. E, em seguida, tente novamente. Agora, essa coisa azul, cor azul será mostrada no que clicarmos, veja agora o contato é azul. Agora, quando clicamos nos usuários, isso é destacado. Está parecendo muito bom. Agora temos uma interface muito básica, pelo menos. Aprendemos como esse desenho funciona, como funciona a navegação inferior, como navegar de uma tela para outra. Então, neste módulo, aprendemos muito. No próximo módulo, discutiremos mais conceitos do Flutter Framework. Até lá, apenas pratique e certifique-se de entender todo o código pelo seu coração. Obrigado. 26. Mergulhe fundo no Widget de TextField: Neste módulo, falaremos sobre o TextFile virgem. V estará se aprofundando neste widget porque é o único widget que seremos usados intensamente para lidar com a entrada do usuário. Em qualquer aplicativo. Tem que fazer isso. Temos que tomar alguma entrada, seja o nome de usuário, senha, o que eles gostam, o que eles não gostam, seja qual for a idade. Portanto, o campo de texto é uma região muito importante. Então, o que é um campo de texto? Acho que já discutimos. Textos preenchidos na Flórida é o widget mais usado que permite aos usuários coletar informações do teclado em um aplicativo. Portanto, esse é um trecho de código que é a sintaxe de como mostrar o campo de texto. Tem algumas propriedades como sempre, decoração, borda e muito mais. Então, para começar. E o que eu gostaria de fazer é remover as telas anteriores porque não quero tantas telas no momento. Se você não quiser, você pode simplesmente deixá-los como está. Mas como é um novo módulo, eu simplesmente removeria tudo. Temos esse arquivo principal. Vou criar um novo arquivo fora da página, ponto, ponto. Como sempre. Vou criar essa data menos rígida da página inicial. E teremos essa tela inicial. Vamos começar com esse andaime. Use entrada. E na parte terá um assistente de coluna v cujo principal existe alinhamento celular. alinhamento estará no centro. E crianças. Agora, nessas crianças, terei esse campo de texto. com essa propriedade de declaração, podemos dar alguma decoração, como o que fazer, o que é esse TextFile. Com esse texto de nível. Você deve escrever o nome dele. E fronteira. Quero delinear a fronteira. Vamos recarregar nosso aplicativo e salvar a saída. Para verificar essa saída. É uma tela básica. Nós preenchemos o texto na parte inferior. Também. Eu gostaria de envolver esta coluna com um widget de preenchimento para que tenhamos algum espaçamento ao redor e pareça um pouco decente agora. Além disso, se você quiser, você pode ter enviado dois da APA. Certifique-se de se lembrar dessas propriedades praticando. É por isso que eu sugiro que você escreva telas todas as vezes sozinho, para que, no final do curso, você aprenda todo esse código. Então lembre-se de todos esses códigos de cor, e você não precisa verificar de novo e de novo. Então agora temos esses textos preenchidos em danos. Mas devemos saber como recuperar o valor desse texto. Agora, se eu escrever, então definitivamente deve haver algum código para recuperar o valor do campo de texto, que discutiremos no próximo vídeo. Obrigado. 27. Como adicionar um controlador de edição de TextEditing: Hoje vamos aprender como recuperar o valor de um campo de texto. Já temos esse textual. Mas pelo menos devemos saber como obter w, seja qual for o usuário digitar. Para isso, usaremos o método do controlador. Então, quais são as etapas? O primeiro passo é criar um controlador de edição de texto como este. Aqui você pode ver que temos um tipo de edição de texto que pode coletar. Em seguida, o controlador significa que é o nome da variável, que é igual ao controlador de edição de texto. Agora, anexe esse controlador de edição texto ao campo de texto. Nesse campo de texto, definitivamente a área é uma propriedade chamada controller, para a qual o valor deve ser o nome do controlador escuro. Agora, o terceiro é recuperar o valor do campo de texto usando esse método de texto de ponto fornecido pelo controlador de edição de texto. Então, aqui você pode ver que isso emitirá W, ou seja, quando escrevemos o nome do controlador de edição de texto, então ponto txt, ele emitirá o valor da string. Então, espero que você tenha entendido os passos de usar um quilômetro de comprimento por conta própria. Então aqui, em primeiro lugar, definirei esse controlador de edição de texto e nomeá-lo significa controlador, que será igual ao controlador de edição de texto. Certo? A primeira etapa está concluída, que é esse txt criado e controlador final. Em segundo lugar, naquele filme escuro de textos Controller 28. Temos esse campo de texto aqui. Vamos ver, ele tem uma propriedade chamada controller? Aqui? Este é o nome, controlador de nome de propriedade que aceita um valor de controlador de edição de texto. E nosso aprendizado é chamado de controlá-los. Certo? Agora, essa terceira etapa é o valor do campo de texto usando o ponto txt. Agora, longe, vamos primeiro abaixo do texto para quando devemos ter um elevado e deixar um botão de data. E nessa criança, vou simplesmente escrever impressão. E elevado. Eu imprimo. Qual é o nome do controlador? Controlador de nome e ponto txt. Certo. Vamos reiniciar no nome. Quero dizer, certo. Jeff Bezos. E basta clicar em Imprimir e ver no console de depuração, você pode colocar o que eu tenho no campo de texto. Também. Se você quiser mostrá-lo na tela. Dez simplesmente podemos tornar esta página inicial um widget com estado. E esse controlador de nome. Podemos tê-lo em algum lugar aqui. Acima desse texto simplesmente escreverá o nome controlador de texto de ponto estilo x e terá um tamanho de fonte do peso da fonte, fonte, peso, negrito e lays, ponto. O que é bom. E da mesma forma como o OK. E agora só temos esses testes. É isso. Vamos experimentá-lo. Funciona ou não? Agora, se eu escrever Elon Musk e clicar em Print C, poderemos exibir tudo o que escrevemos na interface do usuário desta vez, não no console de depuração porque estamos usando o estado definido. Só quero que você pratique isso de novo e de novo e entenda por causa dessa descrença estabelecida do estado e Chen foi novamente chamado. E agora esse texto tem esse valor de Elon Musk. Outra maneira é recuperar o valor é que podemos deixar uma variável chamada string, nome é igual a mt. Suponha. E neste campo de texto podemos simplesmente escrever sobre modificado. E aqui obtemos o valor. E esse valor, esse, qual é o nome? String é nome deve ser chamado tomado enquanto você, é isso. E podemos enviar testado também. Podemos apenas definir o estado disso. E aqui o texto deve ser simplesmente variável de nome. Essa é outra maneira de recuperar o valor do campo de texto na alteração. Mas na maioria das vezes, as pessoas usam o controlador de edição de texto em vez disso inalterado. Mas não é como se você não pudesse usar. Vou simplesmente escrever o nome como quem era. Há muito bom. Ninguém vem à minha mente que presente simplesmente Bill Gates. Mas veja, quando estou digitando, está atualizando a interface do usuário porque na cadeia é como sempre que clicamos em um teclado, um alfabeto ou sempre que for alterado, toda a tela será reconstruída. É isso. Portanto, essas são as duas formas de recuperar valor. Na maioria das vezes, o controlador de edição de texto ficará inalterado e obterá nossos outros sensores de opção, como no país de edição, completos no envio. Essas também são outras maneiras de obter W. Se você quiser ler mais, você também pode pesquisar. Mas eu ensinei a você mais, o máximo, usar a maioria dos aplicativos ou a maneira mais de recuperar o valor do campo de texto. Obrigado. 28. Validando a entrada do usuário: Nesta sessão, falaremos sobre como validar a entrada de um usuário. Mas antes disso, você deve entender um novo widget chamado widget de formulário. Envolver um formulário virgem em seu aplicativo simplesmente facilita a validação de uma redefinição e salvar vários campos de entrada de uma só vez. E lembre-se, usamos o campo do formulário de texto do widget dentro do formulário em vez de apenas textos realmente. Então, estamos aqui, estamos usando o texto. Mas já que usaremos o formulário totalmente a partir de agora. Então, temos que usar esse formulário de texto preenchido com ele. Então, o que temos que fazer, simplesmente em primeiro lugar, gostaria de remover esse nome e OnChange. Então, para que o widget do formulário funcione basta envolver esta coluna com o orçamento. Certo? Esta parte está feita agora. E esse campo de texto deve ler o formulário de texto preenchido. Isso também é feito. Agora, a próxima parte é a validação de formulários. Então, se você está construindo um aplicativo, se você estiver recebendo alguma entrada do usuário, é muito necessário que você valide a entrada? Porque suponha que você tenha uma senha que deve mínimo oito caracteres e o usuário digitar apenas quatro caracteres, então não devemos permitir que ele um número de telefone deve ter no mínimo 10 dígitos. Ele não pode apenas selecionar nove dígitos e ir e dar um número falso ao nosso aplicativo. Então, para garantir que esses adders nunca aconteceram conosco, teremos regras de validação de formulários muito fortes. Então, para validar uma fazenda em flutter, precisamos implementar principalmente três etapas. O primeiro passo é usado um widget de formulário. Tomamos a chave global. Então, o que é essa chave global? Basta lembrar que é um tipo de estado que vamos combinar ou você pode dizer que nós, que daremos à fazenda para que saibamos mais tarde qual é o status da empresa é que as validações estão funcionando corretamente ou não para isso. Portanto, é apenas uma sintaxe que temos que lembrar. Não é pensar muito complicado. Vou dar a ela o nome da variável da chave estrangeira e defini-la para azul volumoso. E então aqui, estado do formulário. Essa é a sintaxe de atribuir uma chave de estado global e simplesmente copiá-la. E no campo da fazenda, você terá essa propriedade chamada key e cola-a aqui. Dessa forma, você pode garantir que Lou volumoso e seu telefone estejam conectados. Agora, o primeiro passo está pronto. Em segundo lugar, use textos de falha ao fornecer a entrada preenchida com a propriedade validator. Portanto, há essa propriedade de mililitro que temos que usar. Certo, faremos isso. E a etapa três é criada por 10 para validar o campo do farm e exibir o erro de validação. Ok, primeiro faremos a etapa 2, que é atribuída a regras de validade para o formulário de texto. Por enquanto, temos que usar a função validador nesse texto preenchido para validar as propriedades de entrada que o usuário fornece a entrada errada. A função validadora retorna uma string que contém uma mensagem de erro. Caso contrário, a validade da função retorna nula. Vamos para o campo do formulário de texto. Aqui. Eu simplesmente terei essa propriedade validadora, que é um bom valor Shen Dao, o que quer que esteja sendo digitado. Aqui, vou simplesmente verificar se a fila está vazia. Ou você pode dizer se o valor é igual a. Agora assim. Agora você pode ver a string vazia assim. Então eu ganho. O campo turno é obrigatório, caso contrário, retorna nulo. Então, tudo bem, e então a próxima etapa da lei do toque era criar o botão que já fizemos , que o valida. Formulário preenchido. Então aqui, este é o código que você se lembra, mas agora é hora de usar a chave estrangeira. Vou simplesmente escrever qi dot state dot validate. validação de ponto de data atual é igual a verdadeira. Você pode dizer: Sim, vou simplesmente escrever, imprimir. Envie 10 sexos para Li k morreu. Primeiro, Stefan. E também vou enviar não imprimir. Parece profissional. Dentro de string vazia. Se eu clicar em Enviar, consulte Phil é obrigatório. Então essa é a validação que eu estava falando. Isso é muito importante porque, definitivamente, quando você tem um formulário de login ou inscrição, você tem que mostrar ao usuário essas mensagens de erro como um feedback porque o usuário não quer ficar na tela dele e não faça nada. E se eu, se eu escrever flertado e depois imprimir Enviar, então você pode ver empresas que fizemos com sucesso. Então, sim, é assim que você valida o campo do formulário. Você também pode ter vários campos de formulário. Vou mostrar mais um preenchimento de formulários. Basta simplesmente escrever nome, senha e senha ou é adquirido o pedido? Não, eu só daria um comprimento. Tamanho do ponto de valor menor que três. Se o tamanho do ponto do valor for menor que 3 e obtivermos a senha deve ser superior a três. Diretores. Agora eu tenho um novo formulário x livre, mas essa chave estrangeira, essa fonte é suficiente para validar ambos esse campo de texto e também para o segundo campo de texto, devemos criar outro controlador de edição de texto, que será nomeado controlador de senha. Vou simplesmente copiar e colar aqui. Agora, se eu escrever o nome flertado, mas a senha só dou 12 caracteres, então veja a senha deve ter mais de três caracteres. Agora, se eu tiver quatro caracteres e clicar em enviar, formulário enviado com sucesso. Mas é assim que você valida vários campos de uma só vez usando a chave de formulário. E isto é, isso não é, usamos esse widget para validar campos de formulário ou você pode dizer campos de texto. Agora, outro conceito que você deve conhecer RE, que pode ser útil para você é salvar uma empresa. Ao criar um aplicativo, provavelmente queremos salvar os dados do formulário para fazer algo com isso. Neste conjunto, criaremos apenas algumas regras de salvamento para outros campos. E então, quando chamarmos o Ancef de meu pai, ele executará essas três regras. O que quero dizer com isso é nesse campo de texto, além do validador, temos mortos próprios em salvos. E eu simplesmente imprimirei aqui. Vou simplesmente imprimir um nome. O campo é salvo. E em sua validade, isso é isolado em salvos e impressos. campo Senha é salvo. E para garantir que este código ou essa função seja executado, simplesmente escrevemos chave estrangeira, ponto de estado atual ponto salvo. É isso. Então você pode precisar dele em algum lugar. Cabe a você. Mas pelo menos você deve saber que esses conceitos também estão lá. Quando entramos no aplicativo e na cor cinza, vou 2345. E clique em Enviar. Veja nymphal a mesma senha para listas salvas e, em seguida, formulários enviados com sucesso. Então aqui acabamos de imprimir o início de valorização, mas ele pode ser usado para atribuir ao valor duas variáveis, r e fazer alguma rede chamando o que eles eram SET, faz estado ou o que você quiser, depende de você. Mas todas as propriedades ou todos os métodos estão sendo usados para algum propósito específico. E agora cabe a um desenvolvedor o que ele quer e o que ele não quer. Mas espero que você tenha entendido como validar um campo de formulário e garantir que o usuário não insira o que quiser. Na próxima sessão, falaremos mais sobre esse campo de texto e suas propriedades. Mas até lá, espero que você esteja gostando. 29. Decoração e outras propriedades: Então, até agora, aprendemos a usar recursos do campo de texto, como validar, como salvar e o que quer que seja. Mas agora vamos fazer com que pareça bem também. Então, para decorar, os textos reutilizarão a propriedade de declaração, que leva uma decoração de entrada como seu valor. Vamos experimentá-lo. Então, temos esse campo de texto fora do nome. Aqui. Já temos esta propriedade de declaração que está aceitando decoração de entrada seu valor. Então, agora primeiro é o texto rotulado, que usamos para fornecer informações ao usuário. Agora vou ter que remover isso. E o segundo é o texto da dica. Por isso, diz uma solução. Então, vou escrever o seu nome. Certo, vamos ver. Você pode ver primeiro é usar as propriedades de dica e nível para fornecer informações ao usuário. Agora, quando clico no nome, você pode ver que há essa coisa adicional. Isso mesmo, seu nome completo. Então, e quando escrevemos algo, ele é removido. E quando está vazio, ele é mostrado novamente. Segundo é que você pode adicionar ícones usando prefixo eu posso, posso adicionar sufixo, posso adicionar propriedades da decoração de entrada. O que quero dizer com isso está dentro da declaração de entrada, primeiro, vou mostrar a vocês. Eu posso. Eu posso, posso começar. Agora. Certo. Confira. Veja, você tem esse ícone aqui. Agora, quando eu digo prefixo uma lata, é a mesma coisa em Linden Lu é limitada, é estendida. Ele vem dentro da fronteira. Quando estamos escrevendo prefixo e sufixo, eu posso. Temos esse ícone no lado direito. Então, só essa é a diferença. Nada muito. Mas há finitamente, esse ícone lhe dá muita eficiência e aparência, eu gosto desse prefixo, então vou deixá-lo com esse prefixo que posso. Certo. O próximo. Você também pode dar pó para adição produtiva, remover sobre ele com um campo de texto. Então, neste momento, se não estivermos escrevendo ou recebemos qualquer propriedade bonita, então abaixo estão os baixos trocados já são dias por padrão, você também pode removê-lo. Para remover isso, basta escrever entrada, hambúrguer e salvar. E veja que a borda abaixo está. Mas se você é como eu, eu gosto de toda a fronteira. Portanto, nosso parâmetro de entrada de plano é o valor que temos que atribuí-lo para que ele tenha uma borda de todos os lados dele. E parece muito bom. E também, eu gostaria de dar algum espaçamento entre textos, preencher o formulário de texto adequado para que eu serei chamado psi squawks. É só presentes e, uh, dê-lhe uma altura de 20. Para que haja esse espaçamento entre os dois textos, campos de fazenda. Agora, a terceira declaração que podemos usar é usar textos auxiliares. Se você não quiser um rótulo, mas quiser uma mensagem persistente para o usuário. O que quero dizer com isso está no formulário de texto de senha preenchido, eu simplesmente terei o texto auxiliar e a senha devem ser. Chefe, maior que três. Certo. Certo. Você viu textos rotulados, você viu textos para ele. Agora, vamos ver quais são os textos auxiliares. E veja aqui, está sempre lá. Se eu clicar na senha, ela também mostrará aqui que não será removida. Portanto, é bom garantir que o usuário não faça nenhum erro porque ele pode não saber que seu aplicativo, exceto senha legalmente, em seguida três caracteres nesse caso mantidos. A propriedade de texto é muito útil. Agora. E a seguir, você também pode alterar as propriedades do teclado para TextField. Ou seja, os tipos são textos de entrada, tipo de entrada, texto, ou seja, teclado normal, então tipo de entrada de texto número de ponto, endereço de e-mail numérico, teclado normal, nós, nós tendemos ao sinal de taxa, data, hora e, em seguida, várias linhas. Então, o exemplo disso é que terei um nome, suponha que o nome. E lembre-se que esse tipo de teclado é propriedades fora da declaração de entrada aqui. E há um tipo de teclado, texto, número de ponto do tipo de entrada, e é isso. E vou dizer, e quando clico em Nome agora, veja este teclado numérico aparecer. Portanto, isso é usado quando você está pedindo idade ou pode salvar principalmente o número de telefone. Para isso, você precisa usar essa técnica de teclado. Agora, qual é o significado desse texto obscurecedor para ocultar texto se TextField configurar a propriedade de texto saia como true, nós a usamos principalmente em um campo de senha. Então, definitivamente, você sabe, quando o usuário está e durante sua senha, não queremos que ela esteja nos alfabetos normais. Queremos escondê-lo. Para isso, basta ir para o campo do formulário de texto fora da declaração de entrada, certo? Textos obscurecidos e acabei de desenhar. E salve-o. Agora, quando você entra no ônibus cheio de fluido e digite f, l, você o PS. Assim, você pode ver que a senha está oculta, apenas pontilha e não o alfabeto apropriado. Portanto, é uma prática recomendada porque o usuário também preenche que você é, que esse aplicativo é seguro de usar. Agora, a próxima propriedade ou o próximo campo de texto de recurso é controlar o máximo de caracteres, Codex Wilkin os controla, os números de caracteres do Mac, um termo dentro dela. Então, se você sabe intuitivamente em algum comprimento, essa é a nossa limitação? Da mesma forma? Podemos ter essa limitação. Suponha que no campo nome, possamos simplesmente escrever o comprimento máximo de 15 que, digamos, mais do que isso. nome da pessoa muito claro estará lá. Então, vou dizer aqui que é alfabeto numérico. Mas desde que você comeu 15, se eu tentar atravessá-lo Não. Agora, mais do que isso, não posso digitar. Então, espero que você tenha entendido as propriedades ou a declaração desse campo de texto. A mesma declaração pode ser usada no campo de formulário de texto quando estamos usando um widget de formulário também. Então, eu escrevi que você quer aprender sobre como trabalhar com arquivos de texto. No próximo vídeo, vamos aprender sobre alguns novos widgets, como alerta, caixa de diálogo e lanchonetes. Então, até lá, continue praticando. 30. Widget de Dialogs: Nesta sessão, falaremos sobre a nova versão chamada caixa de diálogo de alerta. Portanto, uma caixa de diálogo de alerta é um recurso útil que define o usuário com informações importantes para tomar uma decisão de fornecer a capacidade de escolher uma ação específica. Então, em palavras simples, se você quiser dar algo como um alerta pop-up, o usuário tem que selecionar sim ou não estão em conformidade com esses 10, podemos usar uma caixa de diálogo de alerta. Quais são as principais propriedades da caixa? Essas são ações. Esse é o conjunto de ações que são exibidas na parte inferior da caixa de diálogo. Normalmente, os botões, que eu já esboçei é Canson são, eu concordo Esse tipo de botões, então aperte que adorei que diálogo é exibida em uma fonte grande e a parte superior do diálogo em palavras simples, suponha, você tem certeza ou um aviso é importante? Esse tipo de palavras-chave, depois conteúdo. Isso fornece uma descrição da mensagem sobre o título que você fornecerá. Então, pode ser simplesmente como, você tem certeza de que deseja desativar sua conta e, a partir das ações, você pode ter um palpite, IM ou não, isso é apenas um cenário que estou dizendo. Em seguida, simplesmente cor de fundo ou alívio. Portanto, para mostrar um alerta, você deve chamar a função show dialog, que contém o contexto e a função de construtor de itens. Então aqui você pode ver que a sintaxe mostra diálogo, depois contextos, contextos reais de aceitação e sua conta. Existe uma função que retorna uma caixa de diálogo de alerta. Então, vamos experimentá-lo por conta própria. No último vídeo, fizemos até aqui. Agora, a validação do fornecedor é verdadeira e o formulário é salvo. Em seguida, podemos mostrar um diálogo como mostrar diálogo. E então, nesse contexto, será contexto. Mas o construtor, querido Will nós funcionamos, que retorna um diálogo de alerta. Certo? Portanto, na caixa de diálogo de alerta, essa propriedade title usarei como 10 Q. Suponha. Então, nesse conteúdo, escreverei esse texto do enviado com sucesso. Enviado com sucesso. Então, nessas ações, isto é, água, os botões que eu gostaria de fornecer são algum tipo de ação que um usuário tomará dessa caixa de diálogo de alerta. Vou ter, desculpe, não texto. Eu teria um botão elevado que escreverá texto. E simplesmente K. E depois de quando eles usarem, clique nisso, ok, eu quero que esse diálogo desapareça, isso apareça. Normalmente, o que você pode fazer é algo como feito. Então você também pode navegar para tela diferente. Ou se você tiver um botão cancelar, então esta função pop de ponto do navegador que você deve usar para que o usuário novamente, isso remova essa caixa de diálogo da tela e volte novamente para a tela anterior. Vamos ver o nome. Vou escrever flirt e senha 123456. Em seguida, envie e veja isso. Eu estava falando sobre esse tipo de pop up com esse título. Você tem 10 Q e define o conteúdo aqui. E quando clico neste botão OK, veja que a caixa de diálogo ou a caixa de alerta desaparece. E também além das ações, essas são as propriedades que ele aceita. Há alívio, sua cor de fundo. Se você escrever cores de fundo, acento e, em seguida, preencher esse conteúdo. E veja que você pode dar empilhamento intitulado adicionando uma coruja nessa forma, você pode ter uma borda retangular arredondada ou qualquer coisa assim. Assim, você pode ter borda redonda e depois do Googler, raio de borda. refrigerador de configuração de raio de borda receberá 10. Vamos ver novamente o que essa cor e forma de fundo fazem com nossa caixa de diálogo de alerta. Sabendo então o nome, vou deixar tremular novamente, senha 123456. Agora, quando clico em Enviar, veja que a cor é vermelha e as bordas estão muito boas aqui porque está cercada. Então você pode dizer que pode ser um alerta de que algo deu errado ou algo assim. Cabe a você. E se você clicar em qualquer lugar fora também, também a caixa de diálogo de alerta desaparecerá. Portanto, nem sempre é necessário. Podemos, se quisermos, também podemos garantir que isso não aconteça. Mas acho que há uma propriedade diferente para isso. Se você quiser estudar mais sobre isso, você pode simplesmente explorar por conta própria. Mas um básico, agora aprendemos como usar um diálogo de alerta básico em nosso aplicativo de flutter. Então, na próxima sessão ou no próximo vídeo, também falaremos sobre um novo widget, que é a lanchonete. Obrigado. 31. Exibindo a barra de Snackbar: Na sessão anterior, falamos sobre diálogo. Então, nesta sessão, falaremos sobre um novo widget chamado widget de lanchonete. widget Snack Bar é usado para exibir uma mensagem curta. Geralmente é exibido na parte inferior da tela. E também a maldita mensagem é exibida por um curto período de tempo. E o tempo específico do fornecedor a e do fornecedor é concluído, ele desaparecerá da tela. Então, quando estamos usando a lanchonete, esse usuário não precisa fazer nenhuma ação sobre ela. Muito não interromper o aplicativo dele , mas quando estávamos usando diálogo de alerta, isso nos dá pop up hip. Então esse usuário, qualquer tela que ele ou ela estivesse trabalhando, ele estava usando, isso será interrompido. Mas lanche, mas é muito leve e ele só vem e vai. Ele, ele é enviado. Isso não torna a experiência inquieta, pronta, desagradável para o usuário. Portanto, essa é a sintaxe. É uma lanchonete básica e, em seguida, conteúdo. Aqui, o conteúdo aceita uma virgem como valor, que geralmente são textos visitados. Agora, como exibir uma lanchonete? Para exibir snack-bar v, tem que usar este código que é andaimes mensageiro ponto off contexto. E depois disso , podemos mostrar lanchonete. Vamos tentar. Agora. Antes de mais nada, comentaria esta caixa de diálogo. E aqui eu vou nos mostrar lanchonete com simplesmente andaime, mensageiro ponto off contexto ponto C. Aqui você tem show snack-bar. E dentro dele você só precisa escrever neg bar. E nesse conteúdo, você pode escrever formulário enviado com sucesso. Certo, vamos experimentá-lo. Traga seu emulador. Você nomeia a senha 123456. Agora, quando clico em Enviar, consulte o formulário enviado com sucesso e, após dois ou três segundos, ele desaparece. Portanto, é um feedback muito bom para o usuário. Se houver algum erro. Suponha que o campo de senha ou o usuário já exista. Portanto, esse tipo de mensagens de erro são mensagens de sucesso que podem ser exibidas usando a lanchonete. Agora também, além do conteúdo. Assim, o snack-bar também tem outras propriedades. Como ação. Ou seja, suponha que você também possa ter algo como descartar, cancelar, botão OK. mesmo que a caixa de diálogo de alerta. Em seguida, cor de fundo. Suponha que eu vou adicionar cores, ponto-ponto, ler, não ler, já que diz sucesso, então deixarei verde. Depois, há margem, forma de preenchimento, duração também. É se você quiser que a duração seja menor. Então aqui você pode ter segundos e eu simplesmente escreverei 1 segundo. Agora vamos tentar novamente. Flerte. Então 1, 2, 3, 4, 5, 6. E envie. E formulário C enviado com sucesso. E agora, desde que era um, em segundo lugar, ele desapareceu mais rápido em comparação com o anterior. Anteriormente, acho que era dois ou 3 segundos, um padrão. Agora cabe a você quantas durações você quer. Ou também se, suponha que se houver um editor, você pode ter a cor de fundo vermelha. Portanto, é um feedback muito bom para o usuário. Ele não está confuso por que ele não é capaz de fazer login ou algo assim. Então lembre-se desse pescoço, mas é muito importante para o widget. E eu acho que quando comparado a uma caixa de alerta, deixe o diálogo v estará usando lanchonete com mais frequência em nossa aplicação mais tarde . Então é isso. Para este módulo. Aprendemos como utilizar o texto visitará como recuperar seu valor, como validar e, em seguida, quais são as propriedades do campo de texto? E então Andy e nós aprendemos sobre esses dois novos widgets, que é a caixa de diálogo de alerta e aquela lanchonete. Então, no próximo módulo, começaremos um novo tópico. Tilden. Apenas continue praticando. 32. Entendendo futuros: Olá, bem-vindo ao novo módulo onde discutiremos sobre nós programação síncrona. Então, se você é novo nesse conceito, você pode estar pensando o que é síncrono? Se você ver de perto? Simplesmente de forma normal de escrever códigos, os códigos estão sendo executados linha a linha. Isso é de cima para baixo. E até que uma função conclua a execução. A próxima função tem que esperar. Então, ele aguardará até que essa linha de código seja executada e ela irá para a segunda linha. Mas na programação assíncrona, mencionamos as funções que podem levar tempo para serem executadas e aguardar a conclusão incorporada sem interromper a execução do próximo pedaço de código. Desta forma, a execução paralela do código é alcançada. Então, basta supor que você está carregando algum arquivo para o banco de dados, para o servidor. Então, até que o arquivo possa ser grande e pode levar algum tempo para ser executado. Então, em frascos que o phi está sendo carregado, você também pode servir navegar ou fazer outras coisas no aplicativo. Então você não precisa esperar até que ele complete 100%. Então este é um exemplo muito bom, os outros exemplos diferentes também. Então, quando faremos isso praticamente. Então, nesse momento, você está, suas dúvidas ou conceitos ficarão mais claros e você o entenderá corretamente. É isso. Então, quando falamos de programação assíncrona nesses dois termos que vêm à nossa mente, nossos futuros e fluxos. Então, esses são os dois tipos de nós programas síncronos. Você pode dizer. Vamos discutir isso um por 1. Primeiro, discutiremos o que é um futuro. Então, se você cadeira é simplesmente qual é o nome. Dívida é que os dados virão depois de algum momento no futuro. Imagine que solicitaremos alguns dados do banco de dados e o resultado será retornado após alguns segundos. Então, definitivamente, local. Inicie seu aplicativo do Instagram ou Facebook. Demora um ou dois segundos para atualizar seu feed. Então, tempo morto, você pode ser capaz de fazer alguma coisa, mas você pode não. Cabe a eles, mas esse é um exemplo de futuro. Ou seja, esses dados virão incorporados no futuro próximo. E é uma garantia de que algo virá do final. Ou é um dado ou é nulo. Se não houver dados, você só precisa se lembrar desse conceito. É isso. Então agora estamos entendidos quais são nossos futuros, é hora. Saberemos como definir o futuro. Se você, o Chad é definido exatamente como um funcionamento que, mas usamos o futuro como prefixo, prefixo. Você pode ver como esse tipo de retorno do tipo de dados. Se você quiser manter o tipo de retorno da função, então você pode escrever esse futuro e digite I que essa função está retornando algum tipo de string, booleano ou vazio. Ou seja, não está retornando nada, mas estará fazendo alguma coisa. Dito isso, agora, sabemos como, qual é o nosso futuro, como definir um recurso. Agora é hora. Também sabemos como usar o futuro em nosso programa. Existem duas maneiras de executar um futuro usando Dan catch e usando async await. Portanto, eventos futuros que geralmente solicitações de rede são operação de entrada-saída, ou seja, do seu próprio dispositivo. Ele salvará algo ou recuperará algo. Mas aqui vamos simular nossa solicitação falsa e de rede usando o futuro ponto atrasado, que nos ajudará a entender o conceito sem chamar uma API real neste momento. Porque no próximo módulo, estaremos trabalhando com dados reais, que se tornarão de uma API dedicada. Naquela época também, estaremos usando futuros. Mas com o propósito de entender o conceito, vamos apenas falsificar ou simular cenário de morte em nossa aplicação. Este ponto futuro atrasado leva dois argumentos dentro dele. Então, para executá-lo, temos que passar dois argumentos. Primeiro é a duração, que especificará quanto tempo levará para ser executado. E o segundo argumento é uma função que deve ser executada depois que a duração do tempo estiver concluída. Agora o suficiente com a porção da teoria, você pode estar pensando , ok, eu entendi algo, mas haverá muitas dúvidas. Para limpar essas coisas. Traga seu editor de texto. No arquivo de folha, criarei um novo arquivo de ponto ponto de tela futura. Aqui. Material de importação, como sempre, tenha uma visita com estado da tela futura. Em seguida, simplesmente andaime parte do aplicativo. Então eu vou dar futuro. Certo. Agora no corpo, serviço de liderança e televisão, depois criança com botão elevado. E nesse texto você pode simplesmente dizer, Clique aqui. É isso. Agora, vá para a média e torne essa tela futura sua tela padrão , arquivo principal padrão. Certo. Sim, temos esta página. Agora, o que faremos é criar uma função que será um futuro. Basta criar um vazio futuro. Ele não retornará nada por enquanto. Em seguida, dê a ele o nome de Obter dados e IA. Então o que podemos fazer é usar o ponto futuro atrasado importado. Consulte Método de atraso de pontos futuros para falsificar uma chamada de rede. Agora, ouça que os dados devem aparecer após três segundos. E o que deveria ter sido aqui? O que deve fazer? O que deve ser feito é que ele deve imprimir. É flutter. Desenvolvedor. Porque aqui o primeiro argumento era a duração e o segundo argumento ou como uma função que deve ser executada após esse ponto Futuro atrasar. dinamite é feita no segundo distrito. E a próxima linha de código que escreveremos aqui é uma linha aleatória de código. Imagine, lembre-se dessa coisa. E como é um futuro, deve ser síncrono. Temos que escrever uma pia lá. É, é uma coisa que você tem que lembrar o tempo todo que esse flutter deve saber que essa função é uma função assíncrona. É isso. Agora, copie isso, obtenha dados , pressione executá-lo. Agora. Agora basta salvar também se você quiser. Você pode ter, novamente, dois futuros apenas por uma questão de compreensão e dará um t segundo final abaixo de 12 segundos. Se você estiver recebendo inveja, basta pausar o vídeo e tentar entender esse código repetidas vezes. Oh, ok. Agora, se virmos nosso código de cima para baixo aqui, ID do usuário deve vir primeiro. Então isso, ei, é um desenvolvimento vibrante, que são os dados do usuário. E então essa linha aleatória de código é a última linha. Mas quando clicamos no botão, veja a primeira coisa que é executada ou impressa foi linha aleatória de código. Então isso, ei, é desenvolvedor inundado. E, por último, o ID do usuário. Então você pode ver esse futuro. O que é um futuro? Ou seja, levará algum tempo de folga dois ou três segundos. Mas depois disso, o valor, obteremos o valor ou o código será executado. Mas isso não pára. Então essa foi a coisa que não esperou por três segundos para executar. Ele simplesmente foi diretamente para imprimir uma linha aleatória de código. E acabou de executar essa linha de código. Então isso está nos executando de forma síncrona, mas há um problema. Ou seja, o nome de usuário deve ser buscado somente após o ID do usuário. Isso significa que devemos esperar que uma função seja executada. Imagine se este for o seu aplicativo do Instagram, quando o aplicativo estiver chamando o banco de dados para obter as informações do usuário, o ID do usuário. Depois disso, somente, a tela inicial deve aparecer com esses detalhes. Sem os detalhes, ele deve esperar e não, e não deve ir para a próxima linha. Para esse propósito. Usamos This Dan catch. Então, usar isso, pegar significa que, após essa duração, esses futuros são concluídos, então apenas a segunda linha de código é então apenas então apenas fazer a segunda coisa. Então, espere e tente entender. Dot Dan está ligado ao final da função. Então aqui, antes desse ponto e vírgula, vou clicar em ponto e ver há algumas coisas e usaremos ponto-ponto. Então, o que significa é primeiro que o futuro deve ser executado e levará três segundos. Após três segundos, quando este sprint estiver pronto. Então, no Likud para esta linha de código, é isso. E então pegue e ganhe. Se, ao executar essa função, se algo, algum erro ou algo deu errado, então eles devem, por enquanto, imprimir a impressão de pontos que foi adicionada. Mas geralmente damos um feedback ao usuário usando uma lanchonete ou alguma caixa de alerta. Então, se você se lembrar da saída anterior, era uma linha aleatória de código no início, depois odeia a Flórida e depois o ID do usuário. Mas agora queremos um ID de usuário. Esta linha aleatória de código será executada primeiro porque este é um futuro e levará algum tempo. Então, sim, não vai esperar e ir diretamente. Mas você pode ver nesta saída que o ID do usuário, temos o ID do usuário e, em seguida, apenas temos os detalhes dos usuários. Portanto, realizamos com sucesso, escrevemos uma função futura no teatro e também aprendemos a pesar ou como usar o erro de captura enquanto trabalhamos com futuros. Espero que você tenha entendido o conceito. Se você tiver algumas dúvidas, vou sugerir que você tenha paciência e Vig. Porque nos próximos dois ou três módulos, no final dos três modelos, definitivamente você terá todas as suas dúvidas claras porque este é apenas um exemplo muito fictício. Mas quando estamos construindo aplicação real, você vai murchar. Ok, por esse motivo, enquanto estamos, enquanto você está aprendendo que essas coisas são, este é o cenário de caso de uso para 10. Então é isso. Na próxima sessão, falaremos sobre isso. Estaremos falando sobre essa pia e aguardaremos. Porque usar a gaiola Dan e usar assíncrono e aguardar faz a mesma coisa, mas eles estão muito fora. Escrever código é diferente. É isso. Espero que você pratique e esteja praticando muito. Vejo você no próximo vídeo. 33. Conceito de espera de Async: Então, nesta sessão, falaremos sobre a palavra-chave async await enquanto usaremos um futuro. Naquela sessão anterior, aprendemos a usá-los erro de captura e definitivamente funciona bem. Mas há também uma sintaxe alternativa que muitos se esforçam para ser muito mais legíveis e também para evitar várias cadeias de gaiola de dengue, usamos uma palavra-chave de sincronização. Depois, o nome da nossa função e adicione a palavra-chave await antes de qualquer coisa que precise de algum tempo para executá-la. Por exemplo, nossa solicitação GET ou esse futuro atrasou. Agora, tudo depois disso aguardar será executado quando o valor for retornado. Então o que quero dizer com isso é que você pode ver a sintaxe. Temos esse nome futuro e futuro. Então esta função tem essa palavra-chave dela, o que simplesmente significa que essa variável de impressão só funcionará se esse futuro financeiro retornar esse valor ou então não. Então, vamos experimentá-lo. Primeiro, você quer, você pode fazer isso com o mesmo exemplo, se quisermos. Agora, eu tenho essa função fora das dez horas e vou removê-la. Agora. Suponha que essa função retorne um ID que é um e V tenha esse id armazenado em uma variável chamada ID do usuário. Mas agora, mas agora essa coisa é V1, esse ID de usuário, e traga-o aqui. Certo? Então, se fizermos isso agora, definitivamente, ele mostrará algum adicionado ou algo como nulo. Si, hay, sua futura instância de usuário um futuro que significa que o valor não foi armazenado nessa variável ID do usuário. Devemos esperar. E aqui vem o peso da palavra-chave, o que simplesmente significa essa função. Depois que esta função for executada, código líder irá para esta linha. Então agora o que você verá é quando eu clico neste botão, esse código aleatório de linha não é executado. Primeiro. Isso é executado. Então isso porque está em sincronia, não dissemos para esperar aqui. E agora isso tem esse valor de 1. Mas esse conceito é muito, muito, muito importante porque quando estamos construindo com o Firebase e bancos de dados, o futuro será usado o tempo todo que eu estiver. Então é por isso que você tem que entender isso. Esta função aguarda claramente a palavra-chave que eu direi. Agora você vai dizer não, eu quero esperar por isso também. E, finalmente, as aspas devem ser executadas. Então, basta escrever uma função de peso. Antes dessa função. E agora você verá a mudança de saída. Primeiro, ID do usuário, segundo, ei, é flutter. E, em seguida, linha aleatória de código. Porque temos nossa aplicação para Whittier. Até lá, não vá para a próxima linha. Portanto, é um conceito muito importante. Por favor, tente praticá-lo novamente em uma criança. Agora você pode estar perguntando o que acontecerá se houver algum tipo de erro. Para isso, usamos esse bloco try catch para detectar qualquer erro de rede. E para essas coisas aqui, é isso. E na captura, se você quiser, você pode apenas trazer direcionado. Porque antes tínhamos então e pegamos. Mas agora, quando estamos usando async await, devemos usar esse bloco try catch também. E o coletor não significa que apenas você tenha que criar esse tipo de função de TI separada. Agora, suponha que tenhamos essa impressão. Segunda função. Suponha. Agora, o que acontecerá? Quando clico aqui, veja a segunda função é executada primeiro. E então isso ganha a dúvida porque flutter sabe que é um futuro. Então, não esperou aqui e foi para essa linha de código. Nesse cenário. Novamente, se você disser não, quero que os dados sejam executados primeiro e, em seguida, na impressão labial, esta segunda linha de código de função. Então, novamente, você tem que usar uma pia aqui e um peso aqui. Agora confira sua saída. E conseguimos usar, é uma função também, e isso também era uma função. Então você precisa entender que só precisa de uma função para trabalharmos. Agora, esta linha é executada primeiro e veja, ela foi executada no último. Então, espero que você tenha entendido o conceito de assíncrono, aguardar e futuros profundamente. Como esse conceito é tão importante que duvidamos desse conceito, você não conseguiria trabalhar em nenhuma aplicação adicional. E não fique sobrecarregado com isso. Porque eu sei que é um conceito muito novo se você é novo nesta lata de programação. E se você não entendeu tudo, está tudo bem. Porque, como iniciante, entendo que você terá alguma dúvida. Você terá que praticar muito, mas eventualmente você conseguirá. É isso por hoje. Espero que você esteja curtindo nossas sessões fotográficas. E também quando você não está assistindo nossos vídeos, só estou confiando em você que você está praticando sozinho. E Q. 34. O que são Streams: Oi. Nesta sessão, falaremos sobre fluxos. Anteriormente, discutimos o que é um futuro, mas agora é hora do nó V, o segundo tipo de programação síncrona que esses fluxos. Então, quando estamos usando fluxos, temos muitos valores sendo buscados e honestamente, e em vez de anexar uma conexão uma vez, como no futuro, podemos fazê-lo ficar aberto e pronto para novos dados para entrar. Simplesmente, qualquer alteração ocorre ou qualquer novo dado é inserido, ela refletirá no final. O futuro tem apenas uma resposta, mas o stream pode ter um número de respostas. Então, simplesmente, gostaria de dizer que quando estamos usando um futuro, se algo mudar já soube notificar ou aparecer uma nova mensagem, um usuário precisa atualizar esta página ou aplicativo. Mas quando você está usando fluxos, é em tempo real. Ou seja, qualquer alteração de dados, seu banco de dados refletirá diretamente nas dívidas da sua aplicação. É. Você não precisa ter, você não precisa pensar em mais nada. Essa é a diferença básica. Então, no próximo módulo, falaremos sobre fluxos mais prática porque usaremos o Firebase. Aqui vamos novamente simular nosso falso, um evento que retorna uma nova mensagem a cada poucos segundos, apenas para fazer você entender esse conceito. Portanto, há quatro etapas envolvidas. Criando fluxos, adicionando dados a um fluxo, ouvindo um fluxo e, em seguida, fechando uma string. Vamos fazer isso praticamente. Traga seu editor de texto e tenha um novo arquivo chamado stream. Captura de tela escura. Mais uma vez, a coisa mínima que precisamos, certo? Está tudo bem. Usarei o menos rígido porque a interface do usuário não foi alterada. Fluxo, tela, denso, andaime, Dann die fluxo de texto Dann die Daten. Agora, o que faremos é simplesmente criar um fluxo. E para criar esse fluxo, temos que prever o controlador de fluxo, que será usado para controlar esse fluxo. Stream. controlador de fluxo é devido a isso. E isso é importado automaticamente porque estamos usando fluxos e ímpares. A segunda etapa é adicionar dados ao fluxo. Para isso, crie uma função chamada stream data. E aqui você pode ter um loop for de int I é igual a 0, eu menos que 4, eu mais, mais. E, em seguida, adicionar pontos do controlador de fluxo. Você recebeu a mensagem. E então vou esperar por dois segundos aqui. Em seguida, somente o loop FOR será executado novamente. Este segundo, é isso. Nada mais. Agora no corpo. Vamos ter um aliviado, mas feito. Brilho de quem? Quando clicamos para transmitir. Em seguida, no principal, torná-lo padrão. Tela e apenas reconstrua ou a estatística. Consulte. Você tem esse o fluxo. E vamos apenas torná-lo centralizado. Certo. Agora, nesses dados de fluxo, parecerei, por favor, liste, comece a ouvir. Faça, faz árvore. Isso significa ouvir significa que novos dados entram. Cada um deve ser impresso. Simplesmente imprimirei dados. E os dados de string que atribuirei a essa função. Eu sei que há muitas coisas para entender aqui, mas você pode ver passos de poeira. Primeiro para nós criando um novo fluxo. O segundo foi adicionar dados ao fluxo. Cansado estava ouvindo o fluxo, o que simplesmente significa o quê? Isso significa simplesmente, que começamos a conexão que isso é verdade é basicamente como um rio. É quando você inicia um. Se, se o ponto de partida da tarefa não estiver fechado, esses dados ou a água começarão a fluir continuamente até e a menos que você bloqueie seu caminho, simples assim. Certo, vamos clicar neste botão. Você recebeu a mensagem. Você recebeu a mensagem C3, 4, quatro vezes ela imprime porque temos esses quatro. E se você está pensando que não. Então, vou escrever uma impressão aqui depois de dois segundos e ela simplesmente imprimirá, lerá. Kay? Vamos tentar novamente. Desculpe, isso porque era um fluxo. Então você precisa reiniciá-lo. Porque já começou a ouvir. Você não pode fazer isso de novo e de novo. Veja que você recebeu a mensagem. Leia. Você tem que ler a mensagem, você tem que taxa de mensagens. Então, aqui nos dados fluindo continuamente. Preciso que a mudança tenha sido desviada sem mudemos, reiniciando o aplicativo. Isso é feito o significado do fluxo. É isso. Então você pode estar pensando, o que acontece se eu souber que os dados são inseridos? Portanto, se outros dados forem inseridos posteriormente também, também serão impressos. O que estou dizendo é, vamos ter um botão de ação flutuante. Karité. Vou simplesmente escrever, adicionar um local. Vou simplesmente nesse controlador de fluxo, adicionaremos que você tem uma nova defecação de nó. Certo. Agora vamos ver. Aqui eu não escrevi nenhuma impressão nem nada, mas como ele está ouvindo via já escrevi esse código e o executei. Como se eu clicar nisso, ele começou a ouvir. Agora, depois que tudo estiver feito, se eu clicar em Adicionar, veja você tem uma nova notificação. Portanto, não precisamos ouvir novamente, pois a conexão já estava aberta e precisava disso, que os fluxos dentro desse fluxo serão emitidos. Em palavras simples, imagine que você tem suas mensagens na barra de notificação aqui. Se alguém sentir nova notificação, nossa mensagem, essa contagem aumentará 123. Portanto, esse é o conceito de restrição. Em palavras simples, qual é a diferença entre futuro e fluxo? Futures é executado quando um estado vai para o banco de dados e o leva para essa conexão terminar. Se algo mudar no banco de dados, o usuário terá que atualizar esta página ou precisar reiniciar seu aplicativo, então somente uma nova solicitação futura será enviada. Mas em caso de freestream, quando ele vai e pede os dados, ele, ele anexa uma conexão. O que, e nesse caso, se esse valor ou se alguma coisa mudar no banco de dados, ele flui diretamente do banco de dados para o aplicativo. Sem que o usuário atualize nem nada. Ele apenas atualizará aqui automaticamente. Espero que você tenha esse básico claro. E também com o exemplo do mundo real que faremos nos próximos módulos. Mas até lá, aproveite o básico de qualquer teoria que estamos aprendendo. Obrigado. 35. FutureBuilder e StreamBuilder: Bem-vindo de volta. Nesta sessão, falaremos sobre um novo widget chamado Construtor Future. E basicamente é uma visita com ajuda para lidar com futuros. Algum futuro quando isso remove parte do código que temos que escrever quando estamos buscando algo dessa rede, ou seja, do banco de dados ou do servidor. Digamos que você queira buscar dados do banco de dados no lançamento do aplicativo e mostrar um spinner de carregamento até que mais tarde chegue , nesse caso, o futuro será muito útil. Não é como leituras mortas. futuro não poderá executar a tarefa, mas levará muito tempo são mais alguns códigos. Você tem que fazer algum estado definido e tudo. Mas por que todas essas coisas quando temos essa rejeição incrível conosco? Então, ele é retornado como qualquer outro widget. Ele aceita dois parâmetros. Um é futuro e o segundo é um construtor. E o construtor também usa uma função que tem dois parâmetros. Um é contextos, que é por padrão, e o segundo é instantâneo, que é apenas um nome de variável. Mas é muito importante porque contém os dados retornados pela função de recurso. Então aqui você pode ver a sintaxe, simplesmente construtor futuro. Então, o futuro é a função que está retornando o futuro. E esse construtor, ele retorna um widget dentro dele, mas é uma função. Então, vamos fazer isso praticamente para que você entenda mais. Vá para a tela futura. E o que podemos fazer é que essa função retorne novamente. Acabei de fazer isso para testes. Vamos ter uma função futura chamada get username. E será o mesmo porque é o futuro. Agora vamos definir uma variável. String de finais. O usuário é igual ao futuro ponto d colocado. Vamos ter uma duração de dois segundos. E então eu tenho uma função que basicamente retorna o valor de Bill Gates. Tessa Violet, a variável de usuário, e depois retornamos esse usuário. Agora é um futuro que está retornando um valor de string. Agora esse futuro foi devolvido. Temos que mostrar isso em nosso corpo, apenas removeremos tudo e ter um futuro. Conosco. Um erro de digitação. Este construtor futuro, que é o primeiro parâmetro, é futuro, que devemos atribuir a esse nome de usuário get. E segundo. E o segundo é o construtor, que é uma função e aceita contato não exibição nos dá contexto e um instantâneo. E tem o tipo de dados do snapshot de sincronização. Então 10. Agora, espero que você tenha entendido isso. Primeiro. Escrevemos este futuro widget do Builder. Nós o atribuímos a um vídeo futuro. Agora, as coisas importantes, CMS, que é o papel desse instantâneo. Primeiro, temos que verificar se o ponto do instantâneo tem dados. Se for maior que, está tudo bem. Até lá, mostraremos algo como um indicador de carregamento. Simplesmente os eventos podem aprender o indicador de progresso. Então isso será executado até esse momento. Isso é este 2 segundo, primeiro a segundo. Então até esse momento definitivamente temos que mostrar algo na tela. E usaremos esse widget chamado indicador de progresso circular. Agora suponha que tenhamos dados, então simplesmente retornaremos. Nessa criança, teremos um widget de texto. Vamos produzir dados de pontos, que estão dentro do instantâneo. Dados de instantâneo. É isso. Vamos experimentá-lo por conta própria. Começamos a desculpar, quero dizer, temos que atribuir esta tela futura. Veja esse carregamento e indique que havia lá por dois segundos. E então temos o valor Km, que está sendo retornado pela função futura. Então, espero que você tenha entendido o futuro construtor. Mais importante ainda, você tem que investigar no snapshotting porque isso é aquela coisa que usaremos para manipular nossos widgets. Esse é o arquivo FASTA mostra um indicador de carregamento e , em seguida, mostre um show ou são colocados esses dados. É isso. Então, sim, você pode ver o código aqui novamente. Em seguida, fizemos um StringBuilder. Stringbuilder funciona da mesma forma que um futuro construtor. Apenas diferença. Ele escuta continuamente que a alteração é feita e atualiza a interface do usuário de acordo sem ter que atualizar ou reconstruir nossa tela. Agora, o StringBuilder também usa dois parâmetros, ou seja, trim e um construtor. Agora também constrói que usa uma função que tem dois parâmetros, contextos iguais a padrão. E o snapshot é apenas uma variável que contém os dados. Vamos tentar novamente. Vá para a tela de fluxo. Anteriormente criamos, criamos um futuro fictício. Agora vamos criar um fluxo fictício, fluxo. Meu fluxo. Ele não verá, será visto como truque porque, como é uma string no futuro, temos essa palavra-chave de sincronização, palavra-chave que será, que é atribuída se for um futuro. Mas quando diz fluxo, temos que escrever um asteróide da pia. É isso. Agora, aqui está simplesmente, vou simplesmente ter essa função for loop onde vou ler o que eu sou igual a 0. Eu menos de 10, eu mais, mais. E eu vou ceder não retornar. Vou deixar que valorizo. E também vou deixar o futuro ponto D lipídio aqui para que os valores demorem um pouco de tempo. Nossa função está escrita corretamente. É o que simplesmente, está dizendo que longe eu deveria ir de um a nove e nosso valor deve ser inserido no fluxo vinculado, ou seja, 1, 2, 3 para simplesmente flutuar através da string. É isso. Agora, novamente, teremos o construtor de fluxo. primeiro parâmetro é um fluxo, esse é o meu fluxo. O segundo é um construtor, que terá um contexto, que terá contexto. E em instantâneo. Agora, como de costume, sempre temos que verificar se o snapshot tem dados. Caso contrário, em primeiro lugar, retornarei um indicador de progresso circular. E se for perigo, se tivesse dados, então, no centro, tivemos um filho. E o texto dizia ponto de dados de ponto de instantâneo paraString. É isso. Como é um número inteiro, fiz duas cordas aqui. E na página inicial. Agora tela de fluxo à direita. Reinicie e verifique a saída. C 12. Três, não estamos fazendo nada. Não estamos atualizando a página. Mas, como diz stream, os valores de dados estão sendo atualizados em tempo real. Então, finalmente, espero que você seja o conceito de fluxos e futuros sejam claros. Pelo menos você conhece o conceito, é isso. Não estou dizendo que você deve saber tudo, o que escrevemos aqui e tudo, porque pode ser um pouco complicado para você agora. Mas confie em mim, quando usaremos um PS e Firebase, todas as suas dúvidas serão esclarecidas. Então é isso para este módulo. No próximo módulo, implementaremos APIs reais em nosso aplicativo. E todos esses dados virão do servidor. Obrigado. Vejo você no próximo módulo.