flutter / flutter/flutter

Ink widget is not getting clipped properly by Padding

Open
#143,927 1 comment 0 reactions 0 assignees View on GitHub
found in release: 3.19 found in release: 3.20 has reproducible steps p: material_ui P2 package team-design triaged-design
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Create a grid of items.
Wrap an item into Ink+InkWell
Add decoration border to the Ink.
Wrap the whole grid into Padding.

### Expected results

The whole items are getting cropped by Padding.

### Actual results

Items' inner content is cropped, but a border passed through padding.

### Code sample

Code sample

```dart
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(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 16), // Bad crop happens here!
child: GridView.count(
crossAxisCount: 2,
children: List.generate(10, (index) => const Item()),
),
),
bottomNavigationBar: NavigationBar(
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

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

@override
Widget build(BuildContext context) {
return Ink(
decoration: BoxDecoration(
border: Border.all(width: 4),
),
child: InkWell(
onTap: () {},
child: const Column(
children: [
Text(
'Lorem Ipsum',
style: TextStyle(fontSize: 24),
),
SizedBox(
height: 10,
),
Icon(Icons.earbuds_rounded)
],
),
),
);
}
}

```

### Screenshots or Video

Screenshots / Video demonstration

Screenshots from my real project.

Ink (pay attention to border lines)

![image](https://github.com/flutter/flutter/assets/12999702/14587727-f5ba-4ab2-8957-951d13a8c0e2)

Container

![image](https://github.com/flutter/flutter/assets/12999702/644529b9-f64a-4fe2-b908-607bd2649343)

I have also prepared a minimal example, there's a video from it, demonstrating the problem

https://github.com/flutter/flutter/assets/12999702/2dbb22ff-8e89-40d3-86b4-1459235553a2

### Logs

Logs

```console
There are no errors in the console...
```

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.16.2, on macOS 13.0.1 22A400 darwin-arm64, locale ru-RU)
• Flutter version 3.16.2 on channel stable at /Users/svmolchan1/fvm/versions/stable
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 9e1c857886 (3 months ago), 2023-11-30 11:51:18 -0600
• Engine revision cf7a9d0800
• Dart version 3.2.2
• DevTools version 2.28.3

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/svmolchan1/Library/Android/sdk
• Platform android-33, build-tools 33.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.14.3

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

[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

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

[✓] Connected device (3 available)
• M2101K9AG (mobile) • cc706425 • android-arm64 • Android 13 (API 33)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.0.1 22A400 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 120.0.6099.216

[✓] Network resources
• All expected network resources are available.

• No issues found!
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.