[web] Transform values are not rendered properly while painting layout / box type widgets

[joshuadeguzman]

Issue

I'm trying to port one of my example apps from this repo to Codepen. I tried to apply some transform values around the Container, Column and similar layout / box type widgets, and they do not seem to be rendered properly in web using Chrome. So I applied a hotfix. I tried adding Opacity to see if these widgets will repaint as needed, and it did.

I'm aware that performance is somehow sacrificed using this hotfix as it is a very expensive approach (i.e. re-drawing Opacity instead of using AnimatedOpacity), but at least it works fine for now to showcase the demo.

Let me know your thoughts on this one.

PS. Works fine on iOS.

Steps to Reproduce

1. Visit https://dartpad.dev/91778fe91993a4e1ec5be74d5d2d5a45
2. Scroll the items from right to left

Expected results:

Container, Column and similar layout / box type widgets should adjust (a.k.a. transform) based on the provided transform values.

Demo (w/ hotfix):
Wrap one child of the Transform using Opacity widget with an opacity value of 0.99. Please search "hotfix".
https://dartpad.dev/bf4a7535a214e7ed4bbcbc50448f8e4a

Attachment

Web | iOS

|

Actual results:

Widgets do not seem to be rendered / transformed correctly as I scroll through the list of items.

Demo:
https://dartpad.dev/91778fe91993a4e1ec5be74d5d2d5a45

Attachment:

Logs

flutter doctor -v

[✓] Flutter (Channel unknown, v1.12.13+hotfix.6, on Mac OS X 10.14.6 18G103, locale en-PH)
• Flutter version 1.12.13+hotfix.6 at /Users/joshuadeguzman/Documents/Tools/flutter
• Framework revision 18cd7a3 (4 months ago), 2019-12-11 06:35:39 -0800
• Engine revision 2994f7e
• Dart version 2.7.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/joshuadeguzman/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 29.0.2
• ANDROID_HOME = /Users/joshuadeguzman/Library/Android/sdk
• ANDROID_SDK_ROOT = /Users/joshuadeguzman/Library/Android/sdk
• 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.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.0, Build version 11A420a
• CocoaPods version 1.8.4

[✓] 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 36.1.1
• Dart plugin version 183.6270
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin version 43.0.2
• Dart plugin version 192.7761

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

[✓] Connected device (2 available)
• Chrome • chrome • web-javascript • Google Chrome 81.0.4044.113
• Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

Thank you.

[pedromassangocode]

I was able to reproduce this on latest master channel.

sample code

// Copyright 2020 Joshua de Guzman (https://joshuadeguzman.github.io). All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

