Skip to content

InkWell and FlatButton do not ripple when inside a container with opaque background #3782

@drewwarren

Description

@drewwarren

Steps to Reproduce

I have only tested this against an android emulator.

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue
      ),
      home: new FlutterDemo()
    )
  );
}

class FlutterDemo extends StatelessWidget {

  Widget buttons(BoxDecoration decoration) {
    return new Container(
      decoration: decoration,
      child: new Row(
        children: [
          new FlatButton(
            child: new Text("FLAT BUTTON"),
            onPressed: () => null
          ),
          new InkWell(
            child: new Text("WELL"),
            onTap: () => null
          ),
          new RaisedButton(
            child: new Text("RAISED BUTTON"),
            onPressed: () => null
          )
        ]
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Demo')
      ),
      body: new Column(
        children: [
          // INK DOES NOT SHOW
          buttons(new BoxDecoration(backgroundColor: Colors.yellow[100])),
          buttons(null),
          // INK DOES NOT SHOW
          buttons(new BoxDecoration(gradient: new LinearGradient(colors: [Colors.grey[100], Colors.grey[500]]))),
          buttons(new BoxDecoration(gradient: new LinearGradient(colors: [Colors.black26, Colors.grey[500]]))),
          buttons(new BoxDecoration(backgroundColor: Colors.white10))
        ]
      )
    );
  }
}

Note that the ripple does not appear on the FlatButton and InkWell for first and third rows (the ones that use opaque backgrounds). The ripple works fine on the raised button for all rows.

Flutter Doctor

[✓] Flutter (on Linux, channel alpha)
    • Flutter at /usr/local/google/home/drewwarren/flutter
    • Framework revision 5460e94488 (4 days ago), engine revision 76d5cf230a

[✓] Android toolchain - develop for Android devices (Android SDK 23.0.2)
    • Android SDK at /usr/local/google/users/drewwarren/aswb-sdk
    • Platform android-23, build-tools 23.0.2
    • OpenJDK Runtime Environment (build 1.8.0-google-v7-119990345-117822431)

[✓] Atom - a lightweight development environment for Flutter
    • Atom installed; Flutter plugin version 0.2.2

Logs and Crash Reports

No logs. Requires visual inspection.

Metadata

Metadata

Assignees

Labels

c: new featureNothing broken; request for a new capabilityd: api docsIssues with https://api.flutter.dev/f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.waiting for PR to land (fixed)A fix is in flight

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions