-
Notifications
You must be signed in to change notification settings - Fork 29.8k
Description
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:
- Execute
flutter runon the code sample - 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:

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'),
),
),
),
),
);
}
}