How to Style Flutter ElevatedButton shadow

Here is How to Style Flutter ElevatedButton shadow – or – to add a 1-pixel border with color rgba(223, 220, 211, 1) (Color.fromRGBO(223, 220, 211, 1) in Flutter), here’s how to update both approaches:

---

✅ Full Control (Recommended): With Container + BoxDecoration

Container(
  decoration: BoxDecoration(
    color: Colors.blue, // Button background color
    borderRadius: BorderRadius.circular(8),
    border: Border.all(
      color: Color.fromRGBO(223, 220, 211, 1), // Border color
      width: 1, // 1 pixel
    ),
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 2),
        blurRadius: 4,
        spreadRadius: 0,
        color: Color.fromRGBO(0, 0, 0, 0.25), // Shadow
      ),
    ],
  ),
  child: Material(
    color: Colors.transparent,
    child: InkWell(
      borderRadius: BorderRadius.circular(8),
      onTap: () {
        // handle tap
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Text(
          "Custom Button",
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
)

---

⚠️ With ElevatedButton (More limited)

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    elevation: 4,
    shadowColor: Color.fromRGBO(0, 0, 0, 0.25),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
      side: BorderSide(
        color: Color.fromRGBO(223, 220, 211, 1),
        width: 1,
      ),
    ),
  ),
  onPressed: () {
    // handle tap
  },
  child: Text("Elevated Button"),
)

Summary:

Feature	Container + BoxDecoration	ElevatedButton
Full shadow control	✅	❌ (elevation only)
Custom border	✅	✅
Custom interaction (InkWell)	✅	✅