Make app dymanically resizable for phone & web

Frontend/patient_manager/lib/components/homeTileGrid.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/homeTile.dart';
+import 'package:patient_manager/main.dart';
 
 class HomeTileGrid extends StatefulWidget {
   final String userEmail;
@@ -10,21 +11,19 @@ class HomeTileGrid extends StatefulWidget {
 }
 
 class _HomeTileGridState extends State<HomeTileGrid> {
-  @override
-  Widget build(BuildContext context) {
-    var size = MediaQuery.of(context).size;
+  late List<List<dynamic>> tileList;
 
-    double width = size.width;
-    double height = size.height;
-    // final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
-    // final double itemWidth = size.width / 5;
-    List<List<dynamic>> tileList = [
+  @override
+  void initState() {
+    tileList = [
       [
         Icons.medication,
         "Patient Manager",
         () {
-          Navigator.of(context)
-              .pushNamed('/patient-manager', arguments: widget.userEmail);
+          // Navigator.of(context)
+          //     .pushNamed('/patient-manager', arguments: widget.userEmail);
+          Navigator.popAndPushNamed(context, '/patient-manager',
+              arguments: widget.userEmail);
         }
       ],
       [Icons.abc, "Test 1", () {}],
@@ -34,24 +33,53 @@ class _HomeTileGridState extends State<HomeTileGrid> {
       [Icons.abc, "Test 5", () {}],
       [Icons.abc, "Test 6", () {}],
     ];
+    super.initState();
+  }
 
-    return GridView.builder(
-      padding: EdgeInsets.fromLTRB(width / 6, height / 16, width / 6,
-          0), //EdgeInsets.symmetric(horizontal: width / 6),
-      itemCount: tileList.length,
-      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-          maxCrossAxisExtent: 200),
-      //const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
-      itemBuilder: (context, index) {
-        return Padding(
-          padding: const EdgeInsets.all(10),
-          child: HomeTile(
-            onTap: tileList[index][2],
-            tileIcon: tileList[index][0],
-            tileName: tileList[index][1],
-          ),
-        );
-      },
+  Color getPrim() {
+    return MzanziInnovationHub.of(context)!.theme.secondaryColor();
+  }
+
+  Color getSec() {
+    return MzanziInnovationHub.of(context)!.theme.primaryColor();
+  }
+
+  Widget buildtile(tile) {
+    //setColor();
+    return Padding(
+      padding: const EdgeInsets.all(10),
+      child: HomeTile(
+        onTap: tile[2],
+        tileIcon: tile[0],
+        tileName: tile[1],
+        p: getPrim(),
+        s: getSec(),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    double width = size.width;
+    double height = size.height;
+
+    return Container(
+      width: width,
+      height: height,
+      child: GridView.builder(
+        padding: EdgeInsets.fromLTRB(width / 6, height / 16, width / 6,
+            0), //EdgeInsets.symmetric(horizontal: width / 6),
+        itemCount: tileList.length,
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: 200),
+        //const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
+        itemBuilder: (context, index) {
+          var tile = tileList[index];
+          //setState(() {});
+          return buildtile(tile);
+        },
+      ),
     );
   }
 }