Updated calculator demo (#4363)

examples/flutter_gallery/lib/demo/calculator_demo.dart

@@ -121,6 +121,7 @@ class _CalculatorState extends State<Calculator> {
         children: <Widget>[
           // Give the key-pad 3/5 of the vertical space and the display 2/5.
           new CalcDisplay(2, _expression.toString()),
+          new Divider(height: 1.0),
           new KeyPad(3, calcState: this)
         ]
       )
@@ -141,7 +142,7 @@ class CalcDisplay extends StatelessWidget {
       child: new Center(
         child: new Text(
           _contents,
-          style: const TextStyle(color: Colors.black, fontSize: 24.0)
+          style: const TextStyle(fontSize: 24.0)
         )
       )
     );
@@ -156,14 +157,22 @@ class KeyPad extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return new Flexible(
+    return new Theme(
+      data: new ThemeData(
+        primarySwatch: Colors.purple,
+        brightness: ThemeBrightness.dark
+      ),
+      child: new Flexible(
         flex: _flex,
+        child: new Material(
           child: new Row(
             children: <Widget>[
               new MainKeyPad(calcState: calcState),
               new OpKeyPad(calcState: calcState),
             ]
           )
+        )
+      )
     );
   }
 }
@@ -180,9 +189,6 @@ class MainKeyPad extends StatelessWidget {
       // and the op keypad have sizes proportional to their number of
       // columns.
       flex: 3,
-      child: new Material(
-        elevation: 12,
-        color: Colors.grey[800],
       child: new Column(
         children: <Widget>[
           new KeyRow(<Widget>[
@@ -207,7 +213,6 @@ class MainKeyPad extends StatelessWidget {
           ])
         ]
       )
-      )
     );
   }
 }
@@ -219,10 +224,10 @@ class OpKeyPad extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
     return new Flexible(
       child: new Material(
-        elevation: 24,
-        color: Colors.grey[700],
+        color: themeData.backgroundColor,
         child: new Column(
           children: <Widget>[
             new CalcKey('\u232B', calcState.handleDelTap),
@@ -260,18 +265,19 @@ class CalcKey extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final Orientation orientation = MediaQuery.of(context).orientation;
     return new Flexible(
-//      child: new Container(
       child: new InkResponse(
         onTap: this.onTap,
         child: new Center(
           child: new Text(
             this.text,
-              style: const TextStyle(color: Colors.white, fontSize: 32.0)
+            style: new TextStyle(
+              fontSize: (orientation == Orientation.portrait) ? 32.0 : 24.0
+            )
           )
         )
       )
-//      )
     );
   }
 }