Make the app responsive to orientation changes

HassanSobhy · Apr 7, 2021 · 1f79653 · 1f79653
1 parent d21b5f0
commit 1f79653
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 17 deletions.
diff --git a/assets/icons/area.png b/assets/icons/area.png
diff --git a/assets/icons/currency.png b/assets/icons/currency.png
diff --git a/assets/icons/digital_storage.png b/assets/icons/digital_storage.png
diff --git a/assets/icons/length.png b/assets/icons/length.png
diff --git a/assets/icons/mass.png b/assets/icons/mass.png
diff --git a/assets/icons/power.png b/assets/icons/power.png
diff --git a/assets/icons/time.png b/assets/icons/time.png
diff --git a/assets/icons/volume.png b/assets/icons/volume.png
diff --git a/lib/screens/category_screen.dart b/lib/screens/category_screen.dart
@@ -9,7 +9,6 @@ class CategoryScreen extends StatefulWidget {
 }
 
 class _CategoryScreenState extends State<CategoryScreen> {
-
   List<Category> categories;
   static const _categoryNames = <String>[
     'Length',
@@ -44,15 +43,25 @@ class _CategoryScreenState extends State<CategoryScreen> {
     );
   }
 
-
-
-
-  ListView _buildCategoryWidgets(List<Category> categories) {
-    return ListView.builder(
-        itemCount: categories.length,
-        itemBuilder: (context, index) {
-          return categories[index];
-        });
+  Widget _buildCategoryWidgets(List<Category> categories) {
+    if (MediaQuery.of(context).orientation == Orientation.portrait) {
+      return ListView.builder(
+          itemCount: categories.length,
+          itemBuilder: (context, index) {
+            return categories[index];
+          });
+    } else {
+      return GridView.builder(
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 2,
+            mainAxisSpacing: 4,
+            crossAxisSpacing: 4,
+            childAspectRatio: 3
+          ),itemCount: categories.length,
+          itemBuilder: (context, index) {
+            return categories[index];
+          });
+    }
   }
 
   AppBar _buildAppBar() {

diff --git a/lib/screens/converter_screen.dart b/lib/screens/converter_screen.dart
@@ -33,13 +33,32 @@ class _ConverterScreenState extends State<ConverterScreen> {
       appBar: AppBar(
         title: Text(widget.name),
       ),
-      body: Column(
-
-        children: [
-          buildInput(),
-          buildArrows(),
-          buildOutput(),
-        ],
+      body: OrientationBuilder(
+        builder: (context,orientation){
+          if(orientation==Orientation.portrait){
+            return Column(
+              children: [
+                buildInput(),
+                buildArrows(),
+                buildOutput(),
+              ],
+            );
+          } else
+            {
+              return Center(
+                child: Container(
+                  width: 450,
+                  child: ListView(
+                    children: [
+                      buildInput(),
+                      buildArrows(),
+                      buildOutput(),
+                    ],
+                  ),
+                ),
+              );
+            }
+        },
       ),
     );
   }