Container clipBehavior not working

On flutter dart pad:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color:Colors.orange,
      child: Container(
              height: 100,
              width: 100,
              clipBehavior: Clip.antiAlias,
              // margin: EdgeInsets.symmetric(horizontal: 20),
              padding: EdgeInsets.symmetric(vertical: 12),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(20),
              ),
        ),
    );
  }
}

Anti alias clip behavior is not working

@steeling

@steeling
What's the expected behavior are you looking for ?
Can you provide flutter doctor -v and also see if it works for you on mobile ?

Thanks.

It's viewable in a dartpad FYI, but yes I see it on mobile as well. Flutter doctor:

flutter doctor -v
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale en-US)
• Flutter version 2.2.2 at /Users/steeling/dev/flutter
• Framework revision d79295a (2 weeks ago), 2021-06-11 08:56:01 -0700
• Engine revision 91c9fc8fe0
• Dart version 2.13.3

[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
flutter config --android-sdk to update to that location.

[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.10.0

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

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

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

[✓] Connected device (2 available)
• iPhone 12 mini (mobile) • 2297B16A-10FC-4973-A362-530380896D7E • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
• Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114

! Doctor found issues in 2 categories.

I'd expect it to clip properly to the rounded border

@steeling

@steeling
If you use border: Border.all(), inside BoxDecoration, it gives below:

Does this help ?

I'd expect there to be no orange portion in the image

Thanks. It seems the directly using the clipBehavior: Clip.antiAlias inside Container doesn't clip the edges, as below:

But using the same code as provided above, if we use Card widget instead of parent Container and use shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)), then it somewhat clips the orange edges.

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.2, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.2.2 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision d79295af24 (11 days ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

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

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 91.0.4472.106

• No issues found!

@HansMuller

Cc: @HansMuller

Just want to add that this bug is still present in the latest version, just so this issue is not auto-closed.

?? any update?

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

Fix Container clipBehavior not clipping decoration painting

Navigation Menu

Repository navigation

Container clipBehavior not working #85268

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Container clipBehavior not working #85268

Description

Activity

darshankawar commented on Jun 25, 2021

steeling commented on Jun 25, 2021

darshankawar commented on Jun 28, 2021

steeling commented on Jun 29, 2021

darshankawar commented on Jun 30, 2021

darshankawar commented on Jun 30, 2021

MatrixDev commented on Jan 6, 2025

codelovercc commented on Feb 7, 2026

flutter-triage-bot commented on Feb 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions