Flutter Change ElevatedButton Background Color

We can set ElevatedButton background color using backgroundColor property of ElevatedButton.styleFrom(). We are making 3 buttons and applying background color using three different color formats Color constant, Hex color and ARGB color code.

Flutter Change ElevatedButton Background Color:

1. Setting up background color from Color constant.

  ElevatedButton(
      style: ElevatedButton.styleFrom(
      backgroundColor: Colors.teal,
         textStyle: const TextStyle(fontSize: 21),
      ),
      onPressed: () => {},
      child: const Text('Button 1'),
   ),

2. Setting up background color from Hex color code on ElevatedButton.

  ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color(0xffFF1744),
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: () => {},
          child: const Text('Button 2'),
        ),

3. Setting up background color from ARGB color code on ElevatedButton.

  ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color.fromARGB(255, 170, 0, 255),
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: () => {},
          child: const Text('Button 3'),
        )

4. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  void main temp(){
    
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: SafeArea(
          child: Center(
              child: Column(children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.teal,
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: () => {},
          child: const Text('Button 1'),
        ),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color(0xffFF1744),
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: () => {},
          child: const Text('Button 2'),
        ),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color.fromARGB(255, 170, 0, 255),
            textStyle: const TextStyle(fontSize: 21),
          ),
          onPressed: () => {},
          child: const Text('Button 3'),
        )
      ]))),
    ));
  }
}

Screenshot: