[🧑‍💻] Estudo - Fundamentos de desenvolvimento de apps Flutter aula 14/44: configuração do ambiente Flutter, widgets essenciais, sintaxe básica de Dart

✨ Resumo do Gemini 2.5 Pro 　

Curso de Fundamentos de desenvolvimento de apps Flutter

DevStory - Inflearn DevStory

Tudo bem se você não tiver conhecimento de desenvolvimento! Fundamentos de desenvolvimento de apps Flutter que até iniciantes conseguem fazer 🏃‍♂️Fundamentos de desenvolvimento de apps Flutter que até iniciantes absolutos podem aprender[foto]Se você aprender desenvolvimento de apps, poderá lançar para o mundo inteiro aquele serviço de app próprio que até então só imaginava. Na verdade

• Original: http://blog.naver.com/hyeogikarp/223882864462
• Horário de publicação no Naver: 2025/05/30 11:30 KST
• Categoria original: estudo de desenvolvimento

Original

Curso de Fundamentos de desenvolvimento de apps Flutter

DevStory - Inflearn

DevStory

Tudo bem se você não tiver conhecimento de desenvolvimento! Fundamentos de desenvolvimento de apps Flutter que até iniciantes conseguem fazer 🏃‍♂️Fundamentos de desenvolvimento de apps Flutter que até iniciantes absolutos podem aprender[foto]Se você aprender desenvolvimento de apps, poderá lançar para o mundo inteiro aquele serviço de app próprio que até então só imaginava. Na verdade, criar um app

www.inflearn.com

1. O que é Flutter?

• Framework cross-platform: desenvolvido pelo Google, permite desenvolver aplicações Android, iOS, Web e Desktop com uma única base de código.

• Usa a linguagem Dart: a UI é escrita em código.

1. Conceito central: tudo é Widget

• Unidade de composição de UI: a tela é composta montando widgets.

• Widget Tree: estrutura hierárquica dos widgets, formada por relações pai-filho.

• Key? key e super(key: key): no construtor de um widget, Key é usado para preservar o estado do widget e atualizá-lo de forma eficiente quando a árvore de widgets é reconstruída. Nesta etapa, basta entender que esse conceito existe.

• BuildContext context: objeto importante que indica a posição do widget atual na árvore de widgets e permite acessar dados ou temas dos widgets superiores. É usado em vários lugares, como Navigator.pop(context).

• Principais categorias de widgets:

• StatelessWidget: widget estático, sem estado.

• StatefulWidget: widget dinâmico que pode ser redesenhado conforme mudanças de estado. (exemplo de código omitido)

• StatefulWidget: widget dinâmico que pode ser redesenhado conforme mudanças de estado. (exemplo de código omitido)

1. Estrutura básica de app e principais widgets

• função main() & runApp() & MaterialApp & Scaffold:

• home do MaterialApp: especifica a primeira tela da aplicação. (ex.: home: HomePage())

• home do MaterialApp: especifica a primeira tela da aplicação. (ex.: home: HomePage())

• Propriedades detalhadas de AppBar:

• Widgets de layout:

• Column & Row:

• Padding: adiciona espaçamento ao redor do widget filho.

• Padding: adiciona espaçamento ao redor do widget filho.

• Container: widget retangular que permite diversas estilizações(tamanho, cor, margem, borda etc.).

• Container: widget retangular que permite diversas estilizações(tamanho, cor, margem, borda etc.).

• Expanded: expande um widget filho de Row ou Column para preencher o espaço restante.

• Expanded: expande um widget filho de Row ou Column para preencher o espaço restante.

• SingleChildScrollView: permite rolagem quando o conteúdo do widget filho ultrapassa a tela.

• SingleChildScrollView: permite rolagem quando o conteúdo do widget filho ultrapassa a tela.

• ListView.builder: cria uma lista rolável que exibe muitos itens de forma eficiente. Cria apenas os itens visíveis na tela.

• ListView.builder: cria uma lista rolável que exibe muitos itens de forma eficiente. Cria apenas os itens visíveis na tela.

• Stack: permite posicionar widgets sobrepostos(eixo Z).

• Stack: permite posicionar widgets sobrepostos(eixo Z).

• AspectRatio: fixa a proporção entre largura e altura do widget filho.

• AspectRatio: fixa a proporção entre largura e altura do widget filho.

• double.infinity: usado em propriedades width ou height de Container etc., para preencher o maior tamanho permitido pelo widget pai.

• double.infinity: usado em propriedades width ou height de Container etc., para preencher o maior tamanho permitido pelo widget pai.

• SizedBox: usado para criar um espaço vazio de tamanho específico ou para definir explicitamente o tamanho de um widget filho.

• SizedBox: usado para criar um espaço vazio de tamanho específico ou para definir explicitamente o tamanho de um widget filho.

• Widgets básicos de UI:

• Text & TextStyle: exibe texto e define seu estilo.

• Image.network: carrega e exibe uma imagem a partir de uma URL de rede.

• Image.network: carrega e exibe uma imagem a partir de uma URL de rede.

• fit: BoxFit.cover: faz a imagem preencher o espaço definido mantendo a proporção. (se a imagem for maior que o espaço, pode ser cortada)Icon: exibe um ícone de Material Design.

• fit: BoxFit.cover: faz a imagem preencher o espaço definido mantendo a proporção. (se a imagem for maior que o espaço, pode ser cortada)

• fit: BoxFit.cover: faz a imagem preencher o espaço definido mantendo a proporção. (se a imagem for maior que o espaço, pode ser cortada)

• Icon: exibe um ícone de Material Design.

• Detalhes de TextField & InputDecoration: recebe entrada de texto do usuário.

• Detalhes de TextField & InputDecoration: recebe entrada de texto do usuário.

