Stack widget does not clip children wrapped in Align #71625

agreaves · 2020-12-03T01:20:00Z

According to this documentation: flutter.dev/go/clip-behavior, Stack is one of the few widgets that will clip it's children by default (as {Clip clipBehavior = Clip.hardEdge} is the default). However, even with a simple example (which I've pasted below) this is not the case for children wrapped in Align.

Here is an example main.dart that recreates the issue:

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.green),
                    ),
                    child: Stack(
                      children: [
                        Align(
                          alignment: Alignment(-0.98, 0.43),
                          child: Container(
                            width: 120,
                            height: 120,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.black,
                            ),
                          ),
                        ),
                        Align(
                          alignment: Alignment(1.8, 1),
                          child: Container(
                            width: 120,
                            height: 120,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.blue,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Container(width: 100, height: 100, color: Colors.red),
              ],
            ),
          ),
        ),
      );
}

Expected results: The child with Alignment(1.8, 1) extends beyond the bounds of the Stack and should be clipped.
Actual results: The child with Alignment(1.8, 1) is not clipped and is painted beyond the bounds of the Stack.

Output of flutter analyze:

Running "flutter pub get" in bug...                                408ms
Analyzing bug...                                                        
No issues found! (ran in 3.2s)

Output of flutter doctor -v:

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.6 19G73 darwin-x64, locale en-US)
    • Flutter version 1.24.0-10.2.pre at /Users/agreaves/flutter
    • Framework revision 022b333a08 (2 weeks ago), 2020-11-18 11:35:09 -0800
    • Engine revision 07c1eed46b
    • Dart version 2.12.0 (build 2.12.0-29.10.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/agreaves/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.1

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

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 40.2.2
    • Dart plugin version 191.8580
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

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

[✓] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Web Server (web)                   • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 86.0.4240.198

• No issues found!

Here's a snapshot of the result (it's basically just what I described):

The text was updated successfully, but these errors were encountered:

agreaves · 2020-12-03T02:31:00Z

Update: After playing around with it a little more, I noticed that adding a Positioned widget inside of the Stack changes this behavior, but only if the widget needs to be clipped. So basically, an Aligned child that should be clipped is only clipped if there is also a Positioned child that needs to be clipped. I've added code below to demonstrate:

The main.dart file demonstrating this behavior:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Row(
              children: [
                Container(
                  width: 200,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.green),
                  ),
                  child: Stack(
                    children: [
                      Positioned(
                        top: 100,
                        // Comment out the line below and uncomment the line below
                        // that to demonstrate the difference.
                        left: 90,
                        // left: 100,
                        child: Container(
                          width: 100,
                          height: 100,
                          color: Colors.indigo,
                        ),
                      ),
                      Align(
                        alignment: Alignment(-0.98, 0.23),
                        child: Container(
                          width: 120,
                          height: 120,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.black,
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment(1.8, 0.5),
                        child: Container(
                          width: 120,
                          height: 120,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.red,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

When the Positioned widget doesn't need to be clipped:

When the Positioned widget is nudged just to the right and needs to be clipped:

darshankawar · 2020-12-03T07:13:03Z

@agreaves
What should be the expected behavior you are looking from your updated code sample's point of view ?

agreaves · 2020-12-03T07:29:57Z

The expected behavior would be that in both the first view and the second view (of my updated code), the blue circle is clipped, because it extends beyond the bounds of the stack.

If not, then I would expect them to both not clip the blue circle. The most unintuitive case (to me at least) is the case shown above, where the blue circle is only clipped when there is a Positioned widget in the Stack AND it extends beyond the bounds of the Stack.

darshankawar · 2020-12-03T10:31:50Z

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-IN)
    • Flutter version 1.22.4 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 1aafb3a8b9 (3 weeks ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (1 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11
      (API 30) (emulator)

• No issues found!

With Positioned widget's top is not same as left :

With Positioned widget's top = left:

pingbird · 2020-12-03T18:30:49Z

The reason this happens is because Stack will only push a clip when its children overflow, in this case the immediate child of the Stack (Align) does not extend beyond it.

Perhaps Align should have its own clipping behavior, with an overflow indicator similar to Flex.

agreaves · 2020-12-03T19:12:35Z

Interesting, so the Align widget doesn't extend beyond the Stack even when its child does?

Patrick386 · 2021-10-25T13:26:55Z

Stack clipping is confusing. How do you cut a child item when it crosses the boundaries of the stack?

maheshmnj · 2022-12-21T00:59:33Z

Reproduces on stable 3.3 and master 3.7, Notice the Blue circle overflows but does not clip. Code sample in the original post

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
      to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

darshankawar added in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Dec 3, 2020

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Dec 3, 2020

maheshmnj added found in release: 3.3 Found to occur in 3.3 found in release: 3.7 Found to occur in 3.7 and removed found in release: 1.22 Found to occur in 1.22 f: material design flutter/packages/flutter/material repository. labels Dec 21, 2022

maheshmnj changed the title ~~Stack widget does not clip children wrapped in Align (beta channel)~~ Stack widget does not clip children wrapped in Align Dec 21, 2022

goderbauer added the P2 Important issues not at the top of the work list label Jan 3, 2023

flutter-triage-bot bot added team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023

Hixie removed the passed first triage label Jul 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stack widget does not clip children wrapped in Align #71625

Stack widget does not clip children wrapped in Align #71625

agreaves commented Dec 3, 2020 •

edited by maheshmnj

agreaves commented Dec 3, 2020 •

edited

darshankawar commented Dec 3, 2020

agreaves commented Dec 3, 2020

darshankawar commented Dec 3, 2020

pingbird commented Dec 3, 2020

agreaves commented Dec 3, 2020

Patrick386 commented Oct 25, 2021

maheshmnj commented Dec 21, 2022 •

edited

Stack widget does not clip children wrapped in Align #71625

Stack widget does not clip children wrapped in Align #71625

Comments

agreaves commented Dec 3, 2020 • edited by maheshmnj

agreaves commented Dec 3, 2020 • edited

darshankawar commented Dec 3, 2020

agreaves commented Dec 3, 2020

darshankawar commented Dec 3, 2020

pingbird commented Dec 3, 2020

agreaves commented Dec 3, 2020

Patrick386 commented Oct 25, 2021

maheshmnj commented Dec 21, 2022 • edited

agreaves commented Dec 3, 2020 •

edited by maheshmnj

agreaves commented Dec 3, 2020 •

edited

maheshmnj commented Dec 21, 2022 •

edited