feat: use gridview instead of listview

taaaf11 · Apr 1, 2024 · 96c1dda · 96c1dda
1 parent 95e7d63
commit 96c1dda
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/lib/components/ayah_box.dart b/lib/components/ayah_box.dart
@@ -105,9 +105,11 @@ class _AyahBoxState extends State<AyahBox> {
                                     ),
                                     onPress: () async {
                                       final player = AudioPlayer();
-                                      await player.play(UrlSource(
-                                          'https://audio.qurancdn.com/'
-                                          '${word['audio_url']}'));
+                                      if (word['audio_url'] != null) {
+                                        await player.play(UrlSource(
+                                            'https://audio.qurancdn.com/'
+                                            '${word['audio_url']}'));
+                                      }
                                     },
                                   )
                               ],

diff --git a/lib/components/surah_box.dart b/lib/components/surah_box.dart
@@ -11,21 +11,23 @@ class SurahNameBox extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
+      // mainAxisAlignment: MainAxisAlignment.start,
       children: [
         NumberBox(number: surahNumber),
         SizedBox(width: 30),
-        SizedBox(
-          width: 230,
+        Center(
           child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Text(
-                surahData[surahNumber]![1], // surah name
-                style: TextStyle(fontSize: 20),
+                surahData[surahNumber]?[1], // surah name
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
               ),
               Text(
-                surahData[surahNumber]![
-                    2], // surah name translated into English
+                surahData[surahNumber]
+                    ?[2], // surah name translated into English
                 style: TextStyle(color: Colors.grey[350]),
+                textAlign: TextAlign.left,
               )
             ],
           ),

diff --git a/lib/main.dart b/lib/main.dart
@@ -153,8 +153,15 @@ class _HomePageState extends State<HomePage> {
             SizedBox(height: 50),
             Expanded(
               child: SizedBox(
-                width: 348,
-                child: ListView.separated(
+                width: MediaQuery.of(context).size.width - 80,
+                child: GridView.builder(
+                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount:
+                        getCrossAxisCount(MediaQuery.sizeOf(context).width),
+                    mainAxisExtent: 87,
+                    mainAxisSpacing: 30,
+                    crossAxisSpacing: 50,
+                  ),
                   itemBuilder: (_, index) => Container(
                     padding: EdgeInsets.all(18),
                     decoration: BoxDecoration(
@@ -180,9 +187,6 @@ class _HomePageState extends State<HomePage> {
                     ),
                   ),
                   itemCount: 114,
-                  separatorBuilder: (context, index) =>
-                      const SizedBox(height: 20),
-                  addAutomaticKeepAlives: false,
                 ),
               ),
             ),

diff --git a/lib/utils.dart b/lib/utils.dart
@@ -30,3 +30,17 @@ String removeSpacesFromString(String string) {
 
   return newString;
 }
+
+int getCrossAxisCount(double screenWidth) {
+  switch (screenWidth) {
+    case < 320:
+    case >= 320 && <= 767:
+      return 1;
+    case >= 768 && <= 991:
+      return 2;
+    case >= 992:
+      return 3;
+    default:
+      return 3;
+  }
+}