Desenvolvimento do seu primeiro aplicativo Flutter
Acompanhe o processo de criação de um aplicativo Flutter simples de "Hello World", entendendo a estrutura do projeto e o recurso de recarregamento rápido.
Desenvolvimento do seu primeiro aplicativo Flutter é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Your First Flutter App!
Time to build your first Flutter app — a simple Hello World to learn the workflow. You’re about to see why Flutter feels so fast.
Create a New Project
Run flutter create to scaffold a new project, then cd into the folder. One command and you’re ready to code.
flutter create my_first_app
cd my_first_appUnderstand Project Structure
Flutter scaffolds several folders. The ones that matter: lib/main.dart (your code), pubspec.yaml (dependencies), and the android/ — ios/ platform dirs.
The App Entry Point: main.dart
Every app starts at main(). Inside it, runApp() takes your root widget and attaches it to the screen.
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Launching App...', // Text displayed directly
textDirection: TextDirection.ltr, // Required for root Text widget
style: TextStyle(color: Colors.blue, fontSize: 20),
),
),
);
}Building Your MyApp Widget
Wrap your app in a root widget, often MyApp. For UI that doesn’t change, use a StatelessWidget — it just needs a build method describing the UI.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// This widget will define the app's look and feel
return const Placeholder(); // A temporary visual marker
}
}MaterialApp & Scaffold Basics
MaterialApp adds Material Design; inside it Scaffold gives you the basic layout — an AppBar on top and a body for content.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
home: Scaffold(
appBar: AppBar(
title: const Text('My First App'), // Text in the app bar
),
body: const Center(
child: Text(
'Hello, CoddyKit!', // Our main content text
style: TextStyle(fontSize: 24),
),
),
),
);
}
}Running Your New App
App ready? Run it. Start an emulator, simulator, or plug in a device, then run flutter run from the project root.
flutter runMeet Hot Reload!
Hot Reload injects code changes into a running app almost instantly — no full restart, no lost state. Just save your .dart file to trigger it.
Hot Reload in Action
Try it yourself: tweak the AppBar text, the body, or the theme color below, then save and watch Hot Reload update the running app live.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.green), // Changed color!
home: Scaffold(
appBar: AppBar(
title: const Text('My Updated App'), // Changed text!
),
body: const Center(
child: Text(
'Hot Reloaded!', // Changed text and size!
style: TextStyle(fontSize: 28, color: Colors.red),
),
),
),
);
}
}Hot Reload vs. Hot Restart
Hot Reload injects code and keeps your app’s state — great for UI tweaks. Hot Restart rebuilds from scratch and wipes state, for bigger changes.
Quick Check: Hot Reload
You've seen Flutter's hot reload in action. Let's test your understanding!
Recap: First Flutter App
Congrats! You built and ran your first Flutter app — flutter create, the main.dart structure, MaterialApp + Scaffold, and the power of Hot Reload.
Perguntas Frequentes
A aula “Desenvolvimento do seu primeiro aplicativo Flutter” é grátis?
Sim — o texto completo de “Desenvolvimento do seu primeiro aplicativo Flutter” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.
O que vou aprender em “Desenvolvimento do seu primeiro aplicativo Flutter”?
Acompanhe o processo de criação de um aplicativo Flutter simples de "Hello World", entendendo a estrutura do projeto e o recurso de recarregamento rápido. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Flutter Mobile Development?
Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Desenvolvimento do seu primeiro aplicativo Flutter”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Flutter Mobile Development?
Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Ecossistema e configuração do Flutter
- Fundamentos de Dart para Flutter
- Desenvolvimento do seu primeiro aplicativo Flutter
- Programação Assíncrona com Futures e async/await