Skip to content

Stack not clipping Transform.rotate #75731

Closed

Description

@bernaferrari

I'm having this extremely frustrating issue:

It should clip, but it doesn't. It only happens in some scenarios, I believe it is an Skia issue.

Possibly related: #38753

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: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.white,
        child: Stack(
          children: [
            Positioned(
              left: 0,
              top: 0,
              child: Transform.rotate(
                angle: 1,
                child: Container(
                  color: Colors.red,
                  width: 250,
                  height: 250,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Tested in Dartpad (Flutter 1.26.0-17.3.pre) and locally (1.26.0-17.2.pre) in Flutter Web.

Edit: using Clip.hardEdge in a Stack doesn't work, but wrapping a Stack in a ClipRect works 🤨 this is very buggy.

Activity

  1. darshankawar commented on Feb 10, 2021

    @darshankawar
    Member

    Verified this on latest master.

    Screenshot 2021-02-10 at 2 13 56 PM

    Wrapping Stack with ClipRRect:

    Screenshot 2021-02-10 at 2 18 20 PM

    flutter doctor -v
    [✓] Flutter (Channel master, 1.26.0-18.0.pre.255, on Mac OS X 10.15.4 19E2269 darwin-x64,
        locale en-IN)
        • Flutter version 1.26.0-18.0.pre.255 at /Users/dhs/documents/Fluttersdk/flutter
        • Framework revision 278065284d (6 hours ago), 2021-02-09 17:51:03 -0800
        • Engine revision b3a18f5182
        • Dart version 2.13.0 (build 2.13.0-15.0.dev)
    
    [✓] 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-6915495)
        • All Android licenses accepted.
    
    [!] Xcode - develop for iOS and macOS
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Xcode 12.3, Build version 12C33
        ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
            CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that
            responds to your plugin usage on the Dart side.
            Without CocoaPods, plugins will not work on iOS or macOS.
            For more info, see https://flutter.dev/platform-plugins
          To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation
          for instructions.
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [✓] Android Studio (version 4.1)
        • 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 1.8.0_242-release-1644-b3-6915495)
    
    [✓] VS Code (version 1.53.0)
        • VS Code at /Applications/Visual Studio Code.app/Contents
        • Flutter extension version 3.18.1
    
    [✓] Connected device (4 available)
        • SM A260G (mobile)          • 5200763ebcfa861f                     • android-arm
          • Android 8.1.0 (API 27)
        • 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 88.0.4324.150
    
    ! Doctor found issues in 1 category.
    
    
  2. added
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    platform-webWeb applications specifically
    p: material_uimaterial_ui package in flutter/packages
    frameworkflutter/packages/flutter repository. See also f: labels.
    engineflutter/engine related. See also e: labels.
    c: renderingUI glitches reported at the engine/skia or impeller rendering level
    and removed
    p: material_uimaterial_ui package in flutter/packages
    on Feb 10, 2021
  3. changed the title [-]Stack not clipping Transform.rotate[/-] [+][Web]: Stack not clipping Transform.rotate[/+] on Feb 10, 2021
  4. 14 remaining items

  5. self-assigned this
    on Jul 18, 2023
  6. added a commit that references this issue on Jul 20, 2023
    17b732b
  7. added
    r: fixedIssue is closed as already fixed in a newer version
    on Jul 24, 2023
  8. added a commit that references this issue on Jul 31, 2023
    c0a6974
  9. github-actions commented on Aug 7, 2023

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  10. locked as resolved and limited conversation to collaborators on Aug 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listd: api docsIssues with https://api.flutter.dev/found in release: 3.7Found to occur in 3.7found in release: 3.8Found to occur in 3.8frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework teamwaiting for PR to land (fixed)A fix is in flight

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions