DEV Community

Cover image for Desenvolvendo um widget de upload com Flutter 🩵
Suami Rocha for Devs Norte

Posted on

Desenvolvendo um widget de upload com Flutter 🩵

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

Package 1

Package 2

Package 3

agora que baixei as minhas dependencias, elas ficam assim no arquivo pubscpec.yaml

Image Pubspec.yaml

Agora vamos organizar o projeto.

No meu arquivo Main, vai apenas o principal para rodar a nossa página:

Image Main.dart

Agora podemos trabalhar na nossa página principal que é onde o nosso widget ficará.

A princípio o código vai estar assim:

Image Home.dart

Agora vamos fazer os imports dos pacotes de instalamos no nosso projeto:

Eles ficarão assim mas não se assuste rs

imports

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:

final xfile e Uint8List

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 = [];
Enter fullscreen mode Exit fullscreen mode

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:

Center

Adicionei o DropTarget(desktop_drop) que cuidará dos eventos de drop e drag do nosso arquivo em pdf.

droptarget

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;

Enter fullscreen mode Exit fullscreen mode

Basicamente essa função basicamente faz a leitura do bytes e os adiciona na _list com o xFiles de forma assíncrona.

setfile

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'

Image description

Quando o usuário soltar os arquivos na área que escolhi, essa função vai processar os arquivos que foram soltos.

dragfile

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.

deletefile

Por fim, fiz as alterações necessárias no nosso widget DropTarget para ligar os estados e deixar a nossa área funcional.

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.

arquivo

Enfim, temos o nosso Widget completo do inicio ao fim esse aqui é o resultado final:

resultado 1

resultado 2

resultado 3

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)

Collapse
 
ingridkiki profile image
Ingrid Mendes

Topzera Suami! =D Já estou seguindo aqui para acompanhar novos artigos. <3

Collapse
 
iagocavalcante profile image
Iago Angelim Costa Cavalcante

Muito massa /o/

Collapse
 
tiagodanin profile image
Tiago Danin

👏 Parabéns ficou muito bom o tutorial

Collapse
 
arthurbcd profile image
Arthur Miranda

Ótima leitura Suami, direta ao ponto com exemplos e explicações. Ansioso pelos seus próximos artigos :)