Transcrições
1. O que você vai aprender e construir: Olá, e bem-vindo à
aula. Estou vibrando e digo E nesta aula, vamos
criar algo pequeno, simples e realmente satisfatório Um aplicativo simples de fazer
usando o Flutter. Você aprenderá como criar
um novo projeto flutter, trabalhar com widgets com estado, usar seus blocos e o
List View Builder para
mostrar tarefas dinamicamente, lidar com a entrada do usuário com uma caixa de diálogo
pop-up e, finalmente, tornar seu aplicativo totalmente
funcional com adição, exclusão Ao final desta aula, você não terá apenas
um aplicativo funcional. Você terá uma
compreensão mais profunda de como os aplicativos flutter realmente
pensam e Essa aula é perfeita
para iniciantes, especialmente se você
acabou de começar a aprender flutter e quer
praticar a criação de layouts, uso de widgets e o
gerenciamento Não há pressa,
não há pressão aqui. Você pode seguir no seu próprio ritmo. Vou orientá-lo em cada etapa e explicar por que estamos
fazendo o que estamos fazendo. Tudo o que você precisa é
instalar o flutter e seu editor de código
favorito Vou usar o código VS, mas você pode escolher o Android
Studio se preferir. Agora vamos falar sobre
seu projeto de classe. No final desta aula, você criará sua
própria versão do aplicativo Tu Do,
personalizada por você. Aqui está o que você vai fazer.
Você precisará adicionar seus próprios ícones de tema
ou ajustes no layout, fazendo com que pareça seu aplicativo Adicione um novo recurso, algo pequeno, mas criativo, talvez prioridades de tarefas ou data. Ao terminar, compartilhe uma captura de tela ou uma gravação curta do seu aplicativo na seção do projeto da
turma Eu adoraria ver
o que você cria. Então pegue seu chá ou café,
abra seu terminal e vamos começar a criar
seu primeiro aplicativo a fazer no flutter.
Vamos começar.
2. Configurando seu projeto: Tudo bem. Vamos
montar nosso projeto. Abra seu terminal e
navegue até sua área de trabalho. Aqui eu tenho todos os meus
projetos dentro do projeto
flutter e
digito, flutter,
criar de forma simples de
fazer e clique em criar de forma simples de
fazer e Depois de terminar, navegue
dentro da pasta do projeto. Agora vamos abrir isso em código. Vamos fechar isso. Vamos
maximizar nosso editor de código Perfeito. Agora, dentro
da pasta labial, vamos abrir o
dardo principal e limpar tudo. Vamos começar do zero importando
o pacote de materiais flutter Pacote de importação, vibração,
material, ponto, dardo. Agora vamos escrever
nossa função principal. Vazio principal. Em seguida, diremos Runap const simple para Vamos fechar isso Em seguida, criaremos um
widget sem estado para a raiz do nosso aplicativo. Eu vou dizer classe, e
vou apenas copiar
esse widget extends stateless E aqui, eu vou dizer const. Tecla super dot simples de usar. Então diremos: Tudo bem, construa e nos
livraremos disso. E diremos devolução, aplicativo de
materiais. Vamos guardar isso.
Ótimo. Agora vamos dar ao nosso aplicativo de materiais alguns detalhes
básicos, como
cor, esquema de cores e tela inicial. Então, dentro disso, diremos título. Eu quero chamar isso
de simples de fazer. Em seguida, removeremos
o banner Debug e adicionaremos o
tema. Esses são os dados deles. Aqui, diremos que usar o
material três é verdadeiro. Então eu vou
dizer a cor da semente. Serão cores tão
azuis. Vamos guardar isso. Depois disso, diremos home const home screen.
Vamos guardar isso. Incrível. Agora precisaremos criar um novo widget
chamado tela inicial Este terá
um widget de estado cheio porque toda a
lógica do nosso aplicativo, como adicionar, excluir e gerenciar tarefas,
acontecerá diretamente nele Vamos construir isso juntos
na próxima lição.
3. Como criar a tela inicial: Tudo bem. Vamos construir
nossa tela inicial com ela. Podemos começar
criando uma classe chamada Homscreen extends
State E dentro disso, podemos dizer
const home screen superdt key. E aqui, vamos dizer à
direita, criar estado. Aqui, o
widget de estado completo é a tela inicial, e nos livraremos de
todos esses itens aqui e criaremos um estado de tela inicial privada Vamos continuar e construir isso. Classe, o
estado da tela inicial estende o estado, aqui vamos colocar
essa tela inicial dentro dela, vamos dizer, construa e vamos
remover isso,
vamos devolver Guarde isso. Perfeito. Agora que temos o andaime, vamos executar o aplicativo Vou
executá-lo como um aplicativo do Windows, mas você pode escolher qualquer
plataforma que desejar, Android, IOS ou web. Então, vamos
criar isso. Tudo bem, vamos
prosseguir e organizar isso. E vamos
comprimir isso até mais. No momento, é apenas uma
tela em branco, e tudo bem. Começaremos
a adicioná-lo passo a passo. Vamos adicionar nosso APA primeiro. Dentro do andaime,
diremos APA,
APA, usaremos o título E você usa um custo chamado texto, e eu chamarei isso
de simples de fazer. Salve isso e você verá que o
simples de fazer aparece aqui. Vamos ver mais do código. Agora, dentro disso
após o título, vou adicionar a cor de
fundo. A cor de fundo
será o ponto por ponto esquema
de cores, ponto primário. Guarde isso. E vamos duplicar isso e chamaremos
isso de cor de primeiro plano, e isso será no
primário Diga isso. Bom. Temos
nossa parte do aplicativo aparecendo agora, um título simples e um
esquema de cores que combina com nosso tema. Na próxima lição,
começaremos a adicionar nossa lista e você verá
como os dois itens aparecerão e funcionarão dentro dela.
4. Como criar uma lista de tarefas básica: OK. Agora, cada item superior em nosso aplicativo será um estilo de lista. Um bloco de lista tem
três partes
principais, à esquerda, que geralmente é
para ícones e caixas de seleção, título e subtítulo, onde
podemos mostrar nosso texto principal, à
direita, frequentemente usado para ações como botões de edição
ou exclusão Vamos ver como isso funciona. Dentro do andaime,
vamos dizer corpo, e eu vou adicionar uma coluna E dentro dessa coluna, vou adicionar um
bloco de lista e vamos salvá-lo. No momento, temos
apenas um ladrilho. Vamos preenchê-lo
com algum conteúdo. Dentro do bloco da lista, vou adicionar uma entrelinha. Vou definir isso como Cs, e aqui vamos adicionar um ícone. Vamos chamar esse ícone de ícone de caixa de seleção de
pontos. Vamos salvar isso Depois disso, vamos adicionar um título. O título pode ser um widget de texto aqui chamaremos isso
de Hello World Digamos que sim. Vou adicionar isso
ao const. Agora vamos adicionar uma legenda. Depois disso, diremos
subtítulo, digamos const, widget de
texto e podemos dizer olá mundo, legenda. Diga isso. Agora você pode ver que temos a
liderança e o conteúdo. A próxima coisa que
você deseja adicionar é o rastro que
vem no final Aqui podemos dizer const, ícones que excluem.
Vamos guardar isso. Eu posso ver que também temos
aquele botão de exclusão aqui. Agora, se eu clicar nisso,
acho que realmente acontece. Isso porque não
adicionamos a função on tap. Então,
vamos adicionar isso. Diremos na torneira. E aqui, podemos adicionar
uma mensagem simples. Então, digamos que, se eu tocar nisso, quero colocar uma
mensagem de andaime aqui,
que é uma barra de obstáculos, que diz “Olá, mundo Então, aqui, o que
podemos fazer é dizer scaffold messenger dot
off dot show Snack Bar E aqui podemos dizer
const, Snack Bar, e podemos definir um
widget de texto aqui que diz: Hello world was E vamos salvar isso. Então você precisa fechar isso
e vamos salvar isso. Ok, agora, se eu tocar nisso, você pode ver que recebemos
uma mensagem na barra instantânea Perfeito. Agora, se você
observar a prévia ao vivo, verá que temos
uma caixa de seleção à esquerda Temos um título e subtítulo
e, em seguida, temos um
ícone de exclusão à direita E quando tocamos nele, vemos uma pequena mensagem aparecer na parte inferior mostrando
nossa lanchonete Agora, se quisermos muitos
desses estilos, podemos simplesmente duplicar isso Então, vamos tentar isso. Então, vou
copiar isso e colar umas cinco vezes. Sim, isso funciona. Mas o problema é que tudo
isso é estático. Se tivermos dezenas ou
centenas de itens, isso consumirá
muita memória. Em vez disso, o Flutter nos dá
algo muito mais eficiente, o construtor de listas Wave É isso que exploraremos
na próxima lição.
5. Trabalhando com ListView: Ok, agora vamos ver como funciona
a lista do We Builder. Para que a lista We
Builder faça seu trabalho, primeiro
precisamos de uma lista de itens. Como ainda não temos
nenhuma tarefa real, geraremos
algumas para testes. No topo, aqui, vamos criar essa lista. Então, aqui vamos dizer as tarefas
finais de sublinhado, e vamos definir isso para
listar aquela geração E aqui precisamos de um comprimento que
eu
defino como fi e o gerador será Index
e, por padrão, será false. É salvar isso. O que estamos
fazendo aqui é criar uma lista de cinco itens e cada um que começa
com um valor cai, ou
seja, ainda não foi verificado. Agora vamos usar essa
lista dentro do nosso corpo. Primeiro, vamos ao nosso código e você pode ver que
temos essa coluna aqui. Não precisamos mais dessa
coluna. Vamos continuar e excluir isso. E agora podemos escrever no List weave Builder e nos livrar das coisas
que temos aqui dentro, podemos digitar a contagem de itens Agora, já temos os itens, seja, as tarefas, e só
precisamos saber o tamanho delas. Essa é a contagem de itens. Agora precisamos do Construtor de itens. Para o construtor de itens, podemos usar o índice de contexto. Dentro disso, podemos
retornar o bloco da lista. Lembre-se do que costumávamos
inserir no estilo de lista. Precisamos liderar,
precisamos ter o título, precisamos ter a derrota
e, em seguida, a coisa do “on tap Então, dentro do estilo de lista, agora você pode adicionar uma entrelinha, que agora
será uma caixa de seleção, e o
valor será tarefas, e então você pode simplesmente
chamar o índice Agora, sobre mudanças, o que precisamos
fazer? Então, na mudança, o que
podemos fazer é pegar um valor e definir o estado aqui. Assim, podemos alterar o valor do
índice de tarefas para negativo. Ou simplesmente inverta, vice-versa. Agora você tem as caixas de seleção. Temos cinco caixas de seleção. Agora você pode verificar isso
individualmente e desmarcá-los também. Temos a caixa de seleção.
Agora, depois da liderança, o que precisamos é do título. Vou dizer título, já que ainda não
temos nenhum conteúdo
para o título, vou apenas adicionar um
widget de texto que diz que essa é uma tarefa do índice do dólar Ok. Então, se eu salvar isso, você pode ver que diz tarefa um, tarefa zero, tarefa dois,
três, quatro, assim. E agora podemos dizer que
e é o segundo conjunto. E agora podemos realmente
obter a verdadeira coisa falsa. Agora, para isso, o que
podemos fazer é colocar o cifrão, usar
a flor de latão
e, dentro disso, podemos dizer
tarefas e obter o índice Então, agora você pode ver que ele mudará
automaticamente. Então, se eu tocar aqui, ele
mudará para verdadeiro. Se eu desmarcar isso novamente, ele mudará para falso Portanto, o toque
ainda não funciona, então adicionaremos isso mais tarde. Por enquanto, as caixas de seleção
funcionam e podemos alterar o valor do nosso título
aqui com base na nossa verificação. Agora, depois do título, o que podemos fazer é
adicionar o final. No final, vou
adicionar um botão de ícone. Então, pressionado, o que eu
quero é definir um estado. O estado é que eu quero colocar os itens dentro das tarefas e precisamos removê-los
em seu índice. Agora, precisamos adicionar o ícone. Então, o
ícone será const. Vou chamar isso de
ícones dot Delete. É salvar isso. Agora você pode ver, temos esse botão de exclusão. Então, quando eu verifico
isso, muda para verdadeiro e se
eu Ilic puder excluir, esse item será excluído Mas tudo bem, vamos
continuar e fazer isso de novo. E temos cinco itens agora. E se você verificar
a visualização da biblioteca, verá que temos
cinco itens e cada um deles tem uma caixa de seleção
e um botão de exclusão Você pode alterná-los
e também removê-los. Mas se você verificá-los, nada realmente muda
visualmente. Vamos consertar isso. O que eu quero é que,
quando
eu verificar isso, eu quero ver este texto. Vamos seguir em frente e
fazer isso. Este é nosso texto e o que podemos fazer aqui é
fornecer em uma vírgula Digamos estilo. Em seguida,
usaremos o tecido E agora, dentro desse tecido, podemos dizer decoração E aqui podemos realmente
verificar o valor das tarefas. Então, essas são as tarefas e
, em seguida, obtenha o índice. Se for verdade, vamos
dizer decoração de texto. Linha pontilhada. Ou podemos dizer
decoração de texto, ponto, nenhum. Vamos guardar isso. Então, agora você pode ver que podemos
ver uma linha passando. Então, toda vez que eu desmarcar
isso, a linha de entrada
vai sumir, e se eu marcar isso, você vai ter uma
linha passando por lá Agora, adicionamos
esse bloco, mas ainda tocar nele não
muda nada Então, vamos tornar todo o
ladrilho tocável também. Então, se você rolar para baixo depois do final
que está aqui, podemos dizer no toque Agora, na guia, vou definir o estado e aqui
vamos dizer que o índice de
tarefas é igual
a zero índice de tarefas Basicamente, estamos fazendo o
contrário, e aí está. Agora, ao tocar na tarefa, o texto ganha um efeito
de linha. Mas vamos torná-lo ainda melhor. Vamos esmaecer o texto
quando a tarefa for concluída. Então, agora, depois dessa decoração de
texto aqui, vamos dizer cor e depois
procuraremos as tarefas. Índice. E se for verdade, vamos dizer que
cores são ótimas. Ou diremos cores
pretas escuras. Vamos guardar isso. Agora você pode ver que a
lista verificada terá um ótimo texto. Então, agora, podemos marcar
e desmarcar as tarefas. Podemos atacar e também
remover o ataque quando verificado
e, em seguida, também podemos
excluir a tarefa. Muito incrível, certo?
Mas o problema é o seguinte. Essas tarefas são geradas automaticamente. Na próxima lição,
você aprenderá como
adicionar novas tarefas com
base na entrada do usuário. Dentro.
6. Criando dados reais para nosso aplicativo de tarefas: Tudo bem, é hora de começar a
trabalhar com dados reais, não com coisas geradas automaticamente Para fazer isso, vamos criar
um objeto para nossas tarefas. Isso nos ajudará a gerenciar
cada tarefa com mais facilidade. Para isso, vamos
rabiscar o caminho para cima. E antes disso,
vamos dizer aula, vou chamar isso de tarefa. E dentro disso,
vamos usar uma variável com uma string, e vamos chamá-la de título. Então é aqui que nosso título
será armazenado ou a tarefa em si. E aqui podemos colocar um lingote
e definir que dois estão prontos Agora podemos chamar essa tarefa
e, em seguida, podemos dizer que
é necessário esse título. E vamos
considerar que esse dt está pronto
e, por padrão, vou configurá-lo
para quedas. Guarde isso. Agradável e simples. Cada tarefa terá um título
e uma bandeira chamada Es done, que será falsa
por padrão agora. Então, agora vamos usar esse objeto de
tarefa em nosso estado. Então, dentro do estado da tela inicial, comente a
variável existente que criamos. E logo acima disso,
adicionaremos final e chamaremos uma lista, e o tipo é tarefa. E chamaremos isso de tarefas. Vamos definir isso como uma lista vazia. Perfeito. Agora,
só precisamos atualizar nosso código do List Builder para
funcionar com a nova estrutura. Em todos os lugares em que estamos usando o índice de tarefas de
sublinhado, agora o
referiremos como ponto de índice de
tarefas de sublinhado
Está ponto de índice de
tarefas Então, agora, se você rolar para baixo, você pode ver que temos aqui o índice de tarefas de
sublinhado Então, aqui, tudo o que temos que
fazer é dizer que está feito, e a mesma coisa acontece
aqui, está feito. E aqui vamos dizer que está pronto. Tem um pouco mais de garras, e você pode ver aqui,
temos esse índice Então eu disse que está feito,
e a mesma coisa acontece aqui. Isso está feito. E o mesmo aqui também está feito. E acho que temos mais um
em algum lugar. Que está aqui. Ou seja, está feito. E a mesma coisa acontece
aqui também. Guarde isso. Se você ver esse erro,
não se preocupe com isso. Nós vamos consertar
isso. Então, basta passar mais uma vez e verificar
se algo está faltando. Se tudo estiver funcionando bem, você pode prosseguir e
recriar seu aplicativo Está bem? Então, agora tudo acabou. Então, se você vê aqui, eu acho que precisamos
atualizar o Título dois. Então, aqui estamos vendo exatamente
isso, que é estático, e vou substituí-lo por
tarefas de sublinhado Eu vou dizer
título do ponto de índice, digamos isso. Incrível. Agora, tudo está
conectado ao nosso modelo de tarefas. Então, estamos um passo mais perto construir um verdadeiro para fazer essa aba. Agora, precisamos de uma forma de o
usuário adicionar novas tarefas. Na parte inferior, aqui
dentro do andaime, podemos adicionar um botão de
ação flutuante Então, vamos chamar isso de botão de ação
flutuante. E ao pressionar, agora, definiremos uma função de prancha porque ainda não
temos nada E aqui, podemos definir um filho
e isso será Cs, e podemos adicionar um ícone. Ícones, diremos que os ícones adicionam pontos. Guarde isso. Agora, aqui
na parte inferior, você pode ver que temos um botão. Vamos fazer disso um botão
arredondado. Aqui, digamos que a forma seja uma borda circular e
vamos salvá-la. Eu posso ver que temos
um botão redondo. Mas, no momento, esse
botão redondo ainda não faz nada. Em seguida, faremos com que abra
uma pequena caixa de diálogo pop-up na
qual o usuário poderá digitar uma
nova tarefa e adicioná-la à lista. Faremos isso
na próxima lição.
7. Adicionando uma janela pop-up para criar tarefas: Tudo bem Agora, quando o usuário
clicar nesse botão de adição, queremos que apareça um pop-up onde ele possa digitar uma nova
tarefa. Vamos fazer isso acontecer. Primeiro, dentro do botão de ação
flutuante, vamos chamá-lo de função chamada
underscore, show pop-up Vamos guardar isso. Agora, vamos continuar e criar
essa função. Vou copiar isso, rolar até o fim e
logo após nossa variável aqui, vou criar um
vazio com essa função E aqui vamos dizer, mostre a caixa de diálogo e,
dentro do construtor, usaremos um contexto retornaremos
uma caixa de diálogo de alerta. Vamos guardar isso. Agora,
dentro dessa caixa de diálogo de alerta ,
agora, se você clicar aqui, você pode ver que
acabamos de ver essa tela cinza. Isso significa que a
caixa de diálogo de alerta está funcionando, mas só precisamos adicionar
conteúdo dentro dela. A primeira coisa que
precisamos adicionar é o título. Então, vou adicionar isso
ao Cs e dizer texto, e vamos chamar
isso de tarefa. O estilo é um pouco. Então, vamos dizer estilo têxtil
e definir o tamanho da fonte como
16 e definir a espessura da fonte
para a espessura da fonte W 500 Guarde isso. Se eu
clicar nesse botão de adição, você verá que o título
Attask aparece E depois do título, a próxima coisa que precisamos é do conteúdo dessa caixa de alerta. Aqui, vamos adicionar
um custo com um campo de texto. Esse campo de texto pode ter uma decoração por
enquanto e chamaremos essa decoração
de decoração de entrada e terá um texto de dica. Esse texto de dica será adicionar
sua tarefa aqui e salvá-la. Agora vamos tentar
verificar isso novamente. Vamos clicar nesse botão de adição. Agora você pode ver que podemos ver
esse campo de texto aqui. Então, agora, depois do conteúdo, podemos adicionar ações, um botão que pode
realmente fazer alguma coisa. Então, aqui vamos
adicionar um botão de texto. No momento, não temos
uma função para isso, então vamos
criar uma função em branco. E aqui, podemos adicionar um
texto que diz uma tarefa. Agora, isso não
vai mudar, então vou definir isso
como const. Eu vou dizer isso. Agora, se eu clicar
nesse botão de adição, você pode ver que temos adicionar tarefa
e aqui o usuário pode adicionar
sua tarefa e, em seguida, há um botão
Adicionar tarefa. Tudo bem O problema agora é que,
mesmo que o usuário clique nesse tipo de coisa,
clique em adicionar, nada vai acontecer Precisamos capturar essa entrada
e adicioná-la à nossa lista. Para fazer isso, precisaremos
usar um controlador de edição de texto. Agora, logo abaixo de nossas
tarefas que estão aqui, vamos dizer controlador final de edição de
texto. Eu vou dizer controlador. Vou dizer isso
também. Controle de edição de texto. Vamos guardar isso. Agora, aqui, no campo de texto, eu vou dizer controlador. Podemos dizer
controlador de sublinhado. Agora, se você não consegue ver
o destaque aqui, automaticamente, é
porque adicionamos os contras aqui. Então,
vamos remover isso. E agora devemos ser
capazes de ver isso. Agora você pode ver que temos o controlador. Vamos guardar isso. Agora, quando o usuário
digitar esses detalhes
e clicar na tarefa do anúncio, poderemos
capturar esses detalhes. Tudo bem Agora, quando o usuário digita algo
dentro do texto, isso é armazenado dentro ponto TXT
do
controlador de sublinhado Na próxima lição, faremos o botão at Task realmente pegue essa tarefa e crie um novo objeto de tarefa e o exiba
instantaneamente em nossa lista. É aí que nosso aplicativo de tarefas
realmente começa a ganhar vida.
8. Fazendo o botão Adicionar tarefa funcionar: Tudo bem, é hora de
fazer as coisas acontecerem. Vamos fazer com que nosso
botão de adicionar tarefas realmente faça alguma coisa. Primeiro, vamos conectar
o botão a uma nova função chamada Adicionar tarefa. Primeiro, vou remover isso e vou
chamá-lo de AdTask Guarde isso. Agora, vamos copiar isso aqui logo
após esse pop-up, vamos dizer
anular adicionar tarefa Agora, precisamos verificar
se o controlador que adicionamos não
tem espaços vazios. Para isso, diremos I e
aqui podemos dizer controlador, texto com
pontos, corte de pontos Agora, isso
é o que vai remover todos os espaços em branco
dentro do texto. Também precisamos verificar se está vazio e está tudo bem, vamos voltar. Em seguida, vamos
dizer definir estado, depois vamos pegar as tarefas e adicionar
algo dentro delas. O que vamos adicionar,
vamos adicionar a tarefa. O título seria Controller, TD dot CRM Vamos fechá-los. Tudo bem Agora vamos testar isso. Vamos clicar nesse botão de adição e digitar algo. Vou chamar isso de Hello world. Vamos clicar em uma tarefa. Aí está. A tarefa
aparece diretamente na lista. Mas observe uma coisa: o
pop-up não fecha e o campo de texto ainda contém o texto
antigo. Vamos consertar isso. Em sua função de tarefa, o que vamos fazer é primeiro pedir
ao controlador que limpe
tudo quando estiver pronto. Então, uma vez que esteja limpo, precisamos voltar à
nossa página anterior Para fazer isso, diremos
navigator dot PAC. É isso mesmo. Agora vamos reconstruir nosso aplicativo. Vou clicar aqui e
podemos dizer: Olá, mundo. Vamos clicar em na tarefa. Agora você pode ver que o
pop-up desapareceu, e você pode ver a tarefa Hello
world e eu posso verificá-la. Eu posso desmarcá-lo. Eu posso tocar nele. Posso destocar isso novamente e, na verdade, posso
excluir essa tarefa A melhor parte é que, se eu
voltar para esse botão de adição, se eu clicar nesse botão de adição, o texto antigo desaparecerá e agora estamos prontos
para realizar novas tarefas. Vamos adicionar mais alguns.
Digamos que cinco. Então, aqui vou chamar
isso de tarefa, tarefa um, clique em adicionar,
crie outra. Vou chamar
isso de tarefa dois. Vamos criar outro.
Chamaremos isso de tarefa três. Tarefa quatro e,
finalmente, tarefa cinco. É isso mesmo. Então, agora você pode
realmente verificar essas tarefas. Você pode tocar neles. Você também pode excluí-los se quiser. Nosso aplicativo simples de fazer
agora está totalmente funcional.
9. Recapitulação e projeto do curso: Tudo bem, nós fizemos isso. Você criou seu próprio aplicativo simples de
fazer do zero. Vamos dar uma
olhada
rápida em tudo o que você
aprendeu nesta aula. Começamos criando nosso projeto flutter e
configurando a estrutura básica Em seguida, exploramos
os blocos da lista e aprendemos como
compartilhar dados de forma organizada com
ícones, títulos e Depois disso, aprendemos o
List weave Builder, que nos ajudou a criar listas de
forma eficiente e dinâmica Também aprendemos como usar
um widget de estado completo e usar
a função set state para
atualizar nossa interface sempre que
os dados mudarem a função set state para atualizar nossa interface sempre que
os dados mudarem Em seguida, levamos as coisas adiante. Criamos nosso próprio modelo de tarefas, usamos um controlador de edição de texto
para capturar a entrada do usuário e adicionamos uma caixa de diálogo pop-up
na qual o usuário pode digitar novas tarefas. Por fim, tornamos o aplicativo o que
fazer totalmente funcional. Agora você pode adicionar tarefas, marcá-las como concluídas, desmarcá-las e excluí-las. Isso é muito
progresso para uma turma. Você deveria se
orgulhar disso. Agora é hora do seu projeto de classe. Aqui está o que eu quero que você faça. Adicione sua própria personalidade
a este aplicativo. Tente alterar o esquema de
cores, o cartaz ou os ícones, para fazer com que
pareça que é seu. Adicione mais um pequeno recurso. Algo criativo, talvez um
seletor de datas ou uma prioridade de tarefa Não precisa ser complexo. Só precisa ser seu. E quando terminar, compartilhe uma captura de tela ou gravação
de tela do seu aplicativo finalizado na seção
do projeto da classe Conte-nos o que você adicionou, o que mudou e o que
você mais gostou. Nos vemos na
próxima aula, onde
construiremos algo ainda
mais bonito juntos. Até lá, continue programando, continue experimentando
e se divertindo
Flutter Sensei, Teaching Flutter from Scratch
