Desenvolvendo um widget de upload com flutter
Oi, muito obrigada por estar aqui, gostaria de informar que esse Ă© o meu primeiro artigo publicado oficialmente aqui no Dev To e que estĂŁo tods convidads a se chegarem e lerem um pouquinho das experiĂȘncias e vivĂȘncias minhas, eu que sou atualmente estagiĂĄria flutter, tambĂ©m sigo atuando como freelancer front end nas horas vagas e uxui por hobby.
Pois bem, apresentada, agora vamos ao que interessa.
Esse foi um dos meus muitos desafios que tive no cotidiano do estågio. Em algum momento precisei desenvolver um widget que fizesse o upload de pdfs e que além disso também tivesse a funcionalidade de drag e drop na årea ao redor.
Para a criação desse projeto, utilizei o seguinte comando:
flutter create --project-name testedropdrag --org br.com.suamirocha --platforms web ./testedropdrag
Dessa forma, fica claro que o projeto serĂĄ feito para web.
Para implementar o widget e deixar ele funcional como eu gostaria, vou utilizar os seguintes pacotes:
ps: encontre os pacotes no site oficial dos pacotes: https://pub.dev
agora que baixei as minhas dependencias, elas ficam assim no arquivo pubscpec.yaml
Agora vamos organizar o projeto.
No meu arquivo Main, vai apenas o principal para rodar a nossa pĂĄgina:
Agora podemos trabalhar na nossa pĂĄgina principal que Ă© onde o nosso widget ficarĂĄ.
A princĂpio o cĂłdigo vai estar assim:
Agora vamos fazer os imports dos pacotes de instalamos no nosso projeto:
Eles ficarĂŁo assim mas nĂŁo se assuste rs
Em relação ao pacote cross _file, ele irå identificar os nossos arquivos, então além de importå-lo eu preciso também instanciar o XFile junto a uma matriz de bytes para ter acesso aos seus métodos e propriedades de metadados.
Vou fazer a importação do Uint8List e aqui vai uma explicação legal sobre isso:
A Uint8List Ă© uma lista de comprimento fixo de inteiros nĂŁo assinados de 8 bytes.
Mas de uma forma simples e divertida, imagine que vocĂȘ tenha um monte de brinquedos diferentes, certo? E Ă s vezes vocĂȘ quer organizar em grupos diferentes e especiais. A UintList8 Ă© como uma caixa onde vocĂȘ pode guardar coisas, mas Ă© especial porque sĂł guarda nĂșmeros pequenos entre 0 e 255.
EntĂŁo nessa linha de cĂłdigo:
final List<(XFile file, Uint8List bytes)> _list = [];
EstĂĄ criando uma lista chamada _list que Ă© uma lista de pares, onde cada par consiste em dois objetos, sendo um o XFile e o outro o Uint8List, dessa forma o XFile representa o arquivo em si e o Uint8List os bytes desse arquivo.
E isso tudo Ă© Ăștil porque em alguns casos vocĂȘ quer acessar tanto o arquivo, quando os seus bytes entĂŁo faz sentido agrupĂĄ-los dessa forma, como Ă© o nosso caso.
Dando continuidadeâŠ
Adicionei essas propriedades para centralizar o nosso widget:
Adicionei o DropTarget(desktop_drop) que cuidarĂĄ dos eventos de drop e drag do nosso arquivo em pdf.
Estilizei o widget como queria e agora vamos deixar ele funcional
Crio um booleano iniciando como falso, para criar um estado no futuro:
bool isHovering = false;
Basicamente essa função basicamente faz a leitura do bytes e os adiciona na _list com o xFiles de forma assĂncrona.
Essa função seleciona um ou mais arquivos essa condição no final quer dizer que se o resultado for diferente de null ele irå selecionar o arquivo e colocar no 'result'
Quando o usuårio soltar os arquivos na årea que escolhi, essa função vai processar os arquivos que foram soltos.
JĂĄ nessa nossa Ășltima função assĂncrona, vamos apenas deletar o par de Xfile e Uint8List que representa o nosso arquivo que fizemos o upload.
Por fim, fiz as alteraçÔes necessårias no nosso widget DropTarget para ligar os estados e deixar a nossa årea funcional.
Mas ainda faltam alguns detalhes..
Agora preciso criar um widget onde mostrarĂĄ meu arquivo quando ele subir ou for carregado, assim saberei que deu tudo certo e posso excluĂ-lo futuramente caso precise.
E essa aqui foi a minha solução para isso, envolvi todo o conteĂșdo do DropTarget em uma coluna e no final adicionei uma fila com icone e texto para representar o meu arquivo.
Enfim, temos o nosso Widget completo do inicio ao fim esse aqui Ă© o resultado final:
Muito obrigada pela atenção đ©”đ©”âïž
Agradecimento especial aos meus chefinhos, ao arthur e lizandra que me inspiraram a fazer o widget, ao pessoal da devs norte que me motivaram a escrever por aqui e muito obrigada a todos os demais que de alguma forma Ășnica contribuĂram para que eu chegasse aqui.
Caso vocĂȘ queira ver o meu cĂłdigo desse tutorial, ele se encontra nesse link: https://github.com/suamirochadev/upload-widget-flutter
ReferĂȘncias:
Top comments (4)
Topzera Suami! =D JĂĄ estou seguindo aqui para acompanhar novos artigos. <3
Muito massa /o/
đ ParabĂ©ns ficou muito bom o tutorial
Ătima leitura Suami, direta ao ponto com exemplos e explicaçÔes. Ansioso pelos seus prĂłximos artigos :)