Transcrições
1. O que você vai aprender e construir: Oi, todo mundo. Bem-vindo. Am
freosens e, nesta aula, você aprenderá como criar um aplicativo planar diário
que seja persistente, o que significa
que, desta vez, os dados serão armazenados Nesta aula prática, vamos preencher a lacuna entre a interface de usuário
simples e os aplicativos funcionais orientados por
dados. Começaremos configurando a base do
nosso projeto e construindo uma
interface limpa e moderna usando o material três. Você aprende como gerenciar entradas
complexas de usuários
implementando seletores personalizados de data e hora e como manter seu código limpo usando ajuda ou lógica
dedicadas À medida que
progredimos, nos
aprofundaremos no
gerenciamento de banco de dados local com o Hive. Você aprenderá a criar adaptadores de tipos
personalizados para
armazenar modelos de dados complexos implementar um óculos
temático persistente seu aplicativo se lembre de
sua preferência pelo modo
claro e escuro
mesmo após a reinicialização modo
claro e escuro
mesmo Organize e exiba
dados de forma eficiente usando botões de classificação
dinâmica e sem grupos,
execute operações completas, permitindo que os usuários adicionem, permitindo que os usuários adicionem, editem e Antes de começarmos, verifique se você
instalou a versão mais recente do flutter e do código VS em seu PC Seu projeto para esta
aula é criar o aplicativo Dani Planner do
zero após as Para concluir o projeto,
você deve configurar o ambiente de vibração
e o banco de dados do hive Crie um modelo de nós e gere os adaptadores
de banco de dados necessários Crie a interface do usuário para adicionar
e editar nós, incluindo a lógica de seleção de data e
hora. Implemente a alternância de tema e
a funcionalidade de classificação, ascendente e descendente para gerenciar Quando terminar,
compartilhe uma captura de tela do seu aplicativo final na galeria
do projeto Além disso, fique à vontade para ser
criativo adicionando suas próprias cores de tema personalizadas ou exibindo uma longa lista
de tarefas organizadas Agora, antes de começarmos, certifique-se de clicar no
botão Seguir no meu perfil. Dessa forma, você será o
primeiro a saber quando eu abandonar as novas aulas de flutter. Então,
o que você está esperando? Vamos começar.
2. Configuração do projeto e fundação do aplicativo: Tudo bem, vamos começar. A primeira coisa que
vamos fazer é criar um novo projeto de vibração
para nosso aplicativo de planejamento diário Então, vamos abrir nosso terminal e navegar até
a área de trabalho. Vamos navegar até nossos projetos de
flutter. E aqui,
criaremos um novo projeto que chamaremos de SAS, flutter,
create, daily planner
e Agora vamos entrar
nesse planejador diário e
abri-lo com o VSCode Vou fechar
todo o resto. E vamos abrir o ponto principal f. Agora vamos limpar tudo
dentro desse arquivo, que possamos criar o
aplicativo do zero. Depois que tudo estiver limpo, você poderá adicionar o código Então, diremos importação, embalagem, vibração, ponto de material Então diremos void main. Em seguida, diremos Run app, const, my app e
fecharemos isso Copie isso, digamos, classe, meu aplicativo, estende
stateless, rigid Dentro disso, diremos
const MyApp, chave Superdt. E então
diremos que tudo bem, construa e removeremos
todos esses itens, você devolverá um
material e, dentro dele, diremos o título. Vou chamar o
título de planejador diário. Em seguida, vamos definir o banner de
depuração da seguinte forma. Vamos dizer que são dados e usaremos o material três. Usaremos o
esquema de cores da semente, chamado de cores azul pontilhado. Vou definir o
brilho para brilhar a luz do ponto.
Vou guardar isso. Feito isso,
ligaremos para nossa casa. Vou chamar isso
de tela inicial const. Vamos guardar isso. Tudo bem, este é o nosso invólucro de aplicativos de
materiais. No momento, estou mantendo as coisas
intencionalmente simples. Você notará que eu ainda não
adicionei o modo escuro ou nenhum tema avançado,
e isso é proposital Quando integrarmos o Hive posteriormente, lidaremos adequadamente com temas
e configurações persistentes Por enquanto, isso nos dá uma base
limpa sobre a qual construir. Na próxima lição,
começaremos a criar a interface de usuário
da tela inicial para
nosso aplicativo de planejamento diário
3. Como criar a tela inicial e conectá-la ao aplicativo: Ok, dentro da pasta lift, vamos criar uma nova
pasta chamada screens. Então, aqui podemos
chamar isso de telas. Agora, dentro dessa pasta, vamos criar um novo arquivo e chamaremos esse arquivo
de tela inicial ponto, ponto. É aqui que nossa interface de usuário
da tela inicial ficará. Agora, vamos começar a criar
a interface do usuário para nossa tela inicial. Então, dentro do ponto ponto da
tela inicial, podemos começar a adicionar importação,
pacote, vibração, Aqui vamos dizer
classe, tela inicial, estende, estado quatro com gt. E podemos dizer const, tela
inicial, tecla superdt Eles dizem, em absoluto, criar um estado. E eu vou copiar essa tela inicial,
colar aqui, e isso vai ser
sublinhado no estado da tela inicial E vamos salvar isso.
Agora, vamos considerar esse estado de tela
inicial não descoberto Eu vou dizer classe, cole
um estado extenso. O estado é tela inicial. E aqui veremos tudo bem,
construiremos e, dentro da construção, devolveremos um andaime Aqui, você notará que
criamos um widget cheio de estado Isso porque essa
tela em breve tratará dados
dinâmicos, como adicionar
e atualizar tarefas. Portanto, faz sentido se preparar
para isso desde o início. Agora vamos voltar
ao ponto principal. E então aqui vamos
importar essa tela inicial. Digamos que pacote, agenda
diária. Digamos telas,
tela inicial e digamos isso. Assim que você fizer isso, você
verá que o erro aqui desapareceu. Agora podemos executar o aplicativo. Você pode ir aqui e simplesmente
clicar neste botão. Você pode executá-lo em um emulador de
Android, navegador ou qualquer
plataforma de sua preferência Vou executá-lo no Windows pois é mais rápido
para o desenvolvimento. Tudo bem, então você
parece ter começado. Então, vamos fechar isso e
vamos alinhar isso ao
lado deste.
E vamos derrubar isso. Incrível. O aplicativo está em execução, mas está completamente vazio no
momento, e isso é esperado. Só montamos
a estrutura até agora. Na próxima lição,
começaremos a adicionar os componentes reais da interface do usuário, como a barra do aplicativo e o botão de ação
flutuante, e é aí que o aplicativo
começará a parecer vivo.
4. Adicionando AppBar, FAB: Incrível. Agora é hora de começar a adicionar alguns
componentes de interface de usuário ao nosso aplicativo. Então, dentro do ponto pontilhado da
tela inicial, temos Então, dentro desse andaime, a primeira coisa que
adicionaremos é o aplicativo Então, aqui, diremos app, app on e definiremos
o título como um custo. Vou chamar
isso de wechir de texto. E aqui podemos dizer agenda diária. Em seguida, vamos adicionar um pouco de cor
de fundo. Esse é um tema de cores de fundo esquema
de cores de pontos, contêiner primário de
pontos. Em seguida, adicionaremos a cor do
primeiro plano. Esse será o esquema de cores
ponto a ponto, ponto no contêiner primário.
E vamos salvar isso. Agora que temos o aplicativo, vamos adicionar o botão de ação
flutuante. Então, vamos dizer botão de
ação flutuante, o
botão de ação flutuante quando pressionado ,
vamos
deixá-lo em branco e aqui vamos adicionar a criança. A criança será uma constante com
um ícone chamado icons dot add Vamos guardar isso.
Agora você pode ver, temos o botão de
ação flutuante. O que podemos fazer é realmente mudar
a forma disso. Chamaremos isso de borda
circular para que pareça arredondada. Tudo bem, temos a barra de
aplicativos na parte superior, um
botão de ação flutuante na parte inferior O aplicativo finalmente parece um aplicativo real em vez
de uma tela em branco. No momento, o botão de ação
flutuante não faz nada,
e tudo bem. Quando tocamos nesse botão, o objetivo é levar o
usuário para uma nova tela. Essa tela será
nosso anúncio, não tela. Na próxima lição,
criaremos uma tela de nota personalizada na qual o usuário
poderá escolher a data, selecionar a hora, adicionar um título e escrever parte do
conteúdo da nota. É aí que nossa agenda diária
realmente começa a tomar forma.
5. Criando a tela Adicionar notas e navegação: Tudo bem. Agora, dentro
da pasta Screens, vamos criar um novo arquivo
e chamaremos isso de add note dot dt. Dentro desse arquivo,
importaremos um pacote chamado flutter, material dot dart e
adicionaremos a classe chamada
add Note extends
State E aqui vou
dizer const, adicionar nota, chave
superdt e eu vou dizer,
tudo bem, criar estado Vou pegar essa nota, colar aqui e me
livrar dessas coisas. Vou chamar isso de sublinhado,
adicionar nota, tela. Ou, na verdade, adicione o
estado da nota. E eu vou guardar isso. Vou pegar
este, e vou dizer classe,
adicionar, não extensões de estado,
estado, e chamaremos
isso de Add nut. E aqui, vamos
ver tudo bem, construir, ele vai
devolver um andaime Tudo bem. Agora vamos voltar ao
estado da tela inicial. Então, eu vou
mover isso para cá. Já chamamos a barra de aplicativos e o botão de
ação flutuante aqui. Então, em vez de
reescrever tudo, reutilizaremos essa estrutura Então, vou copiar isso, voltar para nossa nota publicitária e colocá-la aqui. Então, aqui, vamos chamar isso
de adicionar nota. Guarde isso. E vamos voltar
aqui e eu vou
copiar este também. E logo após
este, vou colar. E o que faremos agora
é que, em vez desse anúncio, chamaremos isso de salvar. Agora, vamos voltar
à nossa tela inicial. E agora vamos conectar nossa tela de anúncios à nossa tela inicial. Então, o que vamos
fazer aqui é pressionar, vamos dizer
navigator dot perch
e a rota será a rota da página de
material e
o construtor será página de
material e a tela Add Nod.
E vamos fechar isso. Agora, se eu tocar neste, você pode ver que venho
adicionar o Nodescreen Agora você pode ver que temos um novo aplicativo e um botão Salvar Agora, dentro do botão Salvar, o que vamos fazer
é dizer ponto do
navegador e
eu vou salvá-lo Agora, se eu clicar nesse saveton, serei levado de volta
para a tela de Hong Na próxima lição, começaremos a criar a interface de entrada real. Dentro dessa tela de adição de nó, adicionaremos um botão de data e hora. Adicionaremos um campo de texto para o título
do nó e o conteúdo do nó. É aí que a tela
começa a ficar boa.
6. Como criar a interface de usuário Add Note: Tudo bem. Agora é hora de
adicionar as coisas reais. Na tela de adição de
nós, começaremos
criando primeiro a interface do usuário. Vamos nos concentrar apenas
no layout agora. A lógica virá mais tarde. Agora, dentro do nó de adição
ponto, ponto, depois do aplicativo, vamos adicionar o corpo. E aqui, adicionaremos preenchimento. Vou chamar
isso de H inset. Vou definir isso para 16. E aqui, eu vou dizer criança. E para a criança,
vamos adicionar uma coluna. Nessa coluna, temos filhos. E vamos rolar
isso um pouco. Nessas crianças, a
primeira coisa que
teremos é um botão elevado. Manteremos essa prancha por
enquanto e, na criança, adicionaremos um campo de texto
chamado Escolha a data Um ventilador seguro. Agora você pode ver que temos
o botão de escolher data. Então, depois disso, o que
vamos fazer é adicionar uma
caixa de tamanho com uma largura de oito. Em seguida, adicionaremos outro botão
elevado. E para este, chamaremos
um widget de texto e chamaremos isso de tempo de clique
e salvaremos isso Você pode ver que veio
um abaixo do outro. Então, queremos isso
ao lado do outro. Então, o que podemos fazer é pegar esses e eu vou cortar isso. Vou adicionar um widget
de linha aqui. E dentro disso, vou
colar meu botão elevado. Então, agora eles virão
um ao lado do outro. Então, uma vez
feito isso, depois da linha, vou adicionar uma
caixa de tamanho com uma altura de oito. E então eu vou
adicionar um campo de texto. Você pode ver, temos
o campo de texto aqui. Para esse campo de texto,
vamos definir uma decoração. Isso vai ser decoração
de entrada. E adicionaremos um
rótulo para isso, e esse rótulo
será o título. E vamos salvar isso. Eu posso
ver que temos o título lá. Vamos adicionar uma caixa de outro tamanho. Vou copiar
isso e colar aqui. E agora vamos adicionar
outro campo de texto. Um campo de texto. Eu vou
dizer decoração, inserir decoração e
vamos definir o rótulo. Como conteúdo. Eu digo que
posso ver que entendemos isso. Mas queremos que
o conteúdo seja completo. Então, para isso, o que
faremos é
agrupá-lo com um widget expandido OK. E aqui, vamos dizer
que expande é verdade E então vamos
dizer que as linhas Mx são nulas. Agora você pode ver que
temos isso em altura total. Não queremos essa
borda na parte inferior. Então, para isso, o que podemos
fazer é dizer pó. Uma entrada, a borda é nenhuma. Então, agora essa borda sumiu, e queremos que esse rótulo de
conteúdo se alinhe com o título aqui Então, o que podemos fazer aqui é dizer alinhar rótulo com dica Vamos definir isso como verdade. Salve isso e isso voltará
ao topo. Tudo bem. Agora temos botões
para escolher data e hora. Temos uma roda de texto para o título e uma
roda de texto maior para o conteúdo. A interface do usuário é limpa, simples e já é muito utilizável No momento, esses botões
não fazem nada, e está tudo bem. Estamos separando intencionalmente
a interface do usuário e a lógica, para que as coisas não fiquem Na próxima lição, adicionaremos a lógica para abrir o seletor de data,
abrir
o seletor de hora
e lidar adequadamente com a manhã e a tarde E é aí que a tela
se torna totalmente interativa.
7. Adicionando a funcionalidade de selecionador de data: Tudo bem. Agora vamos adicionar algumas funcionalidades
ao nosso seletor de datas Primeiro, dentro da
data do ad node que está aqui. Vamos criar uma variável para
armazenar a data selecionada. Por isso, chamaremos
isso de data e hora. Eu chamo isso de data selecionada. Estamos usando a data e hora
anulável porque, no início,
nenhuma data é selecionada Agora vamos criar uma função
para abrir o seletor de data. Essa função
retornará um vazio futuro. Isso significa simplesmente que essa função
será executada de forma assíncrona e só será concluída
após o usuário escolher a data Agora, depois dessa variável,
podemos dizer vazio futuro. E aqui vamos dizer a data de escolha. E aqui vamos
chamar isso coletor e criaremos
uma variável chamada e ela
aguardará a exibição do seletor de data E deixe-me fechar isso.
Agora, a primeira coisa que
precisaremos é de uma data inicial. Vou dizer data inicial, e vou definir isso como ponto de
data e hora agora A data inicial
será a data de hoje. E para a primeira data, vamos definir isso para 2001, e para a última data, vamos definir isso para 2.100 Agora, aqui, precisamos
criar a declaração FML. Diremos que I Picked não
é igual a não. Então, podemos definir o estado. Chame isso de datas selecionadas
iguais a, então vamos salvar isso. Agora, vamos conectar essa função
à nossa função de data PIC. Se você rolar para baixo,
verá que temos esse botão chamado Pig
date e vamos substituí-lo por Pig Vamos economizar. Agora, se
eu clicar na data do Pig, você pode ver, obtemos esse
lindo Alcon, tudo bem. Então,
nada aparece aqui. E tudo
bem, porque agora a data está armazenada, mas ainda não está visível. Vamos exibir a
data selecionada dentro do botão. Para fazer isso, o que podemos fazer é nos livrar desse texto aqui,
e aqui vamos dizer que se a
data selecionada for igual a nula, então podemos dizer Se não for nulo, teremos que
exibir algo, certo? Então, aqui, vamos
exibir a data selecionada.
E vamos salvar isso. E aí temos a
data padrão que selecionamos. Agora, se você
observar essa pré-trama, notará
que
a data aparece, mas é um formato longo e confuso. Nós não queremos isso. Só
precisamos de dia, mês e aqui. Vamos formatar isso manualmente. Então, para isso, o que
vamos fazer é aqui, vamos dizer o dia D. Se eu disser isso, você
pode ver, diz quatro. Agora vamos adicionar
um separador aqui. E então ligaremos novamente para a
mesma coisa que está selecionada (data e
mês). Guarde isso. Eu posso ver que temos um
porque é janeiro. Em seguida, vou colocar
outra barra frontal
e, em seguida, diremos que a
data selecionada feita aqui diz 41 2026 A data agora está limpa, legível e exatamente
o que queríamos Ainda não está muito bonito, e tudo bem. Aperfeiçoaremos a interface do usuário mais tarde. Por enquanto, o importante
é que o seletor de data funcione, a data selecionada seja armazenada e esteja visível na interface do usuário Na próxima lição,
adicionaremos o seletor de horário.
8. como adicionar uma funcionalidade de selecionador de tempo: Tudo bem. Agora vamos adicionar a funcionalidade
do seletor de data Primeiro, dentro do estado do ad node. Isso está aqui. Criaremos uma variável para
armazenar a data selecionada. E para isso, chamaremos isso de hora do dia e definiremos isso
como horário selecionado, salve isso. Assim como a data,
isso é anulável porque nenhuma hora é
selecionada no início Agora vamos criar a função
que abre o seletor de horário. Então, depois da função de seleção de
data aqui, vamos dizer futuro vazio, essa será a hora da escolha E vamos chamar isso de pia. E aqui vamos dizer que a escolha
final é igual a um peso. Mostrar seletor de horário. E
deixe-me fechar isso. E aqui, a
hora inicial é a hora do dia.net. E depois disso,
vamos dizer que eu escolhi não é igual a não. Em seguida, diremos estado definido Digamos que o tempo selecionado
seja igual ao Digamos que sim. Em seguida, conecte essa função ao botão PiT, que temos aqui, e chamaremos essa escolha de Hora. Se eu clicar em Escolher hora, você pode ver que temos
a hora aqui e você notará
algo estranho. O horário da escolha parece um pouco estranho. Mostra as 12 horas
e as 24 horas. Esse problema geralmente ocorre
nas plataformas de desktop. No Android, ele funciona
bem por padrão. Vamos corrigir isso para que funcione
corretamente em todas as plataformas. Se você voltar para o topo, temos esse horário de escolha e o
atualizaremos para este. Então, o que
faremos é dizer construtor aqui, retornaremos
uma consulta de mídia. E para os dados, você
verá a consulta de mídia, d desligada, largura da cópia por pontos. Então, diremos que usar sempre o formato de
24 horas é
falso. Eu vou economizar. E agora vamos escolher a hora novamente. Agora, o time pickle também parece
correto no Windows. Em seguida, vamos exibir a
hora selecionada dentro do botão. Vamos clicar em K
e rolar para baixo, e aqui temos a hora de escolher. Então, aqui, vamos dizer que o
tempo selecionado é igual a não. Então vamos
dizer hora de escolha ou então, vamos dizer hora selecionada em
dólar. E se eu disser isso, você
pode ver que diz apenas hora do dia e mostra
o formato de 24 horas. E podemos fazer a
mesma coisa aqui. Então, o que podemos fazer é dizer hora, eu guardo isso. Você pode ver que diz 14, então podemos dar uma coluna
aqui. Vamos abrir outro. Vou dizer hora selecionada, ponto e
minuto, e vamos salvar isso. Você pode ver que mostra o minuto. E agora precisamos
exibir a coisa do AMPM. Então, aqui, vamos
dizer apenas o horário selecionado. Mas esse período, nome do ponto. Guarde isso. Agora você pode
ver se é AM ou PM. Agora, a hora selecionada é
exibida corretamente e tudo funciona conforme o
esperado. Mas observe uma coisa. Só para lidar com data e hora, já
estamos escrevendo muita lógica diretamente na interface do usuário. Isso funciona, mas não está limpo e não queremos um código confuso. Na próxima lição, criaremos um método auxiliar que
limpa a lógica,
melhora a formatação e torna nosso código de interface de usuário
muito mais fácil É aí que nosso código começa
a parecer profissional. A
9. Limpeza da lógica de data e tempo: Tudo bem. Agora é hora de
trazer os ajudantes Antes de começarmos, há algo importante que você
precisa entender. Até agora, temos usado a
hora do dia para armazenar o tempo. Isso funciona bem para a interface do usuário, mas a hora do dia é do
tipo de pluto e não pura hora. E mais tarde, quando usarmos o Hive, ele não suportará
a hora do dia Então, em vez de armazenar
a hora como hora do dia, vamos convertê-la em data. Por que
não fizemos isso antes? Porque antes estávamos
apenas criando a interface do usuário. E agora estamos preparando o aplicativo para conversar com o banco de dados.
Essa é a diferença. Então, primeiro, vamos
abrir o pub spect dot YAML. E nas dependências, vamos adicionar entel,
vamos rolar para baixo Vamos encontrá-lo. Isso está
aqui, e vamos guardar isso. Isso permitirá que o
flutter conserte o pacote. Em seguida, precisamos
criar o ajudante. Então, dentro da pasta lib, vamos criar
outra pasta Vou chamar
isso de ajudantes. Dentro disso,
vou criar um arquivo chamado daytime helper Ponto, ponto. E vamos coapses.
Então, a primeira coisa que faremos aqui é
importar esse pacote. Isso é int. Agora, o que
precisamos é de uma corda. Ok, e isso vai
ser formato, data. Isso incluirá data e
hora como um tipo de data
e, em seguida,
retornaremos um formato de data. E o formato de data que
queremos retornar é dia, mês, seguido
por Ca e ano. E queremos formatar
isso com a data. Vou guardar isso. Agora vamos
criar outro ajudante para o tempo. Essa é a hora do formato da string. E em vez de
tomar a hora do dia, vai demorar a hora do encontro. Chamaremos isso de hora. E aqui vamos criar uma variável para obter
a hora atual. Para isso, diremos que
agora namore para agora. E então obteremos a data atual,
na verdade, a hora atual. E isso vai ser
data e hora, agora ponto aqui, agora ponto, ponto,
mês, agora ponto dia. E então é aqui que
as coisas mudam. Queremos hora, ponto, hora, e depois queremos
hora, ponto, minuto. OK. Em seguida, precisamos retornar
esse formato de data de devolução. E o formato que queremos é nosso minuto e aquela coisa de AMPM E aqui, vamos dizer formato, hora
atual, vamos salvar isso. Essas funções auxiliares manterão nosso código de interface de usuário limpo e legível Agora vamos voltar a adicionar node dot dt e vamos
importar esse auxiliar Então, aqui, vamos dizer pacote de
importação, planejador
diário, então temos
aqui ajudantes, ajudantes diurnos Agora, vamos
primeiro atualizar a data do PIC. Então, tudo que você precisa fazer é
ligar até o fim, e você pode ver que este
é o PiTate, certo? Então, o que podemos fazer é você
se livrar de tudo isso. Ok, e não
precisamos desse também. Também podemos nos livrar desse. E diremos que formatamos a data e
a data é a data selecionada. Guarde isso e veja isso. Temos esse lindo encontro agora. E vamos fazer a mesma
coisa com o tempo também. Agora, antes de fazer isso, precisamos alterar o tipo de variável. Então isso vai
se tornar data e hora. Agora também precisamos atualizar o horário de seleção,
que está aqui. Você pode ver que já
temos um erro. Então, o que vamos fazer
aqui é dizer que o
final agora é igual à final agora é igual à data hora ponto N. E aqui, a hora
selecionada será a data hora, e isso será agora o ponto ano, agora o ponto mês, agora o ponto dia,
e então escolhido o ponto hora e o ponto minuto escolhido
e salve Agora, vamos rolar
até nosso seletor de horas aqui Eu vou me
livrar desse. E aqui vamos dizer que o tempo de quatro
minutos é o tempo selecionado. E digamos isso.
Novamente, ela diz, hora do dia não é um
subtipo de data e hora, certo Então, o que
podemos fazer aqui é simplesmente atualizar isso. E agora você pode
clicar nessa nova nota. Vamos escolher a data. Vamos escolher a hora e ver isso. Agora, ele mostra a
hora corretamente. Ótimo. Agora temos formatação de data
limpa, formatação de hora
limpa, tipos de
dados amigáveis ao banco de dados e um código de interface de usuário muito mais limpo Na próxima lição, pegaremos esses dados e os
armazenaremos dentro de um modelo. É aí que tudo
começa a se encaixar.
10. Criando o modelo de nota e validação: Tudo bem. Agora vamos criar um modelo para definir como
nossos dados serão armazenados. Vamos abrir a pasta lip e aqui criaremos
outra pasta. Vamos chamar isso de modelo. Na verdade, serão
mais cargas. E dentro disso,
vamos criar um arquivo chamado note dot dot. Agora, aqui, vamos criar uma classe. Nota chamada. E dentro disso, vou dizer a sequência final. E a primeira coisa
que precisamos é o título. Vamos
criar outro. Isso também é uma string, e chamaremos isso de conteúdo. Em seguida, vamos
criar outra variável, que
será data
e hora. E isso vai ser um encontro. Vamos criar outra variável. Essa também será a data e
hora chamada hora. Agora, você vai
criar um construtor,
então observe que, dentro disso,
diremos que exija
esse título de cachorro Exigiu esse conteúdo de pontos, exigiu essa data de ponto, exigiu essa hora de ponto.
E vamos salvar isso. Essa classe de nó representa
uma única entrada do planejador. Cada nó tem um título, um conteúdo, uma data e uma hora. Agora, mais tarde no aplicativo, agruparemos as notas por data Para isso, precisamos apenas da parte da
data sem a hora. Então, vamos adicionar um getter. Então, logo após esse construtor, diremos data e hora,
obteremos somente a data Vou chamar isso de
data e hora S, data, ponto aqui,
data, ponto, mês e data,
ponto, dia. Vou guardar isso. Isso torna o agrupamento
muito mais fácil para mais tarde. Agora, vamos voltar
para não adicionar pontos. Neste momento,
já temos data,
hora, campo de título
e campo de conteúdo. Mas ainda não temos a
validação. Vamos consertar isso. Então, se você rolar até aqui, o que você
vai
fazer é criar uma função. Vou chamar essa
função como adicionar nota. E aqui vamos dizer que eu selecionei a
data é igual a não. Então vamos dizer que
é scaffold messenger, ponto F mostra a lanchonete Ele conterá um const
chamado Snack Br com um widget de texto e chamaremos
isso quando a data for obrigatória, e mais ou menos. Então, vamos devolver isso. E então vamos adicionar outro. Vou copiar isso, colar aqui,
e esse será
o horário selecionado. Vamos apenas mudar a
data e a hora, exceto isso. No momento, não podemos ler os valores do
título e do conteúdo. Então, vamos
adicionar esses controladores. Então, aqui, logo após
essa data e hora, vou dizer controlador final de edição de
texto. Vou chamar isso de título. Mas e disse isso também, controlador de edição de
texto. E vamos duplicar isso, e isso se
tornará conteúdo sublinhado Digamos que sim. Como os controladores armazenam
memória, devemos descartá-los. Então, para isso, vamos dizer
tudo bem, descartar, e então vamos
descartar título, ponto, descartar e conteúdo
ponto, descartar Agora precisamos atualizar
os viels de texto. Então, rolamos para baixo, este
é nosso primeiro campo de texto. Então, aqui, tudo o que
precisamos fazer é dizer que o
controlador é o título do sublinhado E para o próximo, que é
controlador, está o
conteúdo sublinhado. Vamos guardar isso. Agora,
atualize a função do ad node. Se rolarmos
até o topo, você tem isso. Vou copiar
esta página aqui, e precisamos nos
livrar dessa. Diremos título,
o texto está vazio e haverá título. E vamos copiar isso
e colar novamente, e agora isso
se tornará conteúdo. E isso será um conteúdo.
Vamos guardar isso. Se toda a validação for aprovada, precisamos criar uma
nota para devolvê-la. Então, para isso, o que
faremos aqui é dizer navigator dot pump Ok. Agora, para criar essa nota, tudo o que preciso fazer é
digitar a nota. E veja aqui, obtemos essa
nota do modelo. Clique em Ender. E você pode ver
que ele preenche os detalhes Então, precisamos adicionar o título. Então esse é o texto do ponto do título. E para este, esse é o texto pontilhado do
conteúdo,
e para a data , será selecionada a data
e, para a hora, será
selecionada a hora e a salvará. Agora, a única coisa
que precisa ser atualizada é nosso botão de ação flutuante, que está aqui. Então, o que vamos fazer é livrar desse
e adicioná-lo para adicionar uma nos livrar desse
e adicioná-lo para adicionar uma nota. Agora, vamos verificar
isso um por um. Se eu clicar em salvar, posso ver que o
título é obrigatório porque a data e a hora já
estão selecionadas. Então, vamos preencher os detalhes. Vou chamar
isso de nó um. Vamos clicar em salvar, diz que
o conteúdo é obrigatório. Então, eu vou dizer nó um. Conteúdo, salve-o e ele nos
levará para a tela inicial. Bem, estamos enviando
os dados com sucesso, mas ainda não conseguimos vê-los. Isso porque a
tela inicial não sabe como exibir essas notas Na próxima lição, criaremos a lógica
da tela inicial
para receber notas, agrupá-las por data e
exibi-las em uma É aí que tudo
se junta.
11. Como exibir notas na tela inicial: Ok, agora é hora de
trabalhar em nossa tela inicial. A primeira coisa que precisamos é de
um local para guardar nossas anotações. Abra o ponto da tela inicial e role até o estado da E aqui, criaremos um
vídeo chamado lista final. E nessa lista teremos um tipo. O tipo é o
tipo de nó que criamos, e ele vai conter notas, e isso vai
ficar vazio por enquanto. Essa lista conterá todos os nós provenientes
da tela de adição de nós. Agora, vamos atualizar o botão de ação
flutuante para que ele
possa receber os dados quando voltarmos
da tela Adicionar nó. Então, se
rolarmos até o fim, você pode ver aqui que temos isso na prensa e aqui está escrito uma pia. E eu vou pegar
tudo isso, cortar isso, e vamos dizer uma nova nota final e vamos configurá-la
para evitar e paginar isso. E vamos verificar isso. Então, se a nova nota
não for igual a null, podemos dizer set State
underscore nodes dot add, vamos adicionar o novo Vamos guardar isso. Então, o que está acontecendo aqui?
Abrimos a tela de adição de nó, esperamos que ela
retorne os dados
e, se o nó for retornado, nós o adicionamos à nossa lista. Como queremos agrupar
os nós por data, usaremos um pacote. Vamos para o Pubspec dot YAML. E aqui nas dependências, vamos adicionar
outro pacote Vamos chamar isso de lista
agrupada e salvá-la. Agora, de volta à
tela inicial, ponto ponto, vamos adicionar um corpo
ao nosso andaime Está aqui,
diremos corpo. E diremos que se as
notas dt
estiverem vazias, criaremos uma const com um Wichet central que
terá
um filho
com o texto Wichet que diz que nenhuma nota Ok. Agora, se os nós forem adicionados, mostraremos
uma lista agrupada E você pode ver que ele já
absorve algumas coisas, mas antes disso,
precisamos adicionar o tipo. Então, o tipo que queremos é nota, e queremos data e hora. Os elementos que ele
procurará são notas. E então queremos agrupar
isso por data, certo? Então, onde está
localizada essa data está dentro das notas. Então, aqui, vamos dizer
nota e, em seguida, vamos dizer, anote somente essa data. Agora precisamos
criar o construtor de separadores. O construtor de separadores.
O construtor de separadores receberá um valor O valor é data, e ele exibirá
um preenchimento com uma
borda e definirá 16 e, em seguida,
terá um filho com um texto,
e esse texto formatará a
data com a data Vamos guardar isso. E, finalmente, o que precisamos é de um construtor de itens. E esse criador de itens
será a nota. E o que podemos fazer aqui
é
retornar o bloco da lista aqui. E o estilo de lista, por
enquanto, tem um título com um widget de texto chamado note
dot title. Vamos guardar isso. E agora, antes de adicionar mais
detalhes, vamos testar isso. Vamos continuar e
reexecutar o aplicativo. Agora vamos criar uma nota aqui. Vamos selecionar a data e a hora. Chamamos isso de nota um. E aqui vai dizer o conteúdo
do nó um. E vamos salvar isso. E veja, recebemos a nota separada por
data. Perfeito. O agrupamento funciona Agora vamos melhorar a aparência da
lista. Dentro da trama de listas agrupadas, você pode ver que temos
essa coisa de data, que na verdade é formatação Então, o que podemos fazer
aqui é dizer estilo. Vou chamar
o estilo de texto, defina
a espessura da fonte para a
espessura da fonte W 500. Ok, então vai
parecer grande lá. A próxima coisa aqui no bloco, vamos adicionar a cor
do ladrilho. Portanto,
a cor deve ser um pouco mais clara para que também possa
funcionar facilmente com o modo escuro. E para isso, o que
vamos
fazer é para a cor do ladrilho, vamos dizer esquema de cores fino Dart off
dot, recipiente de superfície E veja, temos a cor
cinza claro ali. Em seguida, vamos adicionar essa legenda. Então, diremos que a legenda
será um widget de texto. E aqui vai ser o ponto
de nota T. Agora, a hora do ponto do nó
tem que ser formatada Então, vamos dizer a hora do formato, que é a hora do ponto do nó. Você pode ver que vemos
a hora lá. Vamos torná-lo um pouco menor. Então, o que podemos fazer aqui
é dizer estilo, estilo de texto, tamanho do telefone. Vou definir isso para 12. Então, isso vai
torná-lo um pouco menor. Agora vamos adicionar um botão de exclusão. Depois da legenda, diremos botão do ícone
final quando pressionado, vamos
deixar isso por enquanto E para o ícone, diremos ícone,
ícones, ponto, excluir. Vamos guardar isso. Também temos o botão de exclusão. Agora, vamos tornar isso viável. Então, o que podemos fazer aqui
é dizer definir data, remover
o ponto do nó
e
remover a nota. E deixe-me custar isso. Vamos testar isso. Vou
clicar aqui Excluir, e isso
removerá a nota. E quando
não houver nada lá, ele dirá que ainda não há notas. Ótimo. Tudo agora funciona. Agora podemos adicionar uma nota, podemos excluir uma nota. Podemos adicionar notas em datas
diferentes. Tudo
funciona perfeitamente. Suas notas agora estão
agrupadas por data, exibidas de
forma clara
e totalmente Na próxima lição, criaremos a tela de edição de notas para que
os usuários possam atualizar
os nós existentes.
12. Editando notas reutilizando a tela Adicionar nota tópicos: Tudo bem. Agora vamos trabalhar na parte de edição do nosso
aplicativo. A ideia é simples. Quando um usuário toca em um nó, queremos abrir a tela
Editar nó Mas antes de fazer isso,
precisamos primeiro de uma tela de edição. Agora, aqui está a
parte divertida. Não precisamos criar uma nova
tela do zero. Já temos uma tela de
adição de nós e ela faz quase
tudo o que precisamos. Então, tudo o que precisamos fazer é adicionar Node dot, dot, dot, e então só precisamos
duplicar isso, e chamaremos isso de
dit, note dot, dot Vou guardar isso. Agora, se você simplesmente
rolar até o fim, só
precisamos
atualizar algumas coisas. Então esse é o que
vai ser editado. Nota. OK. E então
vamos pegar esse. Vamos mudar isso
para Editar estado do nó, e a mesma coisa acontece aqui. Guarde isso. Agora, se
rolarmos um pouco para baixo, você pode ver que temos esse título. Vou mudar isso para
Editar nó. Guarde isso. E também, aqui estamos
adicionando o nó, certo? Então, vamos chamar isso de edição. Nota. Agora role
até o fim, altere isso para editar,
observe. É isso mesmo. Agora vem a parte mais
importante. Quando tocamos na nota, queremos que o conteúdo, a
data e a hora do título sejam enviados da tela inicial para
a tela de edição. Podemos fazer isso facilmente passando a nota
pelo construtor Para isso, se você rolar
até aqui, o que você vai
fazer é
criar uma variável com
uma nota de tipo chamada nota. OK. E aqui, diremos que
é necessária essa nota pontual. Agora, precisamos preencher previamente a interface
do usuário com os dados do nó
existente Então, dentro do estado do nó de edição, o que faremos aqui é
logo depois disso, tudo bem descartar à direita nesse estado E aqui precisamos nos
livrar desse comentário e vamos
dar alguns detalhes. Então, temos o título aqui. O texto terá widget
dot node dot title. Então, precisamos do conteúdo, que é um texto, que absorverá o conteúdo ponto e
ponto do Widget A próxima coisa que
precisamos é selecionar a data será o Widget
D sem data de pontos E a mesma coisa para a época também. Então, diremos que o widget
não tem hora de pontos. É isso mesmo. A tela de edição agora mostra automaticamente
os dados existentes. Agora, vamos voltar
para a tela inicial. E agora, se você
rolar até o bloco da lista aqui, poderá ver que temos o final
e depois do final, esse é o botão do ícone, vamos adicionar um botão ao toque Então, ao toque,
queremos executar uma função. Essa função será um coletor e terá uma variável
chamada nota atualizada. E isso evitará o
Navigator Dot Perch. Ok. E seguirá a rota da página
de material
com o construtor,
e o construtor será a nota de edição. E ele recebe o
nó automaticamente, então você não precisa
se preocupar com isso. Agora precisamos verificar isso. Então, diremos que a
nota F atualizada não é igual a nula. Então vamos dizer
definir estado, e vamos criar uma
variável aqui chamada índice, que vai encontrar
o índice
de nós da nota que
será o índice. E então vamos dizer notas, e vamos
encontrar esse índice, e vamos atribuí-lo
à nota atualizada. E vamos salvar isso.
Agora vamos testar o aplicativo. Vamos até aqui.
Ao clicar em novo. Vou escolher uma data.
Vou escolher algum horário. Vou chamar isso de
Node 1, Node 1, conteúdo. Ao clicar em salvar. Você pode ver
que recebemos aquela nota uma, e vamos adicionar outra
data, na verdade. Então, para definir isso para o dia seguinte. O tempo será seis, e chamaremos isso de nota dois. Anote dois conteúdos. E vamos salvar
isso. Eu posso ver que temos duas notas agrupadas por data E só para testar, vamos adicionar outra data para hoje. Então, vamos adicionar isso
aqui com um horário diferente agora. Vou chamar
isso de nota três. Nota três. Conteúdo. E vamos salvar isso. Tudo bem, é um agrupamento.
Agora você pode ver, na verdade, podemos passar o mouse sobre dois Isso porque
habilitamos a guia On. Agora vamos atualizar a nota 1. Vou chamar isso de datado. Ao salvar C, você pode
ver que diz atualizado. Agora vamos atualizar o nó três, conteúdo. Diremos atualizado. Vou alterar a
data e hora, na verdade, para
18h . Digamos que isso e você
possa ver que mostra 18h. Está atualizado. Além disso, você pode ver o
conteúdo atualizado aqui. Assim, temos um aplicativo totalmente funcional que pode adicionar notas, editar nós, excluir notas e agrupá-las por data. Isso completa a primeira parte
do nosso aplicativo real. Na segunda parte,
passaremos para o
lado do banco de dados. Na próxima lição, você
aprenderá como usar o hive
para armazenar esses dados localmente
e torná-los persistentes
13. Como integrar o tema de aplicativo Hive e Persistent: Tudo bem, é hora de integrar o
Hive em nosso projeto. Ele nos ajudará a armazenar dados localmente, mesmo depois
que o aplicativo for fechado. Para adicionar o Hive, o que podemos fazer é a primeira coisa e acessar o PubSak
dot E então, nas dependências, primeiro
adicionaremos o Hive Ok. E então
vamos adicionar o Hive flutter e Agora, vá para o ponto principal dr. E, na verdade, vou
fechar todos esses arquivos para que você possa ver melhor
e entender isso melhor. Ok, então dentro
do Dot tart principal, já que o Hive precisa de uma inicialização
assíncrona, atualize a Vamos definir
isso como assíncrono. E o que podemos fazer aqui
é, logo após este, dizer que os widgets flutter
binding dot Ok. E então usaremos uma colmeia
inteligente agora em um tipo de colmeia, certifique-se de selecionar
a vibração da colmeia Ponha nele, flutter.
Digamos que sim. O que isso faz é
garantir que os
widgets de vibração O Hive está pronto antes
do início do aplicativo. Agora, antes de executar o aplicativo, vamos abrir uma caixa do hive para
armazenar as configurações do aplicativo Então, logo depois disso,
vamos dizer espere,
colmeia, caixa aberta, e chamaremos essa caixa de
configurações. Vamos guardar isso. Agora nossa caixa de configurações
está pronta para uso. Agora, precisamos
ouvir as mudanças na colmeia. Então, dentro do Mapp, precisaremos atualizar
esse widget totalmente construído Então, o que podemos fazer aqui é
criar uma variável. Vou chamar
isso de caixa de configurações. E aqui, vamos pegar aquela
caixa que criamos. Isso é hive dot Bx e
o nome da caixa é settings. Guarde isso. Eu posso ver que mostra um erro
que está completamente correto. Agora, em vez de executar diretamente o aplicativo de material aqui, vamos envolvê-lo com um construtor de
valores escutáveis Isso permite que nosso aplicativo seja reconstruído automaticamente quando os dados do
hive mudarem Então, o que faremos é pegar todo
esse aplicativo de material e
cortar isso. Ok, não exclua, corte. Agora, o que podemos fazer é digitar o valor
listenable Builder E aqui neste
valor listenable, vamos considerar
a configuração sparks e
defini-la Ok. E aqui, o construtor vai
definir isso para este. Então, aqui, o valor é uma caixa
e o filho não é nada, então vamos simplesmente
ignorar essa parte aqui, e aqui precisamos
retornar algo. Então, o que vamos fazer é
voltar agora colar o aplicativo de material
que você cortou antes. Está bem? Então, agora vamos dizer isso. Agora, estamos devolvendo o aplicativo de
materiais, certo? Antes de devolver
esse aplicativo de material, vamos ler um valor
da colmeia. Então, dentro do construtor ,
que está aqui,
vamos criar uma variável. Essa variável final é escura. Ok. E quando eu pego a caixa, esta é a mesma caixa
que adicionamos aqui. Está bem? Isso é box dot get, e nós vamos obter um valor. É toque. Agora, isso não existe.
Estamos adicionando isso. Está bem? E o valor por
padrão será falso. Ok. Agora, precisamos atualizar o aplicativo de materiais para
oferecer suporte aos dois temas, o tema claro e
o tema escuro. Agora, você pode ver aqui que já escrevemos o tema light, certo? Então, agora precisamos
escrever o tema sombrio. Ou seja, o
material de uso de dados três é verdadeiro. Então, podemos dizer que o esquema de cores é o esquema de cores da semente, digamos que as cores são azul e o
brilho é o ponto escuro. Ok. Agora vamos definir
o modo do tema. Então, o modo temático aqui,
vamos verificar. É escuro. Se for verdade, vamos dizer que
o modo, não escureça. Se for falso,
vamos dizer o modo, não acenda. Guarde isso. Agora vamos reexecutar o aplicativo. Então, vamos refazer isso aqui. Eu posso ver que ainda mostra um erro. Isso porque isso está armazenando alguns dados extras
que não queremos. Então, em vez disso, vou iniciar o aplicativo em execução e executar
novamente todo o aplicativo. E agora temos esse aplicativo. Então, o que
podemos fazer é colocar isso aqui. Agora, por padrão, o aplicativo
padrão está configurado para cair. Então, cai significa tema claro, então está nos mostrando
o tema claro, mas não vemos nenhum
erro no momento. Na próxima lição,
adicionaremos um botão de alternância para os usuários
possam alternar entre tema
claro e o tema escuro, e armazenaremos essa
preferência no
14. Adicionando um tema persistente: Tudo bem. Agora, tudo o que precisamos é um botão para alternar entre o modo claro
e o modo escuro Como a lógica do nosso tema
já está no Hive, essa parte é realmente
muito simples Agora, a partir daqui, precisamos ir até o ponto da
tela inicial e
rolar até o topo E dentro desse
método de construção ou aqui, primeiro, precisamos acessar
a caixa de configurações e depois ouvir suas alterações. Então, o que vamos
fazer aqui é dizer final, chamar isso de caixa de configurações. Isso vai ser Hive. E vamos obter essa caixa chamada configurações como horário de fechamento. E você vê
todo esse andaime, nós vamos pegar todo
esse Vou cortar isso,
não deletar, mas cortar. Eu direi value listenable
builder settings box dot listenable E o construtor será uma caixa com uma criança. E então vamos
devolver esse andaime. Role até o topo. Ok, então este é o andaime
que estamos devolvendo. Agora, antes de
retornarmos isso, precisamos verificar se
o modo escuro existe. Então, vamos dizer que final é escuro, e vamos
dizer box dot get, e estamos ficando escuro. E o valor padrão é falso. Então, vamos garantir
que esse nome seja o mesmo
que definimos aqui. Está bem? Então esse é o mesmo nome. Então, agora o que precisamos fazer é
criar apenas um botão Então esse é o botão. Ok, então precisamos
adicionar um botão. Então, aqui, eu vou
chamar isso de ações, e dentro disso, vamos
dizer botão de ícone. O que ficará em branco por enquanto, e definiremos o ícone como
ícones para atualizar por enquanto Agora, dentro desta prensa,
diremos box dot, mas para obter um valor aqui primeiro. Esse é o As dark. E o valor não é
ADRC, exceto isso. Veja, não há um estado definido aqui. Ok, agora, se eu clicar aqui, podemos alternar entre o modo
claro e o modo escuro. Precisamos alterar o ícone com base nos dados
que temos aqui. Então, o que
podemos fazer é nos livrar disso
e dizer que, se o Etok for verdadeiro, vamos dizer
ícone com pontos no modo claro ou podemos dizer ícones
no modo escuro Salve isso e você pode ver, temos aquela coisa do
modo claro, do modo escuro. Ok, então vamos
colocar isso no modo escuro agora
porque, por padrão, ele estava configurado para o modo claro e vamos parar o aplicativo. Está bem? E vamos voltar para casa e
ler sobre isso novamente. Agora, como é persistente
, já deve estar no modo escuro. E lá vamos nós. Está no modo escuro. Isso significa que nossos dados agora
são persistentes. Então, o que está acontecendo
aqui? Lemos o valor escuro de Es no Hive. Quando o botão é pressionado,
alternamos o valor. Hive notifica os ouvintes, o aplicativo
Material reconstrói o aplicativo Material é reconstruído automaticamente O Hive notifica os ouvintes, o aplicativo
Material reconstrói o aplicativo Material é reconstruído automaticamente
. O tema muda instantaneamente. E como o Hive armazena
o valor localmente, a escolha do tema persiste mesmo
depois de reiniciar E assim,
agora temos um alternador de temas persistente
em nosso aplicativo Na próxima lição, abordaremos o verdadeiro poder do Hive. Criaremos uma caixa complexa e começaremos a armazenar nossas
anotações permanentemente.
15. Criando adaptadores de colmeia para o modelo de nota: Tudo bem. Agora é
hora das coisas reais. Até agora, temos armazenado valores
simples no Hive, como barras por tema. Mas nosso modelo de nós contém
vários tipos de dados. Sim, poderíamos armazenar
tudo de forma dinâmica, mas por que fazer isso quando já
temos um modelo fortemente
digitado, certo? Para armazenar objetos personalizados no hive, o Flutter precisa entender
sua estrutura Para isso, usamos adaptadores de colmeia. Agora, o que podemos fazer aqui
é que, em vez de escrever o adaptador de colmeia para nós mesmos,
podemos gerá-lo Vamos para perp spec dot YML. E nas dependências de desenvolvimento, vamos adicionar o Hive, gerador de
sublinhados E então adicionaremos o build
Runner. E vamos salvar isso. Agora, você vê que
receberá esse erro. O erro basicamente diz que essa versão não é compatível
com o gerador de colmeia Então, teremos que
mudar para 2,4 0,13. Vamos fazer
isso. Eu vou dizer 2.4 0.13, e vamos salvar isso Sim. E agora esse código de erro é zero, então não
temos nenhum erro. Vamos fechar isso. Agora,
esses pacotes nos ajudam a gerar o código
automaticamente para nosso modelo. Então, digamos isso. E agora, dentro de nossos modelos, não
temos ponto, ponto. Vamos abrir isso.
E no topo, o que vamos fazer é
importar a colmeia Eu vou dizer pacote de
importação, colmeia. Isso é Hive dot dot. Em seguida,
precisaremos gerar um arquivo. Esse arquivo não será um dardo de
ponto G e vamos salvá-lo. Agora, precisamos atualizar
o modelo da nota. Então, a primeira coisa que
faremos é configurar uma coluna para o
nó principal. Essa é essa. Então, para isso, vamos dizer na colmeia e você pode ver aqui que temos
algo chamado tipo de colmeia Vou definir o tipo de
colmeia como zero. Lembre-se de que sempre
começa do zero. Está bem? E depois disso, precisamos configurar alguns campos. Então, vamos dizer que na colmeia
é um campo e o índice é zero Vou montar outro,
digamos que no Hive Field é um, e esse vai ser no Hive O campo é dois. E então, na colmeia, o campo é três e guarde isso Veja o que isso faz. No Hive, o tipo diz ao hive que este
é um objeto armazenável O ID de tipo
identifica esse modelo de forma exclusiva. O campo Hive define como
cada campo é armazenado. Depois de configurados, Hive sabe exatamente como
serializar e
desserializar Agora, precisamos
abrir o terminal. E a partir daqui, vou
para o prompt de comando. E agora precisamos
executar o corredor construído. Para executar o executor construído, diremos flutter, pub,
run, build, runner, build e, em seguida, pressione
Enter Agora, quando terminar, você verá que o
erro aqui desapareceu Então, agora, se você abrir isso, poderá ver que o arquivo foi gerado. Esse é o seu adaptador de colmeia. Agora, precisamos
registrar esse adaptador. Vamos para o ponto principal,
vou fechar isso. E aqui no topo, depois do init flutter, o que vamos fazer
é dizer Hive Dot Register
e o adaptador que
queremos é anotar um endereço
aqui, e esse é o horário de E removeremos
essa linha extra. Isso faz Hive. Ei,
sempre que você vê uma nota, veja como lidar com ela. Neste ponto, o Hive
entende nosso modelo de notas. O adaptador é gerado
e registrado. Estamos prontos para armazenar
os nós adequadamente. Na próxima lição,
criaremos uma caixa de colmeia para anotações. Armazene notas dentro dele e
carregue-as automaticamente
na inicialização do aplicativo. É aí que a persistência
se torna real.
16. Armazenando notas permanentemente usando o Hive: Tudo bem. Agora, precisamos adicionar outra caixa de colmeia desta
vez para nossas anotações Vamos fazer isso primeiro.
No ponto principal logo após as configurações, adicionaremos outro await Chamaremos isso de caixa aberta de pontos de
colmeia e chamaremos
essa caixa de nós Agora, essa não é uma caixa de
valor única, como as configurações,
portanto, ela contém vários valores. Então, aqui precisamos
especificar o tipo. Então, o tipo aqui é nota.
E vamos salvar isso. Agora abrimos
uma caixa chamada nodes e ela armazena os
dados do tipo note. Agora vamos para o dardo da tela
inicial, que está aqui Porque é aqui que
toda a mágica acontece. Agora, aqui no topo, se rolarmos um pouco para baixo, você pode ver que temos
esse método construído. Dentro desse método construído, logo abaixo da caixa de configurações, vamos adicionar outra caixa de notas
finais. E isso vai
ser uma caixa de pontos de colmeia. E agora este
tem um tipo chamado nota e este se chama
notas. E vamos salvar isso. Se virmos esse erro,
não se preocupe com isso. Agora temos acesso à nossa caixa de notas, que já contém os dados
persistentes Agora, isso é importante. Já temos um corpo de trabalho. Então, em vez de
reescrever tudo, vamos cortar o
corpo inteiro e
mantê-lo em um aplicativo Node ou em outro
lugar seguro Vamos trazê-lo de volta e
substituir as coisas uma por uma. Então, se você rolar para baixo, você
pode ver que temos esse corpo. Vou levar esse corpo
inteiro até aqui. Ok, e eu
vou cortar isso. E abriremos um bloco e eu vou
colá-lo aqui Vamos manter isso seguro. Eu
só vou minimizar isso. Agora, aqui, o que
vamos fazer é chamar um corpo,
e esse corpo terá um construtor de números
sem valor O construtor de números sem valor de
que precisamos agora é o notes BooxTT Está bem? E o construtor
será a caixa, e a criança será
: Oh, vamos ignorar isso por enquanto. E aqui, diremos que volte. E, na verdade, em vez de retornar, o que
podemos fazer é realmente fazer a declaração do INS aqui. Então, diremos que se a
caixa que temos aqui estiver vazia,
produziremos algo. Retornaremos um bate-papo central, que tem uma criança chamada texto, e esse texto dirá que
nenhuma nota foi adicionada ainda. E vamos fechar isso. E agora, se a caixa estiver vazia, precisaremos converter as notas
armazenadas em uma lista. Para fazer isso logo após
a declaração If, o que
vamos fazer é dizer final. Vamos dizer nós.
A lista é igual a, digamos, valores de pontos de px, lista de dois pontos Então, agora todos os valores que
temos dentro deles serão
convertidos em uma lista. Agora vamos trazer de volta
a antiga
interface de usuário da lista agrupada que cortamos anteriormente Então, o que podemos fazer é
simplesmente retornar, e agora podemos acessar nosso bloco de notas e você pode ver
essa trama de listas agrupadas Vou pegar isso e depois
colá-lo aqui. Vou guardar isso. E
vamos minimizar isso. Manteremos
isso aberto para que,
caso ocorra algum erro,
possamos corrigi-lo. Então, estamos agora aqui na trama
de listas agrupadas. Agora vamos substituir
os itens um por um. A primeira coisa que você
verá aqui são as notas. Vamos substituir
isso pela lista de notas. Agora precisamos substituir
a lógica de exclusão. Se rolarmos para baixo, você
verá que a próxima coisa que
temos é o botão do ícone,
que é a lógica de exclusão. Não precisamos mais definir o estado, então vamos nos
livrar disso. Primeiro, precisamos de um
índice para excluir. Então, vamos dizer que as notas
listam o índice da nota. OK. E tudo o
que precisamos fazer é obter a caixa a ser excluída no índice. Vamos guardar isso. Agora, a próxima coisa que
temos é a lógica de atualização. Então, tudo isso está bem, mas aqui está acontecendo a atualização
real. Então, vou me
livrar disso e aqui vamos dizer índice final. É igual a, digamos que as notas
listam o índice de pontos da nota. E então tudo o que precisamos fazer
é colocar um ponto no índice, e o valor que queremos
colocar é uma nota atualizada. E guarde isso. Finalmente, agora precisamos
atualizar o botão de
ação flutuante. Então, aqui está a coisa. Portanto, já temos um
procedimento de trabalho aqui, então tudo o que precisamos fazer é
substituir esse estado definido. Então, vamos nos livrar
desse estado definido. E aqui vamos dizer que o ponto da
caixa de notas adiciona sua nota. É isso mesmo. Agora, vamos executar o aplicativo e você pode ver que
temos um pequeno problema Ok, então este
é inútil agora, então podemos nos livrar dele E agora podemos realmente
executar o aplicativo novamente. Você pode ver que os
erros desapareceram. Nosso modo doc ainda está ativado. Então, agora vamos
testá-lo. Vamos adicionar uma nota. Vou escolher uma data.
Vou escolher um horário. Vou chamar
isso de Node one, node one, content
e clicar em Salvar. Vamos adicioná-lo. Vamos
clicar nesse e chamaremos isso de
atualização ou atualização TD. Basta clicar em salvar,
ele está atualizado e vamos fazer a
mesma coisa aqui. Digamos que atualizado, salve isso
e isso também será atualizado. Agora precisamos verificar
se isso é persistente. Então, vou parar
o aplicativo em execução e executá-lo novamente. Tudo bem, temos o aplicativo e a melhor parte, a nota permanece. Isso significa que é
persistente. É isso mesmo. Substituímos com sucesso o estado de
memória temporário por um alto armazenamento
persistente sem reescrever toda a interface do É exatamente assim que os fatores reais
são feitos. Na próxima lição, adicionaremos um simples botão de alternância onde podemos classificar a lista da
antiga para a mais recente ou vice-versa
17. Classificando notas com o Toggle ASC e DESC: Tudo bem. Vamos fazer
disso nossa lição final. Até agora, nossos nós
estão agrupados por data e estão ordenados em ordem
decrescente por padrão Agora, vamos continuar
e insistir em algo. Então, se você rolar para baixo, desculpe, vamos para a tela inicial. E se você rolar até aqui, você pode ver que temos esse construtor de listas de
grupos. E aqui, vou
adicionar algo,
chamar isso de pedido, e isso será um ponto de ordem de lista
agrupado TSE Ok, agora vamos
adicionar alguns detalhes. Ok, eu vou escolher uma data. Vou adicionar
outra data. Algum tempo. Vou chamar isso de
nota a nota sobre o conteúdo. Eu vou guardar isso.
Vou escolher outra data. Talvez um
anterior do ano passado. Está bem? E deixe-me
entrar em um encontro aleatório. Vou chamar isso de conteúdo do Node
3. Vamos ver. Ok, agora você pode ver que o
mais recente está no topo, o do meio está aqui
e o antigo está aqui. Então, basicamente, é em ordem
decrescente. Ok, então o que queremos agora
é ter um efeito de alternância. Está bem? Então, basicamente,
o que estamos fazendo, na verdade,
estamos
forçando em uma ordem Vamos dar o uso
do controle. Adicionaremos um botão de alternância na parte superior para alternar
entre
o mais novo, ou
seja, a ordem decrescente,
o mais antigo, que é
a Assim como o tema, esse persistente será salvo permanentemente. Reutilizaremos nossas faíscas de configuração
existentes. Armazenaremos um bullin chamado
es DESC que é Es descendente. Se for verdade,
vai descer; se for falso, será ascendente Vamos para nossa tela inicial,
ponto ponto, aqui, onde tínhamos esse construtor de valores escutáveis Vamos adicionar
outro final, e vou chamar
isso de Es DESC Vou definir isso para box dot Get Eu vou
definir isso com os dedos DESC. E o padrão será definido como verdadeiro. E vamos salvar isso. E agora precisamos adicionar o botão de tabela Então, aqui já
temos as ações. Então, logo antes disso, vou adicionar outro, chamado isso de botão de ícone. E vamos deixar isso do
jeito que está agora, e vamos definir o ícone
para ícones com pontos ARR para cima. Vamos guardar isso. Ok, então você
pode ver que temos isso. Agora, dentro disso, o que
podemos fazer é dizer bag DP e vamos
pegar Es DESC. E o valor,
qualquer
que seja o valor que temos para es DESC, vamos simplesmente ir na
direção oposta a esse E aqui, o que podemos fazer
agora é definir isso. Então, aqui podemos dizer que o DESC é verdadeiro. Vamos dizer Icons
Dt, arrow, upward. Caso contrário, na verdade, isso vai
ser como uma seta para baixo. Caso contrário, você pode dizer
ícones, pontos, setas. Para cima, e vamos salvar isso. Tudo bem. Você pode
ver que a neve já foi transferida da nova para a antiga. Está bem? Então, se eu clicar neste, ele passará
do antigo para o novo. Mas nada aconteceu
quando eu clico aqui. Somente a coisa de alternar aconteceu,
nada mudou aqui. Para mudar isso, podemos usar este
dentro de nosso valioso
construtor aqui Então você pode ver
que temos esse, certo? Então, o que
podemos fazer é simplesmente cortar isso e dizer Es DESC, então vamos
colocar esse Caso contrário, vamos
colocar ascendente. Eu guardo isso. Agora isso muda. Então, se eu clicar aqui, você poderá
ver todos os turnos do pedido. Com esse toque final, seu aplicativo agora pode adicionar
notas, editar nós,
excluir nós, agrupar
nós por data, classificar notas nos dois sentidos e
manter tudo localmente Lembre-se
das preferências do usuário, e este é um aplicativo completo de vibração
do mundo real
18. 17 Recapitulação e projeto do curso: Parabéns.
Você acabou de cruzar a linha final e criar um aplicativo de planejamento diário
persistente totalmente funcional usando flutter Ao longo dessa aula,
não criamos apenas uma interface
bonita. Implementamos uma solução de banco de dados
do mundo real. Domine a criação de adaptadores de tipos
personalizados, gerenciamento de
operações coletivas e a criação um tema persistente que
siga a preferência do usuário Esses são os tipos exatos de habilidades
fundamentais, como gerenciar armazenamento
estadual e permanente, que serão transferidas para todos os projetos profissionais de
desenvolvimento móvel que você abordar daqui em diante. Reserve um momento para ver
o que você criou. Agora você tem um
aplicativo funcional que fica no seu dispositivo e lembra
o que você diz Esse é um grande marco em
sua jornada de desenvolvimento. Agora, para seu projeto de classe, quero que você pegue o código
que escrevemos e o
torne seu. Complete o aplicativo garantindo que todos os adaptadores de colmeia estejam registrados e que a
lógica de classificação esteja Quando estiver satisfeito,
faça uma captura de tela ou
uma captura rápida de tela do
seu aplicativo em ação, especialmente
mostrando a opção de tema ou uma
lista bem organizada de notas, e faça o upload para a galeria do
projeto abaixo Ver seu trabalho é a
melhor parte do ensino e ajuda a criar mais
projetos como esse. Eu sou Flosense e foi um verdadeiro prazer
guiá-lo nesta construção Se você achou essa aula útil, deixe um comentário. Isso realmente me ajuda a continuar
criando esses guias para você. Se você quiser se manter atualizado sobre minhas aulas mais recentes e
novos aplicativos, não
deixe de me seguir no Skillshare Até lá, continue programando, continue construindo, e nos
vemos na próxima aula
Flutter Sensei, Teaching Flutter from Scratch
