Skip to content

Material Card containing InkWell does not properly clip corners #109776

@bryanoltman

Description

@bryanoltman

Steps to Reproduce

This can be seen on the example "This sample shows creation of a Card widget that can be tapped" on https://api.flutter.dev/flutter/material/Card-class.html.

Also:

  1. Execute flutter run on the code sample
  2. Tap the card

Expected results:
The InkWell's Ink has the same rounded corners as the Card

Actual results:
The InkWell's ink does not have rounded corners:
Simulator Screen Shot - iPhone 13 - 2022-08-18 at 10 55 46

Note

I understand that this issue is occurring because the Card has a border radius and the child InkWell does not. While a user can work around this by adding their own border radius with a hardcoded value that matches the Card's, this seems like it shouldn't be necessary – is there any case where someone would want the child widget's UI to extend beyond the rounded corners of the Card? Users should not have to use workarounds because the out-of-the-box behavior looks broken when we are completely in control of said out-of-the-box behavior.

Ideally this change would be made in the Card (this would allow people to create better-looking UI with less code), but I know that there could be any number of reasons that making this change in Card isn't the right move (unforeseen performance problems, greatly increased complexity, etc. etc. etc.). If we can't make the change in Card, the documentation example should at least be updated to show an example that doesn't look broken.

Code sample
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TappableCardContainer(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Card(
          child: InkWell(
            onTap: () {},
            child: Padding(
              padding: EdgeInsets.all(20),
              child: Text('hello'),
            ),
          ),
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    d: api docsIssues with https://api.flutter.dev/f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions