[BUG] Some widgets from the opposite side are visible on web with HTML renderer

[aemelyanovff]

"Shadows" of some widgets, specifically ElevatedButton's, are visible from the opposite side of the card.

It seems to only happen on web when compiled in the --web-renderer html mode.

Expected Behavior

Widgets from the opposite side of the card should not be visible.

Current Behavior

"Shadows" of some widgets, specifically ElevatedButton's, are are visible from the opposite side of the card.

Possible Solution

N/A

Steps to Reproduce

1. Copy the code from the official example (https://pub.dev/packages/flip_card/example).
2. Add one ElevatedButton to one side.
3. Run: flutter run -d chrome --web-renderer html

Full code (identical to the example except the ElevatedButton):

import 'package:flutter/material.dart';

import 'package:flip_card/flip_card.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlipCard',
      theme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  _renderBg() {
    return Container(
      decoration: BoxDecoration(color: const Color(0xFFFFFFFF)),
    );
  }

  _renderAppBar(context) {
    return MediaQuery.removePadding(
      context: context,
      removeBottom: true,
      child: AppBar(
        elevation: 0.0,
        backgroundColor: Color(0x00FFFFFF),
      ),
    );
  }

  _renderContent(context) {
    return Card(
      elevation: 0.0,
      margin: EdgeInsets.only(left: 32.0, right: 32.0, top: 20.0, bottom: 0.0),
      color: Color(0x00000000),
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL,
        side: CardSide.FRONT,
        speed: 1000,
        onFlipDone: (status) {
          print(status);
        },
        front: Container(
          decoration: BoxDecoration(
            color: Color(0xFF006666),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Front', style: Theme.of(context).textTheme.headline1),
              Text('Click here to flip back',
                  style: Theme.of(context).textTheme.bodyText1),
            ],
          ),
        ),
        back: Container(
          decoration: BoxDecoration(
            color: Color(0xFF006666),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Back', style: Theme.of(context).textTheme.headline1),
              Text('Click here to flip front',
                  style: Theme.of(context).textTheme.bodyText1),
              ElevatedButton(onPressed: () {}, child: Text('My button')),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlipCard'),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          _renderBg(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              _renderAppBar(context),
              Expanded(
                flex: 4,
                child: _renderContent(context),
              ),
              Expanded(
                flex: 1,
                child: Container(),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Screenshot (see the shadow above "Click here to flip back"):

Screenshot with CanvasKit (expected):

Context (Environment)

Can't use FlipCards with buttons on web.

Detailed Description

N/A

Possible Implementation

N/A

[JSlast]

Any update regarding this from Flip_card?

[ciriousjoker]

@aemelyanovff
Does this also happen on previous versions of this package? There was a sizeable refactoring recently, perhaps that caused it?