Repository: flutter
Issue: AnimatedCrossFade between two same colored boxes flashes
Labels: framework,a: animation,f: material design,a: quality,has reproducible steps,found in release: 3.0,found in release: 3.1,team-design,triaged-design

## Steps to Reproduce

1. Run `flutter create bug_switcher`.
2. Update the files as follows: 

<details>
<summary>lib/main.dart</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Cross Fade'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _side = false;
  Color _bgColor = Colors.white;

  static const W = 200.0;
  static const H = 200.0;

  void _flipSide() {
    setState(() {
      _side = !_side;
    });
  }

  void _flipBgColor() {
    setState(() {
      _bgColor = _bgColor == Colors.black ? Colors.white : Colors.black;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: _bgColor,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // AnimatedSwitcher variant
            SizedBox(
              width: W,
              height: H,
              child: AnimatedSwitcher(
                duration: Duration(milliseconds: 200),
                child: _buildContainer('AnimatedSwitcher', _side),
              ),
            ),
            Container(
              height: 20,
            ),
            // AnimatedCrossFade variant
            SizedBox(
              width: W,
              height: H,
              child: AnimatedCrossFade(
                duration: Duration(milliseconds: 200),
                firstChild: _buildContainer('AnimatedCrossFade', false),
                secondChild: _buildContainer('AnimatedCrossFade', true),
                crossFadeState: _side
                    ? CrossFadeState.showSecond
                    : CrossFadeState.showFirst,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _flipBgColor,
            tooltip: 'Theme',
            child: Icon(Icons.color_lens),
          ),
          Container(height: 15, width: 1),
          FloatingActionButton(
            onPressed: _flipSide,
            tooltip: 'Flip',
            child: Icon(Icons.flip),
          ),
        ],
      ),
    );
  }

  Widget _buildContainer(String label, bool side) {
    return Container(
      width: W,
      height: H,
      key: ValueKey<bool>(side),
      color: Colors.blue,
      child: Center(
        child: Text(
          label + '\n\nSide ' + (side ? 'B' : 'A'),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}
```

</details>


3. Tap on the lower FAB to crossfade to the other side/state.
4. Using the upper FAB you can change screen background color between white and black.

**Expected results:** 
I expect that the text "Side A" crossfade into "Side B" but I do not expect the background to change during the transition as it has the same color before and after.

**Actual results:** <!-- what did you see? -->
Background changes color during the transition or it is an effect where it loses opacity. 

When the screen background is white there the blue box background becomes brighter during crossfade and when the screen background is black the blue box background becomes darker during transition.

https://user-images.githubusercontent.com/4630670/114083987-f5795380-98af-11eb-901c-f7c528b70e7e.mp4

**AnimatedCrossFade vs AnimatedSwitcher**
In the demo-app I have included both AnimatedCrossFade and AnimatedSwitcher which behaves the same which is expected as AnimatedSwitcher docs states that it uses a cross fade animation by default.

<details>
  <summary>Logs</summary>

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
Analyzing bug_switcher...
No issues found! (ran in 9.1s)
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel stable, 2.0.4, on Microsoft Windows [Version 10.0.19041.867], locale sv-SE)
    • Flutter version 2.0.4 at C:\Users\Leif\Programmering\Libraries\flutter
    • Framework revision b1395592de (7 days ago), 2021-04-01 14:25:01 -0700
    • Engine revision 2dce47073a
    • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Leif\Programmering\Android\android-sdks
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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-b01)

[✓] VS Code, 32-bit edition (version 1.54.3)
    • VS Code at C:\Program Files (x86)\Microsoft VS Code
    • Flutter extension version 3.20.0

[✓] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 89.0.4389.90
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 89.0.774.63

• No issues found!
```

</details>