How to Change the Color of ElevatedButton in Flutter

The ElevatedButton is the ready-to-go button for Flutter. I already have a blog post on adding ElevatedButton in flutter. Now, let’s check how to change the color of the elevated button in Flutter.

By default, the ElevatedButton inherits the theme color. We can tweak the background color, as well as the foreground color of the ElevatedButton easily. For that, make use of the backgroundColor and foregroundColor properties of the ElevatedButton.styleFrom method.

ElevatedButton(
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red, foregroundColor: Colors.yellow),
            onPressed: () {},
            child: const Text('Elevated Button'),
          )

The background color is red whereas the foreground color is yellow. See the following output.

If you want to change ElevatedButton based on the different states of a button then please check out this tutorial.

Following is the complete code for the ElevatedButton color example.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Elevated Button Color Example'),
        ),
        body: Center(
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red, foregroundColor: Colors.yellow),
            onPressed: () {},
            child: const Text('Elevated Button'),
          ),
        ));
  }
}

This is how you can change the background color and foreground color of the elevated button in Flutter.