Institucional

  • Sobre nós
  • Trabalhe Conosco
  • Para Empresas
  • Para Escolas
  • Política de Privacidade
  • Compromisso de Integridade
  • Termos de Uso
  • Canal de Ética
  • Código de Ética
  • Fale Conosco
  • Documentos Institucionais
  • Status
Institucional
  • Sobre nós
  • Trabalhe Conosco
  • Para Empresas
  • Para Escolas
  • Política de Privacidade
  • Compromisso de Integridade
  • Termos de Uso
  • Canal de Ética
  • Código de Ética
  • Fale Conosco
  • Documentos Institucionais
  • Status

A Alura

  • Como Funciona
  • Inteligência Artificial
  • Plataforma
  • Depoimentos
  • Instrutores(as)
  • Dev em <T>
  • Luri, a Inteligência Artificial da Alura
  • IA Conference
  • Cursos Imersivos
  • Perguntas Frequentes
A Alura
  • Como Funciona
  • Inteligência Artificial
  • Plataforma
  • Depoimentos
  • Instrutores(as)
  • Dev em <T>
  • Luri, a Inteligência Artificial da Alura
  • IA Conference
  • Cursos Imersivos
  • Perguntas Frequentes

Conteúdos

  • Alura Cases
  • Imersões
  • Artigos
  • Podcasts
  • Artigos de educação corporativa
Conteúdos
  • Alura Cases
  • Imersões
  • Artigos
  • Podcasts
  • Artigos de educação corporativa
Uma Empresa do GrupoLogo Grupo Alun

Outras empresas do Grupo Alun

  • FIAP
  • STARTSE
  • PM3
  • LUMINA

Ao submeter seu e-mail, você concorda com a política de privacidade da Alura.

Redes Sociais & Apps

instagram
youtube
tiktok
x
appStore
googlePlay
Uma Empresa do GrupoLogo Grupo Alun

Outras empresas do Grupo Alun

  • FIAP
  • STARTSE
  • PM3
  • LUMINA

Ao submeter seu e-mail, você concorda com a política de privacidade da Alura.

Redes Sociais & Apps

instagram
youtube
tiktok
x
appStore
googlePlay
Alura
  • Home

    Escolha seu Plano

    • Plus 2430% OFF
    • Pro 2430% OFF
    • Ultra Lab 2430% OFF

    Carreiras Alura

    Evolua com profundidade técnica, direção clara e aplicação prática.

    Jornadas guiadas do básico ao avançado com checkpoints práticos, desenhadas para quem busca profundidade e protagonismo técnico.

    Iniciante

    Comece do zero com uma trilha clara e progressiva.

    Fundamentos práticos para dar os primeiros passos com segurança e construir uma base sólida.

    Intermediário

    Continue sua evolução com cursos que conectam fundamentos, ferramentas e prática profissional. Ganhe autonomia, e avance para projetos mais completos.

    Avançado

    Aprofunde temas técnicos e estratégicos para enfrentar desafios mais complexos. Explore boas práticas, arquitetura, performance com visão profissional.

    CURSOS

    Ver mais cursos de Back-end
    • Pensamento computacional: fundamentos da computação e lógica de programação
    • Lógica de programação: mergulhe em programação com JavaScript
    • DDD: fundamentos do design orientado a domínio
    • ASP.NET: autenticação e autorização em APIs e aplicações web
    • Microsserviços: migração de monólitos e modularização

    CURSOS

    Ver mais cursos de Dados
    • Python para Dados: primeiros passos
    • Excel: domine o editor de planilhas
    • Engenharia de Dados: Orquestração de Pipelines com Apache Airflow
    • Power BI Desktop: construindo meu primeiro dashboard
    • Governança e Arquitetura de Dados

    CURSOS

    Ver mais cursos de Inteligência Artificial
    • IA: Explorando o Potencial da Inteligência Artificial Generativa
    • Engenharia de Prompt: Criando Prompts Eficazes para IA Generativa
    • Claude para Análise de Dados: prompts, integrações e automações
    • Agno: criando agentes e sistemas multiagente
    • Engenharia de software na era da IA: segurança de aplicações com agentes, MCPs e código gerado por IA

    CURSOS

    Ver mais cursos de Front-end
    • HTML e CSS: ambiente, estrutura e estilo
    • React: realizando testes avançados com Jest e Testing Library
    • React: integrando TypeScript em projetos
    • JavaScript: aprendendo a programar
    • React: aplicando arquiteturas de Micro frontends

    CURSOS

    Ver mais cursos de DevOps
    • Sistema Operacional Linux: fundamentos e administração prática
    • Containers e Docker: empacotamento, isolamento e gestão
    • Redes: dos conceitos iniciais à criação de uma intranet
    • Linux: gerenciando diretórios, arquivos, permissões e processos
    • Cibersegurança: Fundamentos e práticas integradas

    CURSOS

    Ver mais cursos de UX & Design
    • UX Research: mapeando a experiência da pessoa usuária
    • UX/UI Design: Entregando produtos digitais com IA
    • UI Design: Prototipação e animações interativas
    • Figma: Conhecendo o programa
    • Product Design: métricas e ciclo de vida do produto

    CURSOS

    Ver mais cursos de Inovação e Gestão
    • Canva: Criação de landing pages e e-mail marketing
    • Agilidade: como ela pode ajudar a criar um time de alta performance
    • Google Analytics 4: Extrair insights e configurar eventos
    • Management 3.0: gerencie o ambiente, não as pessoas
    • Automação de processos com n8n: Inteligência de dados para Marketing

    CURSOS

    Ver mais cursos de Mobile
    • React Native: Estilização e Layouts com Flexbox e StyleSheet
    • Flutter: Graphql e suporte offline
    • Android com Gemini: Trabalhando com textos e imagens na IA
    • Dart: trabalhando com orientação a objetos
    • React Native: Dominando Listas com FlatList e ScrollView

    CARREIRAS

    Ver mais carreiras
    • Especialista em IA
    • Engenharia de IA
    • Ai native software engineering
    • Arquitetura de Soluções com IA
    • AI Product Design
    • Engenharia de Machine Learning
    • Desenvolvimento Front-End React
    • Engenharia de Dados
    • Cloud Security
    • Social Media Marketing
    • Engenharia de Agentes de IA

    CURSOS

    • Engenharia de Prompt: Prompts Eficazes para IA Generativa
    • Claude Code: Criando sua Primeira Aplicação
    • Python: Crie sua Primeira Aplicação
    • Git e GitHub: Compartilhando e Colaborando
    • N8N: Fluxos de Trabalho Avançados

    CURSOS

    • Copilot Studio: Solução Multiagentes
    • Padrões de API HTTP e Modelagem de APIs
    • Python para Análise de Dados com SQL
    • Docker: Criando e Gerenciando Containers
    • Design com IA: Otimizando o Processo Criativo

    CURSOS

    • Model Context Protocol (MCP)
    • Spec-Driven Development: Dev Assistido por Agentes
    • Arquitetura de Sistemas Distribuídos com Java
    • Governança de Modelos e Reprodutibilidade
    • Pentest: Vulnerabilidades em Aplicações Web

    Escolha seu Plano

    • Plus 2430% OFF
    • Pro 2430% OFF
    • Ultra Lab 2430% OFF

    Skills & Go

    O Skills & Go é para Tech Leads, Product Managers, estrategistas e early adopters que transformam ideias em soluções de alto impacto. Em cursos ao vivo e 100% online, você domina a nova era da IA em tempo real.

    Aulas ao vivo

    Saiba mais
    • Agentic Engineering: orquestre multiplos agentes com confiabilidade
    • Building AI Products: transforme ideias em produtos reais com IA
    • AI Data Strategy: transforme dados em decisões estratégicas com IA

    Escolha seu Plano

    • Plus 2430% OFF
    • Pro 2430% OFF
    • Ultra Lab 2430% OFF

    Eventos Alura

    Nossos eventos são pensados para quem quer estar à frente das mudanças em tecnologia, IA e inovação. Em experiências presenciais, você acompanha tendências e se conecta com especialistas que estão moldando o futuro.

    Próximos eventos

    • IA Conference
    • Alura Signals
  • Talent Lab
  • IA
  • Artigos
  • Para Empresas
Ver planos
Links principais
  • Planos e Promoções
  • Carreiras

    Ver todas
    • Especialista em IA
    • Engenharia de IA
    • Ai native software engineering
    • Arquitetura de Soluções com IA
    • AI Product Design
    • Engenharia de Machine Learning
    • Desenvolvimento Front-End React
    • Engenharia de Dados
    • Cloud Security
    • Social Media Marketing
    • Engenharia de Agentes de IA
    Entrar Ver Planos
  • Área de Interesse

    Entrar Ver Planos
  • Aulas ao Vivo - Skills & Go

    • Agentic Engineering: orquestre multiplos agentes com confiabilidade
    • Building AI Products: transforme ideias em produtos reais com IA
    • AI Data Strategy: transforme dados em decisões estratégicas com IA
    Entrar Ver Planos
  • Senioridade

    Entrar Ver Planos
  • Eventos Alura

    • IA Conference
    • Alura Signals
    Entrar Ver Planos
  • Links complementares do menu mobile
  • Talent lab
  • Inteligência Artificial
  • Pós Graduações
  • Artigos
  • Para Empresas
  • Sobre a Alura
  • Grupo Alun
  • Entrar
    • Home
    • Carreiras
    • Skills & Go
    • Talent Lab
    • Inteligência Artificial
    • Pós Graduações
    • Artigos
    • Sobre a Alura
    • Grupo Alun
    LoginContato
    • Plano Pro 24
    • Plano Plus 24
    • Plano Ultra Lab 24
    • LinkedIn
    • Instagram
    • YouTube
    1. Página inicial
    2. Mobile
    3. Flutter: o que é, para que serve e como funciona o framework da Google  

    Flutter: o que é, para que serve e como funciona o framework da Google  

    22 min22 minutos de leitura

    22 min22 minutos de leitura

    Publicado: 06/09/2022

    Última atualização: 16 de Junho

    1. O que é o Flutter e para que serve o framework da Google?
    2. O que é um framework?
    3. Flutter é uma linguagem de programação?
    4. Dart e Flutter: conheça a linguagem utilizada pelo framework  
    5. O que é multiplataforma no desenvolvimento Flutter?
    6. Como começar no Flutter: primeiros passos com o framework
    7. Como funciona o Flutter: arquitetura, widgets e programação
    8. Por que utilizar o Flutter para desenvolvimento de apps?  
    9. Vantagens do Framework Flutter no desenvolvimento
    10. Desvantagem e desafio do Flutter na programação mobile
    11. Como utilizar o Flutter: guia de instalação e primeiros comandos
    12. Como criar um projeto no Flutter passo a passo
    13. Arquitetura Flutter: como organizar arquivos e pastas em projetos
    14. Processo de desenvolvimento Flutter com CI/CD (Integração e Entrega Contínua)
    15. Server Driven UI no Flutter: como funciona e vantagens
    16. Curva de aprendizado do Flutter: o que estudar primeiro?
    17. Mercado de trabalho Flutter: onde aplicar seus conhecimentos
    18. Resumo: O que você precisa saber sobre o Flutter e próximos passos

    Neste artigo, você vai aprender o que é Flutter, para que serve esse framework de desenvolvimento mobile, as diferenças entre stateless e stateful, e como iniciar a programação Flutter utilizando Dart 

    Você já parou para pensar em quantas vezes, só hoje, abriu um aplicativo ou utilizou um smartphone? 

    Provavelmente algumas vezes! Seja Android ou iOS, os aplicativos facilitam a nossa vida na hora de pagar contas sem ir ao banco; pedir comida; chamar um carro, e muito mais. 

    Com tantos apps por aí, podemos dizer que o mercado de trabalho oferece oportunidades para trabalhar com desenvolvimento mobile. 

    Assim, uma opção de tecnologia para estudar é o Flutter, utilizado em grandes empresas. 

    Em vez de aprender uma linguagem específica, por que não aprender uma única ferramenta que suporta várias plataformas? 

    O que é o Flutter e para que serve o framework da Google?  

    Flutter é um framework de desenvolvimento focado em criar aplicações multiplataforma para dispositivos móveis. 

    Desenvolvido pela Google, o Flutter tem ampla adoção no mercado e, além de criar apps para dispositivos móveis, agora também permite o desenvolvimento para desktop (Linux, Windows e macOS). 

    Na prática, com o Flutter, é possível escrever o código uma única vez para que o aplicativo funcione em diferentes plataformas, como Android e iOS. Seus principais benefícios são a versatilidade, a curva de aprendizado reduzida e a agilidade no desenvolvimento. 

    A ferramenta é vantajosa para as empresas. Uma pessoa desenvolve o aplicativo para sistemas operacionais diferentes, ao contrário do modelo nativo, que necessita de duas pessoas devs, uma para cada plataforma. 

    O que é Flutter? #HipstersPontoTube 

    Banner da Alura convidando profissionais a desenvolver habilidades em inteligência artificial para acompanhar as transformações do mercado de tecnologia. A campanha destaca que quem utiliza IA produz mais, cresce na carreira e se torna mais competitivo, reforçando que a inteligência artificial deixou de ser tendência e passou a ser uma habilidade essencial. O banner incentiva a começar a aprender IA com os cursos da Alura e impulsionar a transformação digital.

    O que é um framework? 

    O framework pode ser simplesmente definido como uma ferramenta. Em uma definição mais aprofundada, trata-se de um pacote de códigos de bibliotecas pré-prontas que facilita o desenvolvimento do projeto. 

    Flutter é uma linguagem de programação?  

    A resposta é simples: não! O Flutter não pode ser considerado uma linguagem de programação como Dart, Java e .net; trata-se de um framework, conforme vimos. 

    O que é Biblioteca, Framework e API? #HipstersPontoTube

    Dart e Flutter: conheça a linguagem utilizada pelo framework  

    O Flutter utiliza Dart, linguagem também criada pela Google e otimizada para dispositivos clientes (ou client-side) multiplataforma. 

    O objetivo dela é ser a mais produtiva possível e também mais flexível para servir como base para diversos frameworks de desenvolvimento de aplicativos. 

    Ela oferece algumas facilidades de desenvolvimento como: 

    • Hot reload: significa “recarga instantânea”. Permite visualizar imediatamente as alterações feitas no código, facilitando o teste e a experimentação durante o desenvolvimento (recurso raro em linguagens compiladas); 
    • Rodar templates no navegador; 
    • Null safety: permite mais adaptabilidade do código ao possibilitar o uso de valores do tipo nulo sem que a aplicação quebre por completo. 

    Embora Dart seja a linguagem base do Flutter, não é absolutamente necessário que você aprenda primeiro Dart e depois Flutter. 

    Você pode aprender Dart enquanto estuda Flutter. Quanto mais você mergulhar em Flutter, mais vai se aprofundar em Dart por consequência. 

    É importante aprender pelo menos o básico de Dart: 

    • Variáveis e tipos; 
    • Funções; 
    • Repetições; 
    • Classes/objetos. 

    Os 5 métodos da lista do Dart | #AluraMais 

    Conhecendo esses conceitos, você já consegue entender melhor a estrutura de um código Flutter. 

    O que é multiplataforma no desenvolvimento Flutter?  

    Multiplataforma significa que com o Flutter é possível desenvolver um único código que roda simultaneamente em diferentes sistemas operacionais. Esse modelo é conhecido como desenvolvimento híbrido. 

    Há também a opção de desenvolvimento nativo. No mercado de mobile, antes era difícil programar um aplicativo para Android e iOS ao mesmo tempo, pois o desenvolvimento para dispositivos diversos requeria técnicas em diferentes linguagens de programação e suas diferentes características e estruturas: 

    • Sistema operacional Android utiliza Java/Kotlin; 
    • Sistema operacional iOS usa Swift; 
    • Para desktop, é comum usar Java, JavaScript (com Electron), Rust e outras linguagens 

    Ou seja, há um problema no desenvolvimento nativo: sabendo Kotlin, posso construir apenas para Android, porém não para iOS! Para solucionar isso, o Flutter foi criado: agora conseguimos produzir aplicações multiplataforma. 

    A partir da versão 2.10 do Flutter, podemos desenvolver aplicações para desktop também. Desta forma, o Flutter é uma das tecnologias mais maleáveis do mercado. 

    Para se aventurar mais no mundo dos híbridos e nativos, você pode ler nosso artigo que aprofunda os primeiros passos no universo mobile. 

    Como começar no Flutter: primeiros passos com o framework  

    Você pode acessar gratuitamente as primeiras aulas de  Flutter e Android Studio da trilha Flutter da Alura e aprenda mais sobre: 

    • O que é o Flutter; 
    • Onde programar (Android Studio). 

    Como funciona o Flutter: arquitetura, widgets e programação  

    A estrutura do Flutter é baseada em widgets (componentes visuais reutilizáveis). Mas afinal, o que são widgets? 

    Os widgets são os “blocos” de construção, como um lego ou quebra-cabeça, que encaixamos para montar as telas de um aplicativo. 

    Esses widgets são escritos com Dart, uma linguagem do paradigma Orientação a objetos. Com o Dart no núcleo, criamos aplicações mais otimizadas para diversos dispositivos do que outras ferramentas híbridas, por exemplo, o React Native. 

    Por que utilizar o Flutter para desenvolvimento de apps?  

    Se precisa criar aplicações para várias plataformas, mas quer evitar manter códigos em diferentes linguagens, o Flutter é uma ótima opção. Porém, sempre avalie se a tecnologia atende ao objetivo do seu projeto. 

    Não existe ferramenta perfeita em tecnologia e com o Flutter não é diferente. 

    Vantagens do Framework Flutter no desenvolvimento 

    Linguagem orientada a objetos 

    Como vimos, o Flutter utiliza Dart como base. Dart possui uma estrutura muito semelhante a linguagens focadas em orientação a objetos, por exemplo, o Java. 

    Se quiser saber mais sobre o paradigma de orientação a objetos, recomendamos o vídeo abaixo: 

    Orientação a objetos com Roberta Arcoverde | #HipstersPontoTube 

    Orientação a objetos com Roberta Arcoverde | #HipstersPontoTube 

    Uma das vantagens da linguagem é que ela não é presa 100% ao tipo. Dart adapta o tipo de uma variável sem que ela seja declarada explicitamente. E trabalha com valores nulos por meio do null safety. 

    Assim, o Flutter combina as vantagens de linguagens mais robustas como Java e a adaptabilidade do JavaScript. Isso pode ser uma vantagem - e uma desvantagem. 

    Se há liberdade para declarar variáveis como quisermos, também precisamos nos preocupar em colocar o tipo certo no lugar correto. Às vezes, isso gera confusão no momento de “codar”. 

    Documentação de qualidade 

    Uma outra grande vantagem do Flutter é a sua documentação. Bem detalhada e estruturada, ensina como instalar, configurar e utilizar um projeto. 

    A documentação conta com exemplos de códigos, tutoriais e uma descrição detalhada do que cada componente faz. 

    Convido você a abrir a documentação do Flutter e explorá-la. Não é sempre que você encontra uma ferramenta tão bem documentada quanto o Flutter. 

    Mesmo no caso das linguagens mais famosas (JavaScript ou Java), as documentações deixam a desejar no pouco suporte oferecido. 

    Geralmente, contamos mais com a ajuda da comunidade; sites como Stackoverflow ou Dev.to servem mais como suporte "oficial". 

    Apesar dos elogios à documentação do Flutter, ela não é perfeita (como nada o é). 

    Os exemplos nem sempre mostram a forma mais eficiente para o nosso caso de uso (nesses casos, precisamos de suporte da comunidade), e a descrição de alguns componentes/widgets pode parecer um pouco confusa. 

    No geral, o Flutter é ótimo para começar. O suporte inicial é bem estruturado e completo, facilitando que você crie pequenas aplicações. 

    Desvantagem e desafio do Flutter na programação mobile  

    Vamos ser sinceros com você: toda e qualquer tecnologia apresenta vantagens e desvantagens; é importante que você as conheça para tomar decisões embasadas e conscientes em sua carreira. 

    Para quem não sabe aonde vai, qualquer caminho serve, não é mesmo? 

    Configuração do ambiente de aprendizagem 

    Para “codar” em Flutter, precisamos de duas ferramentas: uma IDE (VSCode, VisualStudio, AndroidStudio, etc), e um emulador/simulador ou dispositivo móvel para testar. 

    Se você quiser saber mais sobre IDE, acesse este artigo que explica o que é essa ferramenta. 

    O problema vem na hora de testar a aplicação. É necessário que você tenha um dispositivo virtual ou físico que emula um celular funcionando em tempo real. Para Android, é um pouco mais tranquilo, porque o emulador roda em várias máquinas. Já o iOS precisa de um Mac com xCode. 

    Print de tela do emulador android. 

    Existe uma diferença entre emulador e simulador. A explicação rápida é: o emulador imita todo o hardware e software como se fosse um dispositivo real. Por sua vez, o simulador é um ambiente que imita o comportamento e estado de um dispositivo. Emuladores requerem um sistema mais poderoso para rodar do que um simulador. 

    E mesmo para Android, o seu sistema precisa ser potente o suficiente para rodar o código e o emulador. Um sistema fraco dificulta a experiência de codar, tornando-a exaustiva. 

    Essa é a primeira e principal barreira para começar a desenvolver aplicações híbridas. 

    Agora que entendemos as vantagens e desvantagem do Flutter, é hora de ir para o código, a parte que você provavelmente estava esperando! 

    Como utilizar o Flutter: guia de instalação e primeiros comandos  

    Vamos considerar que você tenha quase tudo o que é necessário para começar o desenvolvimento com Flutter (ambiente de desenvolvimento com emulador e IDE). 

    Como podemos iniciar a escrita da nossa aplicação? 

    Precisamos instalar, no computador, as seguintes ferramentas: 

    1) Flutter SDK: o arquivo que permite utilizar a ferramenta; 

    2) Android Studio e/ou xCode: contém as ferramentas de build para testar e subir a aplicação em dispositivos Android e iOS (além de servirem como IDEs); 

    3) IDE: é o programa onde você vai escrever o código. Há diversas opções de IDE no mercado para escolher: Visual Studio Code (que utilizaremos neste artigo), Android Studio, Xcode; 

    4) Emulador: necessário para rodar e testar o aplicativo que pretendemos criar. 

    Ecossistema Flutter – Hipsters Ponto Tech #287 

    Depois de configurado o Flutter SDK e um emulador/simulador, podemos iniciar nosso projeto através do terminal. 

    Como criar um projeto no Flutter passo a passo 

    Passo 1: Criar a pasta base 

    Dentro de uma pasta qualquer (que não seja a pasta do SDK do Flutter ou uma pasta a que você não tem acesso), digite o seguinte comando no terminal: 

    flutter create nome_da_aplicacao 

    O comando vai gerar todos os arquivos e pastas necessários, organizados na pasta para a qual demos um nome. 

    Pronto! Você pode começar o desenvolvimento de uma aplicação. 

    Passo 2: Criar a pasta “meu app” 

    Em seguida, digite `flutter create meu_app` para gerar a pasta `meu_app`. 

    Abra a pasta dentro de uma IDE (neste caso utilizarei o VSCode) e você terá acesso a seguinte estrutura de arquivos (considerando a versão 3.19.5 do Flutter): 

    Imagem que mostra a estrutura de arquivos no Flutter na interface do Visual Studio, além de botões e opções de configurações adicionais 

    Você deve ter percebido uma extensa lista de arquivos. Aos poucos, vamos entendendo o que cada pasta faz dentro do projeto. Neste começo, preocupe-se em fazer o projeto funcionar. 

    Dependendo da sua IDE, você pode subir uma instância do emulador/simulador com apenas alguns cliques. 

    No caso do Visual Studio Code, o botão de subir instância fica no canto inferior direito. 

    Captura de tela de um editor de código com um trecho de código na linguagem Dart, configurando um aplicativo Flutter. O código está contido dentro do escopo de um widget, exibindo as linhas de 19 a 26. Na linha 21, há a propriedade 'colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)',. Na linha 22, define-se 'useMaterial3: true'. Na linha 24, a propriedade 'home: const MyHomePage(title: 'Flutter Demo Home Page')'. 

    O código visto na imagem pode ser lido abaixo: 

    // This works for code too, not just values: Most code changes can be 
         // tested with just a hot reload. 
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), 
         useMaterial3: true, 
       ), 
       home: const MyHomePage(title: 'Flutter Demo Home Page'), 
    ); 
      }

    Clique onde está escrito o nome do seu sistema operacional e escolha o emulador/simulador que você já deixou pré-configurado. 

    Screenshot 

    Depois de iniciar nosso dispositivo, podemos subir nossa aplicação. 

    Quando criamos um novo projeto Flutter, a ferramenta já deixa um código pronto para testarmos se o Flutter consegue subir corretamente. 

    Esse código inicial fica dentro da pasta `lib`. Aproveitando, dentro dessa pasta é onde vamos desenvolver nossa aplicação e criar toda a estrutura de arquivos e pastas. 

    Passo 3: Rodar o emulador com o aplicativo 

    Dentro da pasta `lib`, encontramos o arquivo `main.dart`, que contém a função `main()`, responsável por iniciar um projeto. 

    Após abrir esse arquivo, no Visual Studio Code, teremos uma nova opção no canto superior direito onde podemos debugar/depurar nossa aplicação. 

    O botão tem um formato de um botão play/tocar com um inseto. Clique nesse botão, e o Flutter vai subir nosso código no emulador que está rodando de plano de fundo. 

    Imagem que exibe as opções localizadas no canto superior esquerdo da interface do Visual Code Studio, dentre as quais há o botão de play com o símbolo de um inseto para subir o código no emulador. 

    Dentro do emulador você terá uma tela parecida com a tela a seguir: 

    Screenshot 

    Ao clicar no botão roxo, o valor "0" no meio da tela deverá ser alterado pela quantidade de vezes que clicamos no botão. 

    E esse é o projeto de demonstração do Flutter! A partir dele compreendemos a estrutura de como um aplicativo funciona. 

    Passo 4: Escrevendo código no Flutter 

    Voltando para o código do arquivo `main.dart`, você vai enxergar várias linhas de código e de comentários. 

    Comentários são marcados por `//` 

    Comentários são marcados por `//` 

    Para continuar acompanhando o artigo, é importante que você tenha o conhecimento de paradigmas de orientação a objetos e lógica de programação. 

    Na primeira linha, temos o `import`, o qual indica que algum arquivo ou classe deve ser importado no projeto. Neste caso, precisamos do `material.dart`, que contém as informações do Material Design. 

    Material Design é a linguagem visual do Android criada pela Google. Para saber mais, acesse a sua documentação. 

    Na linha número 3, vemos a função `main` que chama nosso app. O app está declarado na linha 7. Repare que, na linha 7, a classe `MyApp` extende um `StatelessWidget`. 

    Lembrando do que falei no começo do artigo, o Flutter é composto por blocos conhecidos por widgets. Cada parte visual da nossa aplicação (o que será mostrado na tela do nosso dispositivo) deve ser declarado como um widget. 

    Portanto, botões, textos, cartões, imagens, etc são considerados widgets. 

    Há dois tipos básicos de widgets, stateless e stateful. 

    Stateless (em português, “sem estado”) são widgets que não sofrem alterações em seu estado. 

    Stateful (em português, “com estado”) são widgets que sofrem alterações em seu estado. Mais para frente, vamos entender como esses estados funcionam. 

    Na linha 12, verificamos a função que vai construir nosso widget do `MyApp`. A função recebe um contexto (context) e retorna alguma coisa. Essa coisa pode ser qualquer widget. Neste caso, o widget é um `MaterialApp`. 

    Dentro do construtor deste widget, passamos alguns parâmetros, como `title`, `theme` e `home`. 

    Widgets podem ser criados do zero, como foi o caso do `MyApp`, ou também podem ser pré-montados, a exemplo do `MaterialApp`. 

    A documentação do Flutter apresenta um catálogo de widgets pré-montados que podemos utilizar em nosso projeto. 

    Para finalizar nosso entendimento do código Flutter, vejamos a linha 39 com o stateful widget`MyHomePage`. Este widget é a representação do corpo da nossa aplicação. Dentro dele, você observa três elementos: 

    • O texto "You have pushed the button this many times:" (em português, “você apertou o botão tantas vezes”); 
    • O número de vezes que o botão foi apertado (que podemos chamar de contador); 
    • O botão no canto inferior direito. 

    Esse widget foi criado como stateful. Por quê? 

    Bom, o contador tem o seu valor alterado quando clicamos no botão de adição, portanto existe uma alteração no seu estado. Como ocorre uma mudança de valor, há uma mudança de estado. E a definição de ‘statefulWidget` é justamente suas mudanças de estado. 

    O widget cujo estado é modificado deve ser declarado dentro de um statefulwidget, sendo seu filho direto. 

    Arquitetura Flutter: como organizar arquivos e pastas em projetos  

    É de grande importância que nosso projeto seja bem estruturado e organizado para facilitar a manutenção e o entendimento do código. 

    Uma das boas práticas de organização do projeto é deixar, na raiz da pasta `lib`, apenas o arquivo `main.dart`. 

    As telas, os temas e outros componentes devem ficar em outras pastas dentro da `lib`. 

    Dentro do arquivo `main.dart`, inserimos apenas a estrutura mínima para chamar o app. E a página inicial deve ser importada da pasta `screens`. 

    Veja um exemplo de estrutura de arquivos: 

    Imagem que mostra uma lista de arquivos organizada na vertical. No topo encontra-se o arquivo chamado lib que contém todos os demais: components, sections, account_actions.dart, header.dart, recent_activity.dart, box_card.dart; screens, home.dart e, por último, em uma fonte menos destacada, o arquivo “main.dart”. 

    Dentro da pasta `lib`, vemos duas pastas: 

    • `componentes` onde ficarão os componentes e seções da aplicação; 
    • `screens`, onde ficam as telas da aplicação. A ideia é que as telas importem os componentes necessários para a sua estrutura. 

    O arquivo `main.dart` inicializa a aplicação e chama a página inicial `home.dart`. 

    Como desenvolver boas práticas de programação? com Fabio Akita | #HipstersPontoTube 

    Processo de desenvolvimento Flutter com CI/CD (Integração e Entrega Contínua)  

    Se você entendeu os conceitos básicos de Flutter, pode avançar para habilidades de nível pleno-sênior. 

    Dois conceitos importantes são: integração contínua ou continuous integration (CI) e entrega contínua ou continuous delivery (CD). 

    Continuous Integration (CI) 

    A ideia principal de CI é que diversas equipes trabalhem em uma única estrutura de código ou repositório. Qualquer adição, manutenção ou remoção realizada por uma equipe será implementada no produto em produção. 

    Um exemplo seria de duas equipes trabalhando em um app de um banco online: Uma equipe (A) será responsável por desenvolver a tela, mais especificamente a parte visual do aplicativo; Uma outra equipe (B) será responsável por adicionar um novo tipo de conta dentro do banco. 

    Ambas equipes trabalham em tarefas distintas, mas, no final, ambas as funcionalidades irão compor o único app de banco. 

    O ponto é que as equipes são incentivadas a fazer pequenos merges (junções de código) para que trabalhem na mesma base de código. 

    Assim, qualquer mudança, feita por uma equipe, que acabe quebrando o código, pode ser facilmente ajustada por que há menos código novo para olhar do que um merge gigantesco no final do mês, ou seja, fica mais fácil identificar o bug ou erro. 

    Quando falamos de integração contínua, falamos dessas integrações do código novo feitas de forma mais regular e menos espaçada: o merge vira uma prática diária em vez de semanal ou mensal. 

    CI é uma técnica avançada que facilita a identificação e correção de erros, impactando diretamente na qualidade do código e diminuindo a chance de que erros cheguem na mão dos usuários de um aplicativo. 

    CI é uma técnica avançada que facilita a identificação e correção de erros, impactando diretamente na qualidade do código e diminuindo a chance de que erros cheguem na mão dos usuários de um aplicativo. 

    Na prática, a CI requer a automatização dos processos de teste e build do aplicativo. Ela envolve os seguintes passos: 

    1. Controle de versão: Todos os códigos-fonte são mantidos em um sistema de controle de versão, como o Git; 
    2. Integração regular: Pessoas desenvolvedoras integram suas mudanças no repositório central várias vezes ao dia; 
    3. Automatização de build: Cada integração dispara automaticamente uma build do sistema, garantindo que as mudanças não quebrem a aplicação; 
    4. Testes automatizados: Junto com a build, são executados testes automatizados - dos unitários aos de integração e UI, dependendo da configuração; 
    5. Feedback imediato: Se a build ou os testes falharem, a equipe é notificada imediatamente, permitindo uma rápida correção de problemas. 

    Continuous Delivery (CD) 

    O conceito de CD assemelha-se ao de CI, mas o contexto em que se aplica é um pouco diferente. Vamos usar o mesmo exemplo das duas equipes trabalhando no app de online banking. 

    Tal como CI ajuda a identificar erros e conflitos no código e suaviza esse processo, o CD automatiza e simplifica a entrega do projeto em lojas como Google Play (Android) ou App Store (iOS). 

    Em vez de entregar grandes features a cada três meses (um exemplo arbitrário), CD recomenda entregas menores e constantes.

    Dessa forma, você e as demais equipes mantêm um ritmo constante de entrega, oferecendo novas funcionalidades, correções e atualizações às pessoas usuárias finais de forma rápida e confiável. 

    Na prática, dois processos são automatizados: distribuição para testes internos e lançamentos nas lojas. 

    O processo de CD aproveita a base estabelecida pela CI, adicionando os seguintes passos: 

    1. Automatização do pipeline de lançamento: Após a CI concluir a build e os testes com sucesso, o código é automaticamente encaminhado através de várias etapas de preparação para lançamento, como testes de aceitação da pessoa usuária, testes de carga e performance; 
    2. Ambiente de staging (“ensaio”): O código pronto para lançamento é implantado em um ambiente de staging que replica o ambiente de produção, onde é revisado antes do lançamento; 
    3. Lançamento manual ou automático: Dependendo da política da empresa, o lançamento é feito manualmente por um membro da equipe ou automaticamente, assim que o código passar por todas as verificações; 
    4. Rollbacks automáticos: Se problemas forem detectados após o lançamento, o processo de CD pode automaticamente reverter o aplicativo para a última versão estável, minimizando o impacto para as pessoas usuárias finais. Esse processo de reversão é chamado de rollback. 

    Veja mais conteúdos sobre CI/CD através da formação Flutter CI/CD: automatize seu trabalho. 

    Server Driven UI no Flutter: como funciona e vantagens  

    Avançando ainda mais em técnicas e conceitos no Flutter, há o server driven UI (Interface orientada por servidor). 

    Server driven UI é uma arquitetura de desenvolvimento em que toda a responsabilidade de construir telas de um aplicativo fica no servidor. 

    Interface local 

    O conceito inicial e básico, que aprendemos até o momento, é que nós escrevemos os widgets e eles aparecem em nosso dispositivo. 

    Mas tudo isso tem sido feito dentro do próprio aplicativo. Praticamente a única maneira que a pessoa pode ter seu aplicativo atualizado é baixando uma nova versão na Play Store (Google) ou Apple Store (Apple). 

    No entanto, do lado da pessoa desenvolvedora, o processo de atualizar um aplicativo na loja leva dias. É aí que entra o server driven UI. 

    Interface no servidor 

    Com a arquitetura server driven UI, o aplicativo faz uma requisição para o servidor, solicitando uma descrição de interface. 

    Geralmente, essa resposta vem no formato de árvore de widgets em um objeto JSON. Com essa resposta, o aplicativo sabe como desenhar e renderizar a interface na tela do dispositivo. 

    Um exemplo seria em um aplicativo de notícias: server driven UI pode ser usada para personalizar a interface do usuário para cada usuário.

    O servidor pode enviar ao aplicativo uma descrição JSON da interface do usuário personalizada, com base nas preferências da pessoa usuária e no conteúdo da notícia que ela está visualizando. 

    Qualquer alteração feita no arquivo JSON gera mudanças imediatas no aplicativo. 

    Dessa forma, podemos implementar pequenas atualizações no aplicativo e dispensar a atualização do aplicativo na loja. O ciclo de atualização de um aplicativo na loja pode demorar de 1 a 5 dias, enquanto server driven UI reduz esse tempo para minutos. 

    No entanto, essas atualizações mais rápidas são menores, por exemplo, mudar a cor de botão, alterar a ordem de um menu de opções etc. 

    Mudanças maiores ou estruturais no projeto ainda necessitam de atualização na loja de aplicativos, porém server driven UI facilita a vida da pessoa desenvolvedora. 

    Veja as vantagens de server driven UI no Flutter: 

    • Maior flexibilidade e reutilização: A lógica de negócios e a UI são separadas, permitindo maior flexibilidade na criação e reutilização de componentes da interface; 
    • Desenvolvimento mais rápido: A interface pode ser prototipada e modificada rapidamente no servidor, sem a necessidade de recompilar ou atualizar o aplicativo Flutter; 
    • Melhorias no desempenho: O servidor pode otimizar a interface para diferentes dispositivos e redes, resultando em melhor desempenho geral; 
    • Dados em tempo real: A interface pode ser atualizada em tempo real com base em dados do servidor, proporcionando uma experiência mais dinâmica para a pessoa usuária. 

    Curva de aprendizado do Flutter: o que estudar primeiro?  

    Uma dúvida comum para iniciantes nos estudos da tecnologia pode ser: Qual a curva de aprendizado do Flutter? 

    Os pré-requisitos, conhecimentos e técnicas que você precisa dominar para mergulhar no Flutter são: 

    • Lógica de programação; 
    • Paradigma de orientação a objetos; 
    • Dart. 

    Com esses fundamentos, o aprendizado do Flutter se torna mais acessível, pois a pessoa estudante passa a compreender melhor a estrutura dos projetos. 

    Se você está iniciando os estudos na área de desenvolvimento, pode estudar com a gente na Alura!

    A carreira Desenvolvimento Mobile com Flutter reúne conteúdos que ajudam a construir essa base e avançar na criação de aplicativos, desde os primeiros conceitos até práticas mais completas com a tecnologia. 

    Mercado de trabalho Flutter: onde aplicar seus conhecimentos  

    É natural se perguntar: o mercado de Flutter oferece boas oportunidades? Quais técnicas são necessárias para candidatar-se a vagas de estágio ou posição júnior em Flutter? 

    O mercado de Flutter é promissor e você pode encontrar boas oportunidades. 

    Veja algumas empresas que utilizam o Flutter: 

    • Nubank; 
    • iFood; 
    • Alibaba; 
    • Ebay. 

    Se você quiser mais detalhes sobre as técnicas e o mercado de trabalho, confira esta pesquisa que realizamos e se mantém atualizada até o momento. 

    Resumo: O que você precisa saber sobre o Flutter e próximos passos  

    Neste artigo, passamos por uma visão geral e mergulhamos no maravilhoso mundo do Flutter. Aprender essa ferramenta é uma ótima escolha para começar a desenvolver aplicações para dispositivos móveis. 

    A documentação bem detalhada ajuda muito nos primeiros passos, tornando o Flutter uma das ferramentas mais amigáveis para aprender. 

    É importante que você já tenha os conhecimentos de lógica de programação e paradigma de orientação a objetos para facilitar o entendimento. 

    Se você já tem conhecimentos de React JS e/ou JavaScript, talvez React Native seja um ponto de transição mais familiar.

    Com apenas a grande barreira que é preparar todo o ambiente de desenvolvimento (que praticamente todas as linguagens de desenvolvimento mobile tem), é difícil não recomendar Flutter. 

    E vamos lançar um desafio! Se você gostou desse artigo, compartilhe nas redes sociais o que você aprendeu com ele com a hashtag #AprendinoBlogdaAlura. 

    Bons estudos! 

    Avalie este artigo 

    ✨ Agradecemos pela sua avaliação! ✨ 

    Estude 2 anos por R$ 158/mês. Planos com até 35% OFF. Ver planos.
    Banner da Alura convidando profissionais a desenvolver habilidades em inteligência artificial para acompanhar as transformações do mercado de tecnologia. A campanha destaca que quem utiliza IA produz mais, cresce na carreira e se torna mais competitivo, reforçando que a inteligência artificial deixou de ser tendência e passou a ser uma habilidade essencial. O banner incentiva a começar a aprender IA com os cursos da Alura e impulsionar a transformação digital.

    Avalie este artigo

    Foto de Matheus Alberto

    Autor(a)

    Matheus Alberto

    Formado em Sistemas de Informação na FIAP e em Design Gráfico na Escola Panamericana de Artes e Design. Trabalho como desenvolvedor e instrutor na Alura. Nas horas vagas sou artista/ilustrador.

    Explore por tópico

    • Mobile
    • Back-end
    • Front-end
    • DevOps
    • UX & Design
    • Dados
    • Gestão & Negócios
    • Inteligência Artificial
    • Cibersegurança
    • Cloud

    Leia também

    • 23/01/2022

      Flexbox no React Native: como posicionar elementos com Flex

      Ler mais
    • 14/10/2024

      Clean Swift: como criar um aplicativo iOS e organizar o código

      Ler mais
    • 06/06/2024

      Dart: O que é? Como começar a estudar? Para quê serve?

      Ler mais
    Ver mais conteúdos

    Inscreva-se em nossa Newsletter

    Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.