Objetivo: Referencia rapida para acompanhamento da aula e consulta posterior.
- Comandos Essenciais
- Estrutura do Projeto
- Widgets Fundamentais
- Layout Basico
- Estilizacao
- Navegacao
- Recursos e Documentacao
# Verificar instalacao do Flutter
flutter doctor
flutter doctor -v # Versao detalhada
# Criar novo projeto
flutter create nome_projeto
flutter create --org com.empresa nome_projeto
# Listar dispositivos disponiveis
flutter devicesDocumentacao: Get Started
# Rodar app
flutter run
flutter run -d chrome # Web
flutter run -d macos # macOS
flutter run -d <device-id> # Dispositivo especifico
# Atalhos durante execucao
r # Hot Reload (recarrega codigo)
R # Hot Restart (reinicia app)
q # SairDocumentacao: flutter run
flutter pub get # Instalar dependencias
flutter pub upgrade # Atualizar dependencias
flutter pub outdated # Ver desatualizadas
flutter pub add nome_pacote # Adicionar pacoteDocumentacao: Using packages
flutter build apk # Android APK
flutter build ios # iOS
flutter build web # Web
flutter analyze # Analisar codigo
flutter test # Rodar testes
flutter clean # Limpar cachename: meu_app
description: Descricao do app
version: 1.0.0+1
environment:
sdk: ">=3.0.0 <4.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
assets:
- assets/images/Documentacao: pubspec file
lib/
├── main.dart # Ponto de entrada
├── screens/ # Telas do app
├── widgets/ # Widgets reutilizaveis
├── models/ # Classes de dados
├── services/ # Logica de negocio
└── utils/ # Utilitarios
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Meu App',
theme: ThemeData(primarySwatch: Colors.blue),
home: HomePage(),
);
}
}Documentacao: MaterialApp
Scaffold(
appBar: AppBar(
title: Text('Titulo'),
actions: [
IconButton(icon: Icon(Icons.search), onPressed: () {}),
],
),
body: Center(child: Text('Conteudo')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(...),
)Documentacao: Scaffold
class MeuWidget extends StatelessWidget {
final String titulo;
const MeuWidget({required this.titulo});
@override
Widget build(BuildContext context) {
return Text(titulo);
}
}Documentacao: StatelessWidget
class Contador extends StatefulWidget {
@override
State<Contador> createState() => _ContadorState();
}
class _ContadorState extends State<Contador> {
int _count = 0;
void _incrementar() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('$_count'),
ElevatedButton(
onPressed: _incrementar,
child: Text('Incrementar'),
),
],
);
}
}Documentacao: StatefulWidget
Container(
width: 100,
height: 100,
padding: EdgeInsets.all(16),
margin: EdgeInsets.symmetric(vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(color: Colors.black26, blurRadius: 4),
],
),
child: Text('Conteudo'),
)Documentacao: Container
// Column (vertical)
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Item 1'),
Text('Item 2'),
],
)
// Row (horizontal)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.star),
Text('5.0'),
],
)// ListView simples
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
],
)
// ListView.builder (eficiente para listas longas)
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)Documentacao: ListView
Stack(
alignment: Alignment.center,
children: [
Container(width: 200, height: 200, color: Colors.blue),
Text('Sobreposto'),
],
)Documentacao: Stack
Text(
'Hello Flutter',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
)Documentacao: Text
// Cores predefinidas
Colors.red
Colors.blue[500] // Com variacao
// Cores customizadas
Color(0xFF42A5F5) // Hex
Color.fromRGBO(66, 165, 245, 1.0) // RGBA
Colors.blue.withOpacity(0.5) // Com opacidadeDocumentacao: Colors
EdgeInsets.all(16) // Todos iguais
EdgeInsets.symmetric(horizontal: 16, vertical: 8)
EdgeInsets.only(left: 16, top: 8)
EdgeInsets.fromLTRB(16, 8, 16, 8) // L, T, R, BDocumentacao: EdgeInsets
SizedBox(height: 16) // Espaco vertical
SizedBox(width: 16) // Espaco horizontal// Ir para nova tela
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NovaTela()),
);
// Voltar
Navigator.pop(context);
// Passar dados
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetalhesScreen(id: 123),
),
);Documentacao: Navigation
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/detail': (context) => DetailScreen(),
},
)
// Navegar
Navigator.pushNamed(context, '/detail');| Recurso | Link |
|---|---|
| Documentacao Flutter | docs.flutter.dev |
| API Reference | api.flutter.dev |
| Catalogo de Widgets | Widget Catalog |
| Cookbook (Receitas) | Cookbook |
| Codelabs | codelabs.developers.google.com |
| Ferramenta | Link |
|---|---|
| DartPad (Playground) | dartpad.dev |
| pub.dev (Pacotes) | pub.dev |
| Flutter Gallery | gallery.flutter.dev |
| Canal | Link |
|---|---|
| YouTube Flutter | youtube.com/@flutterdev |
| Twitter/X | @FlutterDev |
| Discord | Discord Flutter |
| Recurso | Link |
|---|---|
| Dart Language Tour | dart.dev/language |
| Effective Dart | dart.dev/effective-dart |
| Dart Cheatsheet | dart.dev/codelabs/dart-cheatsheet |
| Atalho | Acao |
|---|---|
stless |
Criar StatelessWidget |
stful |
Criar StatefulWidget |
Cmd/Ctrl + . |
Quick Fix / Refactor |
Cmd/Ctrl + Shift + P |
Command Palette |
F5 |
Iniciar Debug |
- Flutter Doctor sem erros
- Criar e rodar projeto Flutter
- Entender StatelessWidget vs StatefulWidget
- Usar setState() para atualizar UI
- Criar layouts com Column, Row, Container
- Navegar entre telas
- Usar Hot Reload durante desenvolvimento
Proxima Aula: Widgets Basicos e Layout