1 files changed, 65 insertions, 7 deletions
diff --git a/lib/page_media.dart b/lib/page_media.dart
index 9b61bea..65ebaf1 100644
--- a/lib/page_media.dart
+++ b/lib/page_media.dart
@@ -1,19 +1,77 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 
 class MediaPage extends StatelessWidget {
-
   const MediaPage({Key? key}) : super(key: key);
 
-  @override
-  Widget build(BuildContext context) {
+  Widget _buildLayout(BuildContext context, BoxConstraints constraints) {
+    // describe the layout in terms of fractions of the container size
+    double mainDimension = max(constraints.maxWidth, constraints.maxHeight);
+    //double minDimension = min(constraints.maxWidth, constraints.maxHeight);
+    double iconSize = mainDimension / 16.0;
+
     return Container(
-      color: Colors.deepPurple.shade50,
+      color: Colors.blueGrey.shade900,
       constraints: BoxConstraints.expand(),
       alignment: Alignment.center,
-      child: Text(
-        'Media',
-        style: Theme.of(context).textTheme.headline1,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          AspectRatio(
+            aspectRatio: 16 / 9,
+            child: Container(
+              decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                      begin: Alignment.bottomLeft,
+                      end: Alignment.topRight,
+                      colors: [
+                    Colors.blueGrey.shade700,
+                    Colors.blueGrey.shade400
+                  ])),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              _createMediaButton(Icons.skip_previous, iconSize, () {}),
+              _createMediaButton(Icons.play_arrow, iconSize, () {}),
+              _createMediaButton(Icons.skip_next, iconSize, () {}),
+            ],
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _createMediaButton(
+      IconData icon, double iconSize, Null Function() onPressed) {
+    return Padding(
+      padding: EdgeInsets.all(iconSize / 8),
+      child: ElevatedButton(
+        onPressed: onPressed,
+        child: Icon(
+          icon,
+          color: Colors.blueGrey.shade700,
+          size: iconSize,
+        ),
+        style: ElevatedButton.styleFrom(
+          shape: CircleBorder(),
+          padding: EdgeInsets.all(iconSize / 8),
+          primary: Colors.blueGrey.shade100,
+          onPrimary: Colors.white,
         ),
+      ), 
     );
   }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.deepPurple.shade50,
+        child: Center(
+            child: LayoutBuilder(
+          builder: _buildLayout,
+        )));
+  }
 }