ShaderMask as Column (or Row) child pushes siblings away(?)

[vphong]

Steps to Reproduce

1. Create a new flutter project and copy this over main.dart:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

final Gradient exampleGradient = new LinearGradient(
    colors: [Colors.amber, Colors.teal],
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    stops: [0.0, 1.0],
    tileMode: TileMode.clamp);

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("ShaderMask in Column Bug"),
        ),
        body: new Card(
          margin: EdgeInsets.all(10.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              // new ShaderMask(
              //   shaderCallback: (bounds) {
              //     // print(bounds);
              //     return exampleGradient.createShader(bounds);
              //   },
              //   blendMode: BlendMode.modulate,
              //   child: 
                new Text(
                  "Shaded Text",
                  style: const TextStyle(
                      color: Colors.grey, fontWeight: FontWeight.bold),
                ),
              // ),
              new Text("Sibling 3"),
              new Text("Sibling 4"),
              new Icon(Icons.add_circle_outline),
              new ListTile(
                title: new Text("Lorem ipsum"),
                subtitle: new Text("dolor sit amet"),
              ),
            ],
          )
        )
      )
    );
  }
}

2. flutter run and check your device against the screenshot below.

3. Uncomment the ShaderMask constructor, reload, and check your device against the screenshot below.

Without ShaderMask	With ShaderMask

Expected output: first screenshot's layout with second screenshot's Shaded Text color.

Notes:

• Flutter Inspector thinks that the siblings are right under Shaded Text. See screenshot.
• Changing the Column's mainAxisSize to MainAxisSize.max (rather than min) further suggests that siblings are being pushed out of bounds. See screenshot.
• Could possibly have to do with ShaderMask's bounds...? Maybe that Rect is what's "pushing" everything away...?
• Similar things happen if you change Column to Row (and comment out ListTile sibling). I haven't tested with Row too much though.
• Have not found a workaround yet.

Flutter Inspector	MainAxisSize.max

Logs

flutter analyze

Analyzing shader_mask_bug...
No issues found! (ran in 3.4s)

flutter doctor -v

I do have Flutter for vscode installed, flutter doctor doesn't seem to see it.

[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale en)
    • Flutter version 0.5.1 at /Users/crescendae/Development/flutter
    • Framework revision c7ea3ca377 (8 weeks ago), 2018-05-29 21:07:33 +0200
    • Engine revision 1ed25ca7b7
    • Dart version 2.0.0-dev.58.0.flutter-f981f09760

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/crescendae/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 26.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] VS Code (version 1.25.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected devices (1 available)
    • iPhone SE • C86F5C59-C68A-4631-9AFE-CCB562D5BF4A • ios • iOS 11.4 (simulator)

! Doctor found issues in 1 category.

[darshankawar]

Hi @vphong,
I tried to replicate this issue on latest Flutter dev channel and observed that the layout is same with and without ShaderMask.

I tried below code sample.

code sample

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

final Gradient exampleGradient = new LinearGradient(
    colors: [Colors.amber, Colors.teal],
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    stops: [0.0, 1.0],
    tileMode: TileMode.clamp);

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
            appBar: new AppBar(
              title: new Text("ShaderMask in Column Bug"),
            ),
            body: new Card(
                margin: EdgeInsets.all(10.0),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                     new ShaderMask(
                       shaderCallback: (Rect bounds) {
                         // print(bounds);
                         return LinearGradient(
                begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFFa8d3e3),
                Color(0xFF293135),
                Color(0xFF394346)
              ]
            ).createShader(bounds);

                       },
                       blendMode: BlendMode.modulate,
                    child: Text(
                      "Shaded Text",
                      style: const TextStyle(
                          color: Colors.grey, fontWeight: FontWeight.bold),
                    ),
                     ),
                    new Text("Sibling 3"),
                    new Text("Sibling 4"),
                    new Icon(Icons.add_circle_outline),
                    new ListTile(
                      title: new Text("Lorem ipsum"),
                      subtitle: new Text("dolor sit amet"),
                    ),
                  ],
                )
            )
        )
    );
  }
}

Can you please confirm if you still experience the issue on latest Flutter version (eg: dev, master) ?

[vphong]

This does appear to be resolved now, thanks!

[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.