Skip to content

FittedBox Clipping issues #6293

Closed
#6302
Closed
FittedBox Clipping issues#6293
#6302
Assignees
abarth
Labels
customer: fuchsiaframeworkflutter/packages/flutter repository. See also f: labels.

Description

@alanlgardner
alanlgardner
opened on Oct 12, 2016

Weird clipping issues.

  1. While stationary the image is not clipped on the bottom, but is clipped on the left.
  2. While scrolling the image flickers clipped / unclipped.

Steps to Reproduce

import 'dart:async';

import 'package:flutter/widgets.dart';

int acolor(int index, int offset) =>
    0xAA000000 + (0xFFFFFF ~/ (index + offset + 1));

Widget pic() => new Opacity(
    opacity: 0.9,
    child: new Image.network(
        'https://flutter.io/images/flutter-mark-square-100.png', // .asset('packages/armadillo/res/Armadillo.png',
        alignment: FractionalOffset.topCenter,
        fit: ImageFit.cover));

Widget colorized(int color, [Widget child = null]) => new Container(
    decoration: new BoxDecoration(backgroundColor: new Color(color)),
    child: child);

Widget fittedBox(i) => new Container(
    margin: new EdgeInsets.symmetric(vertical: 10.0),
    child: new SizedBox(
      width: 300.0,
      height: 400.0,
      child:
          new Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        new SizedBox(height: 50.0, child: colorized(acolor(i, 0))),
        new Flex(children: [
          colorized(
              acolor(i, 1),
              new SizedBox(
                  width: 300.0,
                  height: 350.0,
                  child: new FittedBox(
                      fit: ImageFit.cover,
                      alignment: FractionalOffset.topCenter,
                      child: new SizedBox(
                          width: 500.0, height: 1000.0, child: pic()))))
        ])
      ]),
    ));

Future main() async {
  runApp(new Center(
      child: new SizedBox(
          width: 300.0,
          child: new Block(children: new List.generate(2, fittedBox)))));
}

Logs

No log output.

Flutter Doctor

[✓] Flutter (on Linux, channel master)
• Flutter at /usr/local/google/home/alangardner/src/fuchsia/sysui/third_party/flutter
• Framework revision d65cda2 (6 days ago), 2016-10-06 11:29:41
• Engine revision f97caf2
• Tools Dart version 1.20.0-dev.10.1

[✓] Android toolchain - develop for Android devices (Android SDK 23.0.2)
• Android SDK at /usr/local/google/home/alangardner/tools/android-sdk-linux
• Platform android-24, build-tools 23.0.2
• OpenJDK Runtime Environment (build 1.8.0-google-v7-132676107-132666263)

[✓] Atom - a lightweight development environment for Flutter
• flutter plugin version 0.2.6
• dartlang plugin version 0.6.40

[✓] Connected devices
• Nexus 9 • HT4A1JT03343 • android-arm

Activity

  1. sethladd
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    customer: queue
    on Oct 12, 2016
  2. abarth
    self-assigned this
    on Oct 13, 2016

  3. abarth commented on Oct 13, 2016

    @abarth
    abarth
    on Oct 13, 2016
    Contributor

    Great bug.

  4. abarth commented on Oct 13, 2016

    @abarth
    abarth
    on Oct 13, 2016
    Contributor

    Reduction

    import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

int acolor(int index, int offset) =>
    0xAA000000 + (0xFFFFFF ~/ (index + offset + 1));

Widget pic() => new Opacity(
    opacity: 0.9,
    child: colorized(0xFF0000FF, new Text("aaaaaaaaaaaaaa\naaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaa"
    )));

Widget colorized(int color, [Widget child = null]) => new Container(
    decoration: new BoxDecoration(backgroundColor: new Color(color)),
    child: child);

Widget fittedBox() => new SizedBox(
        height: 1200.0,
        child: new Transform(
            transform: new Matrix4.diagonal3Values(10.0, 10.0, 1.0),
            child: pic()));

void main() {
  runApp(new Container(
      padding: new EdgeInsets.only(left: 20.0),
      child: colorized(0xFF00FF00, new ScrollableViewport(child: fittedBox()))
  ));
}
  5. abarth
    closed this as completedin #6302on Oct 13, 2016
  6. abarth
    added a commit that references this issue on Oct 13, 2016

    Fix composited transform bounds calculations (#6302)

    3b56f12
  7. Hixie
    added
    customer: fuchsia
    and removed
    customer: fuchsia
    on Oct 26, 2016

  8. github-actions commented on Sep 5, 2021

    @github-actions
    github-actionsbot
    on Sep 5, 2021

    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.

  9. github-actions
    locked as resolved and limited conversation to collaborators on Sep 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

customer: fuchsiaframeworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions