dynamic calc for web window

Frontend/lib/mih_packages/calculator/simple_calc.dart

@@ -52,8 +52,22 @@ class _SimpleCalcState extends State<SimpleCalc> {
 
   @override
   Widget build(BuildContext context) {
+    double width = MediaQuery.sizeOf(context).width;
+    double height = MediaQuery.sizeOf(context).height;
+    var padding = MediaQuery.paddingOf(context);
+    double newheight = height - padding.top - padding.bottom;
+    print("width: $width");
+    print("height: $height");
+    print("newheight: $newheight");
+    double calcWidth = 500;
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      if (height < 700) {
+        calcWidth = 300;
+      }
+    }
     return Column(
-      mainAxisSize: MainAxisSize.max,
+      mainAxisAlignment: MainAxisAlignment.end,
+      mainAxisSize: MainAxisSize.min,
       children: <Widget>[
         Text(
           "Simple Calculator",
@@ -91,7 +105,11 @@ class _SimpleCalcState extends State<SimpleCalc> {
                 fontWeight: FontWeight.bold),
           ),
         ),
-        GridView.builder(
+        Container(
+          alignment: Alignment.centerRight,
+          child: SizedBox(
+            width: calcWidth,
+            child: GridView.builder(
               physics: const NeverScrollableScrollPhysics(),
               shrinkWrap: true,
               // padding: EdgeInsets.only(
@@ -103,7 +121,9 @@ class _SimpleCalcState extends State<SimpleCalc> {
               // shrinkWrap: true,
               itemCount: buttons.length,
               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 4),
+                crossAxisCount: 4,
+                //mainAxisExtent: 150,
+              ),
               itemBuilder: (context, index) {
                 // Clear Button
                 if (index == 0) {
@@ -117,8 +137,9 @@ class _SimpleCalcState extends State<SimpleCalc> {
                         });
                       },
                       buttonText: buttons[index],
-                  buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+                          .theme
+                          .messageTextColor(),
                       textColor:
                           MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
@@ -136,8 +157,9 @@ class _SimpleCalcState extends State<SimpleCalc> {
                         });
                       },
                       buttonText: buttons[index],
-                  buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+                          .theme
+                          .messageTextColor(),
                       textColor:
                           MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
@@ -154,8 +176,9 @@ class _SimpleCalcState extends State<SimpleCalc> {
                         });
                       },
                       buttonText: buttons[index],
-                  buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+                          .theme
+                          .messageTextColor(),
                       textColor:
                           MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
@@ -168,7 +191,8 @@ class _SimpleCalcState extends State<SimpleCalc> {
                     child: MIHButton(
                       onTap: () {
                         setState(() {
-                      userInput = userInput.substring(0, userInput.length - 1);
+                          userInput =
+                              userInput.substring(0, userInput.length - 1);
                         });
                       },
                       buttonText: buttons[index],
@@ -198,7 +222,10 @@ class _SimpleCalcState extends State<SimpleCalc> {
                   );
                 }
                 //  +, -, / x buttons
-            else if (index == 7 || index == 11 || index == 15 || index == 19) {
+                else if (index == 7 ||
+                    index == 11 ||
+                    index == 15 ||
+                    index == 19) {
                   return Padding(
                     padding: const EdgeInsets.all(4.0),
                     child: MIHButton(
@@ -219,8 +246,9 @@ class _SimpleCalcState extends State<SimpleCalc> {
                         // });
                       },
                       buttonText: buttons[index],
-                  buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+                          .theme
+                          .messageTextColor(),
                       textColor:
                           MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
@@ -237,8 +265,9 @@ class _SimpleCalcState extends State<SimpleCalc> {
                         });
                       },
                       buttonText: buttons[index],
-                  buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
+                          .secondaryColor(),
                       textColor:
                           MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     ),
@@ -246,6 +275,8 @@ class _SimpleCalcState extends State<SimpleCalc> {
                 }
               },
             ),
+          ),
+        ),
       ],
     );
   }