use color.shadeXxx instead of color[Xxx] (#8932)

* use color.shadeXxx instead of color[Xxx]

* remove calls to .shade500 on MaterialColor

* remove calls to .shade200 on MaterialAccentColor

* fix test
diff --git a/dev/manual_tests/material_arc.dart b/dev/manual_tests/material_arc.dart
index 8ae2ed7..ed4e596 100644
--- a/dev/manual_tests/material_arc.dart
+++ b/dev/manual_tests/material_arc.dart
@@ -71,11 +71,11 @@
     final Paint paint = new Paint();
 
     if (arc.center != null)
-      drawPoint(canvas, arc.center, Colors.grey[400]);
+      drawPoint(canvas, arc.center, Colors.grey.shade400);
 
     paint
       ..isAntiAlias = false // Work-around for github.com/flutter/flutter/issues/5720
-      ..color = Colors.green[500].withOpacity(0.25)
+      ..color = Colors.green.withOpacity(0.25)
       ..strokeWidth = 4.0
       ..style = PaintingStyle.stroke;
     if (arc.center != null && arc.radius != null)
@@ -83,11 +83,11 @@
     else
       canvas.drawLine(arc.begin, arc.end, paint);
 
-    drawPoint(canvas, arc.begin, Colors.green[500]);
-    drawPoint(canvas, arc.end, Colors.red[500]);
+    drawPoint(canvas, arc.begin, Colors.green);
+    drawPoint(canvas, arc.end, Colors.red);
 
     paint
-      ..color = Colors.green[500]
+      ..color = Colors.green
       ..style = PaintingStyle.fill;
     canvas.drawCircle(arc.lerp(_repaint.value), _kPointRadius, paint);
   }
@@ -252,9 +252,9 @@
 
   @override
   void paint(Canvas canvas, Size size) {
-    drawRect(canvas, arc.begin, Colors.green[500]);
-    drawRect(canvas, arc.end, Colors.red[500]);
-    drawRect(canvas, arc.lerp(_repaint.value), Colors.blue[500]);
+    drawRect(canvas, arc.begin, Colors.green);
+    drawRect(canvas, arc.end, Colors.red);
+    drawRect(canvas, arc.lerp(_repaint.value), Colors.blue);
   }
 
   @override