Article image
Gustavo Viti
Gustavo Viti07/04/2025 08:28
Compartilhe

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

    Compartilhe
    Comentários (0)