RaisedButton highlightColor draws above background color

[saprvade]

It seems that the current implementation of the RaisedButton makes it impossible for me to use a transparent highlight color for the pressed state. For example:

RaisedButton(child: Text('Raised button'), color: Color(0xFFFF0000), highlightColor: Color(0x33000000), onPressed: () {})

The button is red and the highlight color here is 20% black, but if you press this button, you still see the red color behind. That means I can't have a transparent highlight color because the underlying one will mess it up. This doesn't seem to work as expected for me. Are there any workarounds to this?

[zoechi]

Please add the output of flutter doctor -v.

A screenshot would be helpful as well.

[saprvade]

flutter_doctor.sh -v
[✓] Flutter (Channel google3, vnull, on Linux, locale en_US.UTF-8)
    • Flutter version null at //third_party/dart/flutter
    • Framework revision 7a88fbc5fd (18 days ago), 2018-12-20T00:00:00.000
    • Engine revision dbdb5e6f8c
    • Dart version f9ebf21297

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    • Android SDK at /usr/local/google/home/gsaprykin/Android/Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-experimental, build-tools 28.0.2
    • Java binary at: /opt/android-studio-with-blaze-3.2/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] Android Studio (version 3.2)
    • Android Studio at /opt/android-studio-with-blaze-3.2
    • Flutter plugin version 31.3.1
    • Dart plugin version 181.5656
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

[✓] Google3 (on linux)
    • KVM enabled

• No issues found!

[saprvade]

[dnfield]

This is almost certainly caused byt he same problem in #48534

[dnfield]

Or not.

I'm not really sure what the bug is here. What do you expect to happen when the highlight color is (semi-)transparent?

Why wouldn't the color of the button show through in such a case?

[saprvade]

I expect to see the button background through. Imagine this button was on top of an image. If I press the button, I want to see the background image behind the button. The red color should be gone completely when I press.

Red is the color of the button in the default state. If I press it, why do I still see the default color behind? The button is mixing both colors for some reason.
My expectation is that when I press it should be color of the pressed/highlighted state only. The default one should go away completely.

With the current implementation of the RaisedButton it seems impossible to achieve the effect I want. My spec says the color of the button in the pressed state should be 20% gray which is not feasible because it will be mixed with the red color when I press.

Please let me know if this is still not clear.

[dnfield]

Perhaps I'm just missing something, but you're setting the button color to red - and then you're setting the highlight color to semi-transparent black.

And it sounds like you're surprised that you're still seeing red through the semi-transparent highlight color. So we're drawing the highlight when you press, but it's transparent, so you can still see the color behind it. This all sounds like it's WAI to me.

Can you share the example of an image where this isn't working out?

[Ahmadre]

@saprvade why don't you just set a boolean which checks if the button is actively beeing pressed. If true, the default button color will be transparent. By the way, you can also use FlatButton or just a custom Widget created by yourself with the help of Container or Material Widgets

[saprvade]

@dnfield try the button from my example and put it on top of an image. When you press it you will see dimmed solid red, instead of an image. I want to see image when I press. Sorry I can't provide an example now because this bug has been filed a year ago and I'm no longer working on this :)

@Ahmadre does that actually work, setting the default color to transparent while pressed? I think I had some issues that it didn't redraw or something like that. Can't tell for sure it was a long time ago.. If you can try this workaround and it works for you then I guess we can close this.

Thanks!

[TahaTesser]

Code Sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            RaisedButton(
              child: Text('Raised button'),
              color: Colors.yellow,
              highlightColor: Colors.purple,
              onPressed: () {},
            ),
            RaisedButton(
                child: Text('Raised button'),
                color: Color(0xFFFF0000),
                highlightColor: Color(0x33000000),
                onPressed: () {})
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-7.1.pre, on Mac OS X 10.15.6 19G73, locale
    en-GB)
    • Flutter version 1.20.0-7.1.pre at /Users/taha/Code/flutter_dev
    • Framework revision 7736f3bc90 (6 days ago), 2020-07-10 16:33:05 -0700
    • Engine revision d48085141c
    • Dart version 2.9.0 (build 2.9.0-21.2.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version
    30.0.0)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google
      Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (5 available)
    • SM M305F (mobile)      • 32003c30dc19668f          • android-arm64  •
      Android 10 (API 29)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            •
      iOS 13.6
    • macOS (desktop)        • macos                     • darwin-x64     •
      Mac OS X 10.15.6 19G73
    • Web Server (web)       • web-server                • web-javascript •
      Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 83.0.4103.116

• No issues found!

[Piinks]

RaisedButton has been removed from the framework now, and has been been replaced by ElevatedButton. Does this issue still persist in the new API? highlightColor is no longer part of the Material Design spec, and so it dow not exist as part of the ElevatedButton ButtonStyle.

[github-actions]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.