Fix for incorrect transparent -> DividerColor animation for ExpansionTile (#13449)

* Fix for incorrect transparent -> DividerColor animation for ExpansionTile

* Add comments and tests. Fix background color too.

* Fix analyzer warnings

packages/flutter/lib/src/animation/tween.dart

@@ -204,7 +204,12 @@ class ColorTween extends Tween<Color> {
   /// Creates a [Color] tween.
   ///
   /// The [begin] and [end] properties may be null; the null value
-  /// is treated as transparent black.
+  /// is treated as transparent.
+  ///
+  /// We recommend that you do not pass [Colors.transparent] as [begin]
+  /// or [end] if you want the effect of fading in or out of transparent.
+  /// Instead prefer null. [Colors.transparent] refers to black transparent and
+  /// thus will fade out of or into black which is likely unwanted.
   ColorTween({ Color begin, Color end }) : super(begin: begin, end: end);
 
   /// Returns the value this variable has at the given animation clock value.

packages/flutter/lib/src/material/expansion_tile.dart

@@ -68,7 +68,7 @@ class ExpansionTile extends StatefulWidget {
 
   /// The color to display behind the sublist when expanded.
   final Color backgroundColor;
-  
+
   /// A widget to display instead of a rotating arrow icon.
   final Widget trailing;
 
@@ -97,7 +97,7 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
     _controller = new AnimationController(duration: _kExpand, vsync: this);
     _easeOutAnimation = new CurvedAnimation(parent: _controller, curve: Curves.easeOut);
     _easeInAnimation = new CurvedAnimation(parent: _controller, curve: Curves.easeIn);
-    _borderColor = new ColorTween(begin: Colors.transparent);
+    _borderColor = new ColorTween();
     _headerColor = new ColorTween();
     _iconColor = new ColorTween();
     _iconTurns = new Tween<double>(begin: 0.0, end: 0.5).animate(_easeInAnimation);
@@ -132,12 +132,12 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
   }
 
   Widget _buildChildren(BuildContext context, Widget child) {
-    final Color borderSideColor = _borderColor.evaluate(_easeOutAnimation);
+    final Color borderSideColor = _borderColor.evaluate(_easeOutAnimation) ?? Colors.transparent;
     final Color titleColor = _headerColor.evaluate(_easeInAnimation);
 
     return new Container(
       decoration: new BoxDecoration(
-        color: _backgroundColor.evaluate(_easeOutAnimation),
+        color: _backgroundColor.evaluate(_easeOutAnimation) ?? Colors.transparent,
         border: new Border(
           top: new BorderSide(color: borderSideColor),
           bottom: new BorderSide(color: borderSideColor),
@@ -182,9 +182,7 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
     _iconColor
       ..begin = theme.unselectedWidgetColor
       ..end = theme.accentColor;
-    _backgroundColor
-      ..begin = Colors.transparent
-      ..end = widget.backgroundColor ?? Colors.transparent;
+    _backgroundColor.end = widget.backgroundColor;
 
     final bool closed = !_isExpanded && _controller.isDismissed;
     return new AnimatedBuilder(

packages/flutter/test/material/expansion_tile_initial_state_test.dart

@@ -25,6 +25,7 @@ void main() {
                 key: expandedKey,
                 initiallyExpanded: true,
                 title: const Text('Expanded'),
+                backgroundColor: Colors.red,
                 children: <Widget>[
                   new ListTile(
                     key: tileKey,
@@ -57,11 +58,26 @@ void main() {
     ));
 
     double getHeight(Key key) => tester.getSize(find.byKey(key)).height;
+    Container getContainer(Key key) => tester.firstWidget(find.descendant(
+      of: find.byKey(key),
+      matching: find.byType(Container),
+    ));
+    final Color dividerColor = Theme.of(tester.element(find.text('Collapsed'))).dividerColor;
 
     expect(getHeight(topKey), getHeight(expandedKey) - getHeight(tileKey) - 2.0);
     expect(getHeight(topKey), getHeight(collapsedKey) - 2.0);
     expect(getHeight(topKey), getHeight(defaultKey) - 2.0);
 
+    BoxDecoration expandedContainerDecoration = getContainer(expandedKey).decoration;
+    expect(expandedContainerDecoration.color, Colors.red);
+    expect(expandedContainerDecoration.border.top.color, dividerColor);
+    expect(expandedContainerDecoration.border.bottom.color, dividerColor);
+
+    BoxDecoration collapsedContainerDecoration = getContainer(collapsedKey).decoration;
+    expect(collapsedContainerDecoration.color, Colors.transparent);
+    expect(collapsedContainerDecoration.border.top.color, Colors.transparent);
+    expect(collapsedContainerDecoration.border.bottom.color, Colors.transparent);
+
     await tester.tap(find.text('Expanded'));
     await tester.tap(find.text('Collapsed'));
     await tester.tap(find.text('Default'));
@@ -72,5 +88,17 @@ void main() {
     expect(getHeight(topKey), getHeight(expandedKey) - 2.0);
     expect(getHeight(topKey), getHeight(collapsedKey) - getHeight(tileKey) - 2.0);
     expect(getHeight(topKey), getHeight(defaultKey) - getHeight(tileKey) - 2.0);
+
+    // Expanded should be collapsed now.
+    expandedContainerDecoration = getContainer(expandedKey).decoration;
+    expect(expandedContainerDecoration.color, Colors.transparent);
+    expect(expandedContainerDecoration.border.top.color, Colors.transparent);
+    expect(expandedContainerDecoration.border.bottom.color, Colors.transparent);
+
+    // Collapsed should be expanded now.
+    collapsedContainerDecoration = getContainer(collapsedKey).decoration;
+    expect(collapsedContainerDecoration.color, Colors.transparent);
+    expect(collapsedContainerDecoration.border.top.color, dividerColor);
+    expect(collapsedContainerDecoration.border.bottom.color, dividerColor);
   });
 }