SCC0219 - Introdução ao Desenvolvimento Web (2025)

Introduction

Framework Features

Flutter Main Features (explain how to start an app)

Aplicativos Flutter são escritos na linguagem Dart

Framework de desenvolvimento open-source criado pela Google em 2015, com o objetivo de construir aplicações multi-plataforma a partir de um único código fonte, aumentando a eficiência e reduzindo custos de desenvolvimento

Primeiro aplicativo comercial Flutter lançado em 2017

2018: Flutter 1.0 - focado em mobile (iOS/Android)

2021: Flutter 2.0 - suporte a web e desktop

Atualmente: novas ferramentas, melhorias de desempenho, integração (macOS, linux, Windows) e renderização (impeller)

Estrutura: dividida em 3 camadas

Framework layer (Dart): inclui widgets, renderizações, animações e bibliotecas fundamentais

Engine layer (C++): lida com acessibilidade, layout de texto e I/O

Embedder layer: contém código específico de plataforma (Android, iOS, web) e faz a ponte entre o código em Dart e as APIs nativas

Tutorial: para começar o desenvolvimento de uma aplicação Flutter o usuário deve:

ter Flutter SDK instalado e configurado no sistema;

ter um emulador ou dispositivo físico conectado;

ter um Editor de código com extensões para Dart e Flutter

Criar um projeto novo ao digitar “flutter create meu_app” e “cd meu_app” no terminal

Rodar o app em um emulador ou celular com “flutter run”

Rodar o app em web com “flutter run -d chrome”

Editar o arquivo “lib/main.dart”

Realizar o desenvolvimento, podendo adicionar dependências e widgets

A arquitetura básica de um programa Flutter consiste em um widget composto por outros widgets, sendo que o widget descreve a lógica, interação e design de uma UI. Os widgets do Flutter — que, diferente de outras UIs, renderizam com base em pixels — podem ser separados em stateless e stateful. Widgets stateless só mudam se, de alguma forma, seus inputs também mudarem, tornando-os bem estáticos. Já os stateful podem chamar a função setState() e alterar seu estado interno e apresentação.

Widgets são os blocos de construção do Flutter, mas existem formas de fugir desse padrão — por exemplo, com a realização de arte diretamente no canvas. Isso é usado majoritariamente na implementação de game engines.

O framework também pode ser dividido em dois grupos, cada um representando um tipo específico de linguagem de design: a implementada pelo Google, denominada Material Design, e a implementada pela Apple, Cupertino, que, ao contrário do senso comum, também pode ser usada para desenvolvimento voltado ao Android.

Os aplicativos feitos com Flutter são desenvolvidos usando a linguagem Dart, enquanto a engine do Flutter é primariamente escrita em C++.

Framework Disadvantages

Apesar das diversas vantagens já citadas, as principais desvantagens do flutter consistem no grande tamanho dos aplicativos, no uso de Dart, que para alguns é vantagem e para outros desvantagem, na dependência de plugins e no suporte limitado para algumas plataformas.

Uma das desvantagens mais significativas é que os aplicativos tendem a ter um tamanho final maior do que quando feito de forma nativa, já que a inclusão do framework do flutter é necessária. Um exemplo disso é que um aplicativo criado com base no tutorial oficial, que é o mais básico possível, pode ter 25MB para a versão de debug e 7MB para a versão final.

Embora para muitas pessoas uma das grandes vantagens do flutter seja justamente o uso do dart como linguagem, um número não muito diferente de pessoas considera uma desvantagem. Isso se dá ao fato de que Dart pode ter uma curva de aprendizado muito acentuada e uma comunidade pequena que dificulta a obtenção de suporte

A tecnologia Flutter possui seus próprios componentes para renderização e interação com o usuário. Por conta disso, ela não possui acesso à elementos nativos. Para o acesso de elementos nativos, é necessário a utilização de plugins, o que pode gerar problemas, já que os plugins para certas funcionalidades podem estar desatualizados ou podem não existir. Por isso, para algumas funcionalides específicas, pode ser necessário escrever os próprios plugins.

O Flutter tem suporte limitado de funcionalidades em determinadas plataformas. No caso da web, o suporte para SEO e pesquisas no Flutter podem não funcionar adequadamente, limitando o alcance do site em mecanismos de busca. A performance pode mudar de plataforma em plataforma também. Na versão web, a performance com o renderizador de HTML é mais lenta que a renderização nativa, podendo ser um problema para a experiência de usuário.

