DEV Community

Cover image for Desenvolvendo um widget de upload com Flutter đŸ©”
Suami Rocha for Devs Norte

Posted on

28 13 15 12 15

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:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools