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, backgroundColorBordaBoxDecoration > borderBorda arredondadaBorderRadius.circular()SombrasboxShadowTextoTextStylePaddingEdgeInsetsBotõesstyleFrom()InputInputDecorationCardsCard > shape, elevation