O Flutter é amplamente utilizado em diversos nichos de mercado devido à sua capacidade de criar aplicativos multiplataforma — Android, iOS, Web e Desktop — com uma única base de código. Além disso, ele oferece recursos e vantagens que se destacam no desenvolvimento ágil e moderno de aplicações, como o hot reload e a fácil integração com APIs.

1. E-commerce e Marketplaces

• Multiplataforma: Usuários podem comprar tanto pelo celular quanto pelo navegador, o que amplia o alcance do app.

• Hot Reload: Permite ajustes rápidos em interfaces complexas, como catálogos e carrinho de compras, acelerando o processo de teste e refinamento.

• APIs: Integração facilitada com sistemas de pagamento, notificações push e gerenciamento de estoque, garantindo uma operação fluida.

2. Startups e MVPs

• Multiplataforma: Reduz custos ao lançar simultaneamente em Android, iOS e Web com um único código-fonte.

• Hot Reload: Agilidade para testar ideias e interfaces sem perda de tempo, ideal para validação rápida de produtos.

• APIs: Fácil conexão com bancos de dados, sistemas de autenticação, pagamento e outros serviços essenciais.

3. Fintechs e Bancos Digitais

• Multiplataforma: Um único aplicativo funcionando de forma consistente em diversos dispositivos e plataformas.

• Hot Reload: Facilita testes ágeis em telas sensíveis como login, autenticação e segurança.

• APIs: Integração com sistemas bancários, autenticação biométrica e exibição de gráficos financeiros, proporcionando funcionalidades avançadas e seguras.

4. Educação Online

• Multiplataforma: Acesso garantido via celular, desktop ou navegador, tanto para alunos quanto para professores.

• Hot Reload: Ajustes rápidos na interface permitem criar experiências de aprendizagem mais envolventes e interativas.

• APIs: Conexão com plataformas de vídeo, gamificação e sistemas de ensino como Firebase e Moodle, expandindo as possibilidades educacionais

Future Perspectives

Contexto Empresarial

Mostrou ser uma ferramenta confiável, estável e poderosa para aplicações de grande porte, por conta disso grandes empresas do setor bancário, fintechs e empresas de outros setores aderiram à ele, dentre elas temos Nubank, BMW, Toyota entre outras. Além disso, permite desenvolver aplicativos em IOS, Android e Web, portanto a tendência é que mais empresas venham a aderir ao Flutter no futuro, principalmente em setores bancários e governamentais.

Atualizações

Lançamento Flutter 4 previsto para os próximos anos

• Aprimoramento do suporte para Desktop: Esperado integração mais profunda com APIs específicas para cada sistema operacional, como suporte aprimorado para Wayland no Linux e suporte para o WinUI no Windows. Suporte para integração de sistemas nativos, através de componentes de UI como suportes para menus, system trays e janelas arrastáveis. Aprimoramento sistema de input de mouse e teclado, tornando-os mais responsivos e intuitivos

• Melhora na performance WEB: Reduzir o tempo de carregamento inicial, aprimoramento do pipeline de renderização melhorando a performance em aplicações gráficas. Além disso o novo Media Query e Layout Builder permitem aos desenvolvedores criar UIs mais responsivas e adaptativas

• Aprimoramento da ferramenta Flutter Devtools: Novas opções de debug que facilitem a detecção de gargalos como vazamentos de memória. Hot Reload e Hot Restart mais eficientes e rápidos. Melhor integração do DevTools com pipelines CI/CD e serviços de monitoramento cloud-based, o que facilita para os times analisarem performance do desenvolvimento

• Integração com IA e Machine Learning: Integração com o ecossistema do Google machine learning. Crescimento do suporte para TensorFlow Lite e modelos de IA integrados, facilitando o uso de features como reconhecimento de imagem e análises preditivas. Plugins do Flutter para modelos pré treinados populares serão aprimorados, permitindo desenvolvedores implementarem aplicações avançadas de IA sem necessidade de conhecimento profundo de ML. o Google ML kit provê APIs prontas para tasks de machine learning.

• Sistemas embarcados: A leveza do Flutter e a habilidade de compilar para código nativo o torna forte candidato para aplicações de UI para dispositivos de IOT. Suporte oficial para desenvolvimento de aplicativos para sistemas embarcados. Desenvolvedores podem criar UIs de alta performance para interfaces de hardware específicos

Referências:https://200oksolutions.com/blog/whats-new-for-flutter-in-2025-flutter-4-0/

Tópicos para os slides:

• Mais empresas aderindo ao Flutter

• Mais suporte para Desktop

• Melhora na performance Web

• Aprimoramento da Flutter Devtools

• Integração com IA e ferramentas de Machine Learning

• Uso de Flutter em sistemas embarcados