How to Change Color of Elevatedbutton in Flutter?

By the end of this tutorial, you’ll know how to Change Color of Elevatedbutton in Flutter, providing a personalized touch to your Flutter app’s user interface. Let’s dive into the details and elevate the style of your ElevatedButton in just a few simple steps.

In this guide, we will explore the process of customizing the color of an ElevatedButton to enhance its visual appeal and align it with your app’s design scheme.

Introduction of change color of Elevatedbutton in Flutter

Flutter, the versatile UI toolkit from Google, empowers developers to create visually appealing and responsive applications.

One crucial component in app design is offering a simple and effective way to trigger actions. In this blog post, we’ll explore how you can elevate your Flutter app by customizing the color and style of the ElevatedButton.

How to Change Color of Elevatedbutton in Flutter?

Changing the Elevated Button Color

The color scheme of your app contributes significantly to its visual identity. With Flutter, altering the color of an ElevatedButton is a breeze.

By utilizing the ButtonStyle class and its backgroundColor property, you can infuse your button with a vibrant hue. Let’s dive into the code:

ElevatedButton(
  onPressed: () {
    // Add your button functionality here
  },
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), // Change button color
  ),
  child: Text('Press me'),
)

In this snippet, the backgroundColor is set to Colors.blue, transforming the button into a captivating blue. Feel free to experiment with different colors to align with your app’s theme.

Customizing the Elevated Button Style

Beyond color, the visual style of your ElevatedButton can be further customized using various properties offered by the ButtonStyle class. Let’s explore an extended example:

ElevatedButton(
  onPressed: () {
    // Add your button functionality here
  },
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), // Change button color
    foregroundColor: MaterialStateProperty.all<Color>(Colors.white), // Change text color
    elevation: MaterialStateProperty.all<double>(8.0), // Change button elevation
    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
      EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0), // Change button padding
    ),
    shape: MaterialStateProperty.all<OutlinedBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0), // Change button border radius
      ),
    ),
  ),
  child: Text('Press me'),
)

In this example, we’ve customized various properties, including foregroundColor for text color, elevation for a 3D effect, padding for button spacing, and shape for a rounded button.

Full code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom ElevatedButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom ElevatedButton Example'),
      ),
      body: Center(
        child: Text('Welcome to your Flutter app!'),
      ),
      floatingActionButton: ElevatedButton(
        onPressed: () {
          // Add your button functionality here
          print('Button Pressed!');
        },
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), // Change button color
          foregroundColor: MaterialStateProperty.all<Color>(Colors.white), // Change text color
          elevation: MaterialStateProperty.all<double>(8.0), // Change button elevation
          padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0), // Change button padding
          ),
          shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0), // Change button border radius
            ),
          ),
        ),
        child: Text('Press me'),
      ),
    );
  }
}

Outputs:

Elevatedbutton Output

Also, Read Related Tutorials

Conclusion

Customizing the color and style of an ElevatedButton in Flutter is a journey into creativity. With the ButtonStyle class, you can effortlessly infuse your buttons with personality, ensuring they seamlessly integrate into your app’s overall aesthetic.

This code creates a simple Flutter app with a centered text widget and an ElevatedButton. The ElevatedButton is customized with a blue background color, white text color, increased elevation, adjusted padding, and a rounded border.

Feel free to modify the code according to your design preferences and requirements.

Share:

Ambika Dulal is a Flutter developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.

Services

UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion

Contact

App Override

New Plaza, Kathmandu