• ElevatedButton, TextButton, IconButton: widgets de botão de vários tipos.

• ElevatedButton, TextButton, IconButton: widgets de botão de vários tipos.

• Card: cria uma UI em formato de cartão do Material Design. Tem uma leve sombra e cantos arredondados.

• Card: cria uma UI em formato de cartão do Material Design. Tem uma leve sombra e cantos arredondados.

• Divider: cria uma linha divisória visual.

• Divider: cria uma linha divisória visual.

• CircleAvatar: usado principalmente para exibir imagens circulares, como imagens de perfil de usuário.

• CircleAvatar: usado principalmente para exibir imagens circulares, como imagens de perfil de usuário.

• Colors.black.withOpacity(0.5): aplica transparência a uma cor. 0.0(totalmente transparente) ~ 1.0(totalmente opaco).

• Colors.black.withOpacity(0.5): aplica transparência a uma cor. 0.0(totalmente transparente) ~ 1.0(totalmente opaco).

• Drawer e widgets relacionados:

• Drawer: definido na propriedade drawer do Scaffold, é um painel que desliza a partir de um lado da tela.

• DrawerHeader: widget usado para decorar a área superior de um Drawer.

• ListTile: frequentemente usado para compor cada item dentro de um Drawer. Tem propriedades como leading, title, trailing e onTap.

• ListTile: frequentemente usado para compor cada item dentro de um Drawer. Tem propriedades como leading, title, trailing e onTap.

• PageView: widget que permite ver várias páginas(telas) rolando para a esquerda e para a direita. (ex.: banner de evento)

1. Fundamentos de navegação

• Navigator.pop(context): usado para remover a tela atual(rota) da pilha e voltar para a tela anterior. Útil ao fechar um Drawer ou um diálogo.

1. Lidando com dados(exemplo simples)

• List<Map<String, dynamic»: montar dados usados em ListView.builder etc. com listas e mapas de Dart é uma prática comum. Cada Map contém as informações de um item, e os valores são acessados por chaves String.

1. Estrutura do projeto e ambiente de desenvolvimento

• pasta lib: local onde se escreve principalmente código Dart. main.dart é o arquivo inicial padrão.

• arquivo pubspec.yaml: arquivo para configurar metadados do projeto, gerenciamento de dependências(bibliotecas/pacotes), versão do SDK etc.

• VSCode: usado como principal ferramenta de desenvolvimento.

• Command Palette (Ctrl+Shift+P / Cmd+Shift+P): executa vários comandos Flutter, como Flutter: New Project e Flutter: Launch Emulator.

• Atalhos úteis: é essencial aprender atalhos úteis como autocompletar(Ctrl+Space/Option+Esc), refatorar(Ctrl+Shift+R), visualizar parâmetros(Ctrl+Option) etc.! (para melhorar a produtividade)

• Mais tarde pretendo fazer muitos posts simples focados em atalhos do VSCode.

• ex) Como ativar o Presentation Mode no VSCode

• Emulator: dispositivo móvel virtual, usado para testar apps sem um aparelho real.

• Hot Reload: reflete rapidamente alterações de código na tela, mantendo em grande parte o estado do app. (ícone em forma de raio)

• Hot Restart: inicializa o estado do app e reinicia o aplicativo. (ícone em forma de círculo)

• analysis_options.yaml: arquivo que configura regras de análise de código Dart. (ex.: ativar/desativar regras de lint específicas)

• Por exemplo, quando se tenta usar a função print para exibir texto no Debug Console, ele faz um escândalo dizendo que não se deve usar isso em production.

• Como isso é algo que dá para remover sozinho na hora de production, vamos remover ‘avoid_print’ das regras de lint. Solução 1. Escrever um comentário ignore_for_file no topo do arquivo dart correspondente.

• Como isso é algo que dá para remover sozinho na hora de production, vamos remover ‘avoid_print’ das regras de lint.

• Solução 1. Escrever um comentário ignore_for_file no topo do arquivo dart correspondente.

• Solução 2. Ignorar isso em analysis_options.yaml, na raiz do projeto.

• Solução 2. Ignorar isso em analysis_options.yaml, na raiz do projeto.

• Solução 2. Ignorar isso em analysis_options.yaml, na raiz do projeto.

1. Método de estudo de Flutter

• Widget Catalog & Widget of the week: aprender vários widgets por meio do catálogo de widgets da documentação oficial do Flutter e da série “Widget of the week”.

• Uso da comunidade: perguntar, responder e crescer junto em comunidades relacionadas a Flutter(fóruns online, chats abertos etc.).

• Domínio da sintaxe de Dart: como Flutter usa a linguagem Dart, é importante entender bem a sintaxe de Dart.

💭 Diário

Eu já tinha mexido com C, C++, Java, Javascript, Python, … inúmeras linguagens, e também com vários frameworks/ferramentas como Spring, Vue.js, Django, FlutterFlow. Mesmo assim, comecei pelos cursos básicos de Flutter porque fiquei pensando se talvez houvesse algum conceito fundamental que eu pudesse ter deixado passar.

Tentei pular rapidamente achando que eram conceitos que eu já conhecia, mas parece que fiquei longe do desenvolvimento por tempo demais. Talvez a musculatura do cérebro tenha endurecido, porque eu não conseguia imaginar com agilidade, dentro da cabeça, de que forma deveria escrever o código.

Agora virou uma época em que, no VSCode, dá para receber ajuda de IA como Inline Chat(Gemini 2.5 Pro) ou Code Recommendation(GitHub Copilot), perguntar dúvidas rapidamente, encontrar respostas e usar autocompletar para codar com eficiência. Por isso espero recuperar ainda mais rápido a musculatura cerebral de programação.

O caminho é longo! Bora!