// Widgets
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: 'Flutter Demo Home Page',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  List<Product> _products = [];
  PageController _pageController;
  double _currentPage = 0;
  String _productCategory = 'TRAINING';

  AnimationController _animationController;
  // Animation<Offset> _searchOffsetAnimation;
  // Animation<Offset> _cartOffsetAnimation;
  Animation<double> _nikeLogoOffsetAnimation;
  // Animation<Offset> _productBackgroundOffsetAnimation;
  // Animation<Offset> _productOffsetAnimation;

  bool _isAnimated = false;

  @override
  void initState() {
    super.initState();

    _pageController = PageController(initialPage: 0)
      ..addListener(() {
        setState(() {
          _currentPage = _pageController.page;
        });
      });

    // Initialize products
    final product1 = Product(
      title: 'Nike PhantomVNM\nClub FG',
      subtitle: 'PHANTOM PROJECT',
      price: '\$69.99',
      category: 'Football',
      imageUrl: AssetConstants.phantom,
    );
    final product2 = Product(
      title: 'Nike Epic\nReact Flyknit 2',
      subtitle: 'EPIC REACT',
      price: '\$79.99',
      category: 'Running',
      imageUrl: AssetConstants.flyKnit,
    );
    final product3 = Product(
      title: 'Nike Air Zoom\nPegasus 36',
      subtitle: 'ZOOM PROJECT',
      price: '\$89.99',
      category: 'Running',
      imageUrl: AssetConstants.pegasus36,
    );
    final product4 = Product(
      title: 'Nike Zoom\nPegasus Turbo 2',
      subtitle: 'ZOOM PROJECT',
      price: '\$99.99',
      category: 'Running',
      imageUrl: AssetConstants.pegasusZoom,
    );

    _products.addAll([product1, product2, product3, product4]);

    // Prepare animations
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 750),
    );

    _nikeLogoOffsetAnimation = Tween<double>(
      begin: -1000,
      end: 0,
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.linearToEaseOut,
      ),
    );

    // Prepare entrance animation
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      backgroundColor: Color(0xFFF3F3F3),
      appBar: AppBar(
        leading: Icon(
          Icons.search,
          color: Colors.black,
        ),
        backgroundColor: Color(0xFFF3F3F3),
        elevation: 0,
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 12),
            child: Icon(
              Icons.shopping_cart,
              color: Colors.black,
            ),
          ),
        ],
      ),
      body: Container(
        child: AnimatedBuilder(
          animation: _animationController,
          builder: (BuildContext context, Widget child) {
            return Stack(
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: size.height * 0.60,
                      width: size.width,
                      child: PageView.builder(
                        physics: BouncingScrollPhysics(),
                        itemCount: _products.length,
                        controller: _pageController,
                        itemBuilder: (BuildContext context, int index) {
                          _productCategory = _products[index].category;

                          if (index == _currentPage.floor()) {
                            return PageItemView(
                              product: _products[index],
                              index: index,
                              page: _currentPage,
                              alignment: FractionalOffset.centerRight,
                            );
                          } else if (index == _currentPage.floor() + 1) {
                            return PageItemView(
                              product: _products[index],
                              index: index,
                              page: _currentPage,
                              alignment: FractionalOffset.centerLeft,
                            );
                          } else {
                            return PageItemView(
                              product: _products[index],
                              index: index,
                              page: _currentPage,
                            );
                          }
                        },
                      ),
                    ),
                  ],
                ),
                Transform.translate(
                  offset: Offset(
                    size.width / 2 - 25,
                    _nikeLogoOffsetAnimation.value,
                  ),
                  child: Container(
                    height: 100,
                    width: 50,
                    child: Image.network(AssetConstants.nikeAppLogo),
                  ),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(
                      bottom: 48,
                      left: 32,
                      right: 32,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Icon(
                          Icons.arrow_back,
                          size: 16,
                        ),
                        InkWell(
                          onTap: () {
                            setState(() {
                              _isAnimated = !_isAnimated;
                            });

                            if (_isAnimated) {
                              _animationController.forward();
                            } else {
                              _animationController.reverse();
                            }
                          },
                          child: Text(
                            _productCategory.toUpperCase(),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.w300,
                              letterSpacing: 2,
                            ),
                          ),
                        ),
                        Icon(
                          Icons.arrow_forward,
                          size: 16,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

class PageItemView extends StatefulWidget {
  final double _defaultItemHeight = 500;
  final double _defaultPerspective = 0.001;
  final double _defaultAngle = pi / 2;
  final double _defaultProductAngle = -1;
  final Alignment _defaultAlignment = FractionalOffset.center;

  final double itemHeight;
  final Product product;
  final int index;
  final double page;
  final double perspective;
  final double angle;
  final double productAngle;
  final Alignment alignment;

  const PageItemView({
    Key key,
    @required this.product,
    @required this.index,
    @required this.page,
    this.itemHeight,
    this.perspective,
    this.angle,
    this.productAngle,
    this.alignment,
  })  : assert(index != null, 'index must not be null!'),
        assert(index != null, 'page must not be null!'),
        super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _PageItemViewState();
  }
}

class _PageItemViewState extends State<PageItemView> {
  double get _itemHeight => widget.itemHeight ?? widget._defaultItemHeight;
  Alignment get _alignment => widget.alignment ?? widget._defaultAlignment;
  Product get _product => widget.product;
  int get _index => widget.index ?? 0;
  double get _page => widget.page ?? 0;
  double get _perspective => widget.perspective ?? widget._defaultPerspective;
  double get _angle => widget.angle ?? widget._defaultAngle;
  double get _productAngle => widget.angle ?? widget._defaultProductAngle;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          _alignment != null
              ? Transform(
                  transform: Matrix4.identity()
                    ..setEntry(3, 2, _perspective)
                    ..scale(1 - lerpDouble(0, -0.25, _index - _page))
                    ..rotateY(_angle * (_page - _index)),
                  alignment: _alignment,
                  child: _buildBackground(_itemHeight))
              : _buildBackground(_itemHeight),
          Transform.translate(
            offset: Offset(0, -20),
            child: Transform.rotate(
              angle: _productAngle * (_page - _index),
              child: Container(
                height: 160,
                child: Center(
                  child: Transform.rotate(
                    angle: 276,
                    child: Image.network(_product.imageUrl),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBackground(double height) {
    return Container(
      height: height,
      width: 250,
      margin: const EdgeInsets.all(32),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 0),
            color: Color(0xFFE3E3E3),
            blurRadius: 30,
          ),
        ],
      ),
      child: ClipRRect(
        clipBehavior: Clip.antiAlias,
        borderRadius: BorderRadius.circular(16),
        child: Stack(
          children: [
            Container(
              height: height,
              color: Colors.white,
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: const EdgeInsets.only(top: 32.0),
                child: Text(
                  _product.title.toUpperCase(),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w300,
                    letterSpacing: 1,
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(bottom: 32.0),
                    child: Text(
                      _product.subtitle.toUpperCase(),
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w300,
                        letterSpacing: 2,
                      ),
                    ),
                  ),
                  Container(
                    height: 48,
                    color: Colors.black,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Expanded(
                          child: Text(
                            _product.price.toUpperCase(),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w300,
                              letterSpacing: 2,
                            ),
                          ),
                        ),
                        Container(
                          height: 48,
                          width: 48,
                          color: Color(0xFF232323),
                          child: Icon(
                            Icons.add,
                            color: Colors.white30,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// Constants
class AssetConstants {
  static const nikeAirmax =
      'https://user-images.githubusercontent.com/20706361/78980641-e5ba1880-7b50-11ea-8356-6842e56dbd48.png';
  static const flyKnit =
      'https://user-images.githubusercontent.com/20706361/78982399-a55c9980-7b54-11ea-87da-f507cb88a2fa.png';
  static const pegasusZoom =
      'https://user-images.githubusercontent.com/20706361/78983457-d211b080-7b56-11ea-9c0e-39fa9e51aa9f.png';
  static const pegasus36 =
      'https://user-images.githubusercontent.com/20706361/78982836-95918500-7b55-11ea-8aba-5615c5fdf784.png';
  static const phantom =
      'https://user-images.githubusercontent.com/20706361/78983860-9d522900-7b57-11ea-938c-983505fe703c.png';
  static const nikeAppLogo =
      'https://user-images.githubusercontent.com/20706361/78985475-7d246900-7b5b-11ea-8c4e-8d2040812b3c.png';
}

// Model
class Product {
  final String title;
  final String subtitle;
  final String price;
  final String category;
  final String imageUrl;

  Product({
    this.title,
    this.subtitle,
    this.price,
    this.category,
    this.imageUrl,
  });
}

flutter doctor -v

[✓] Flutter (Channel master, 1.22.0-10.0.pre.281, on Mac OS X 10.15.6 19G2021 x86_64, locale en)
    • Flutter version 1.22.0-10.0.pre.281 at /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision 511367aa5a (11 hours ago), 2020-09-21 15:33:32 -0700
    • Engine revision 4b8477d115
    • Dart version 2.10.0 (build 2.10.0-142.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • 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)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0, Build version 12A7209
    • CocoaPods version 1.9.3

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

[!] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 49.0.4
    • Dart plugin version 202.7319.5

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

[✓] Connected device (4 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • macOS (desktop)             • macos         • darwin-x64     • Mac OS X 10.15.6 19G2021 x86_64
    • Web Server (web)            • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 85.0.4183.102

! Doctor found issues in 1 category.
Process finished with exit code 0