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 :)