Domine a estilização no Flutter
Para quem está começando no Flutter uma grande dificuldade é fazer um bom front-end, já que não é tão simples como no CSS, preparei esse artigo com o basico para quem está começando, espero ter ajudado
🎨 Cores
✅ Definir cor diretamente
dart
CopiarEditar
Container(
color: Colors.blue,
)
🎯 Cor personalizada com Color
dart
CopiarEditar
Container(
color: Color(0xFF3B82F6), // azul personalizado
)
📦 Usando variável
dart
CopiarEditar
const azulPrimario = Color(0xFF3B82F6);
Container(
color: azulPrimario,
)
🧱 Bordas arredondadas
✅ Em um Container
dart
CopiarEditar
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(16), // arredondamento
),
)
✅ Em um TextField
dart
CopiarEditar
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
)
✅ Em um ElevatedButton
dart
CopiarEditar
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
),
onPressed: () {},
child: Text("Botão"),
)
📝 TextStyle – Estilizando texto
dart
CopiarEditar
Text(
"Texto estilizado",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.deepPurple,
letterSpacing: 1.5,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
),
)
📐 Margem e Padding
✅ Padding (interna)
dart
CopiarEditar
Padding(
padding: EdgeInsets.all(16),
child: Text("Com padding"),
)
✅ Margin (externa)
dart
CopiarEditar
Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Text("Com margin"),
)
🎯 Bordas e Sombras
✅ Borda com BoxDecoration
dart
CopiarEditar
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(10),
),
)
✅ Sombras com boxShadow
dart
CopiarEditar
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
)
🎛️ Botões estilizados
✅ ElevatedButton
dart
CopiarEditar
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
onPressed: () {},
child: Text("Botão personalizado"),
)
🧑🎨 TextField estilizado
dart
CopiarEditar
TextField(
style: TextStyle(color: Colors.black),
decoration: InputDecoration(
hintText: "Digite algo",
hintStyle: TextStyle(color: Colors.grey),
filled: true,
fillColor: Colors.grey[200],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
),
)
📄 Card estilizado
dart
CopiarEditar
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
elevation: 8,
child: Padding(
padding: EdgeInsets.all(16),
child: Text("Conteúdo dentro do card"),
),
)
📁 Resumo rápido
ElementoComo estilizarCorcolor
, backgroundColor
BordaBoxDecoration > border
Borda arredondadaBorderRadius.circular()
SombrasboxShadow
TextoTextStyle
PaddingEdgeInsets
BotõesstyleFrom()
InputInputDecoration
CardsCard > shape
, elevation