feat: updated Flashcard responsiveness

SethCohen · Mar 30, 2023 · 9dea5a8 · 9dea5a8
1 parent 9f80d6c
commit 9dea5a8
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 37 deletions.
diff --git a/src/lib/features/dictionary/dictionary_page.dart b/src/lib/features/dictionary/dictionary_page.dart
@@ -14,6 +14,8 @@ class DictionaryPage extends StatefulWidget {
 class _DictionaryPageState extends State<DictionaryPage> {
   @override
   Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
     final flashcardsQuery = FirebaseFirestore.instance
         .collectionGroup('cards')
         .where('type', isEqualTo: 'immutable')
@@ -47,9 +49,14 @@ class _DictionaryPageState extends State<DictionaryPage> {
                 snapshot.fetchMore();
               }
 
-              return Flashcard(
-                card: snapshot.docs[index].data(),
-                type: CardType.dictionary,
+              return ConstrainedBox(
+                constraints: BoxConstraints(
+                  maxWidth: screenWidth * 0.2,
+                ),
+                child: Flashcard(
+                  card: snapshot.docs[index].data(),
+                  type: CardType.dictionary,
+                ),
               );
             },
           ),

diff --git a/src/lib/features/flashcard/flashcard.dart b/src/lib/features/flashcard/flashcard.dart
@@ -30,31 +30,25 @@ class _FlashcardState extends State<Flashcard> {
   @override
   Widget build(BuildContext context) {
     final bool isEmptyInstructions = widget.card.instructions == '';
-    double screenWidth = MediaQuery.of(context).size.width;
-    double cardWidth = screenWidth * 0.15;
-
-    return SizedBox(
-      // TODO fix responsiveness based of screen
-      width: cardWidth,
-      child: Card(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            _buildTitle(),
-            // TODO replace network images with controllable apng||video player/frame controller
-            Stack(
-              children: [
-                _buildImage(),
-                if ((!_isImageBlurred || widget.type == CardType.dictionary) &&
-                    !isEmptyInstructions)
-                  _buildInstructionsPopup(context),
-              ],
-            ),
-            // TODO media controls implementation
-            _buildMediaControls(),
-            if (widget.type != CardType.dictionary) _buildFlashcardButtons(),
-          ],
-        ),
+
+    return Card(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _buildTitle(),
+          // TODO replace network images with controllable apng||video player/frame controller
+          Stack(
+            children: [
+              _buildImage(),
+              if ((!_isImageBlurred || widget.type == CardType.dictionary) &&
+                  !isEmptyInstructions)
+                _buildInstructionsPopup(context),
+            ],
+          ),
+          // TODO media controls implementation
+          _buildMediaControls(),
+          if (widget.type != CardType.dictionary) _buildFlashcardButtons(),
+        ],
       ),
     );
   }
@@ -103,11 +97,17 @@ class _FlashcardState extends State<Flashcard> {
 
   Widget _buildImage() => ClipRRect(
         child: widget.type == CardType.dictionary
-            ? Image.network(widget.card.image)
+            ? Image.network(
+                widget.card.image,
+                fit: BoxFit.cover,
+              )
             : ImageFiltered(
                 enabled: _isImageBlurred,
                 imageFilter: ImageFilter.blur(sigmaX: 48, sigmaY: 48),
-                child: Image.network(widget.card.image),
+                child: Image.network(
+                  widget.card.image,
+                  fit: BoxFit.cover,
+                ),
               ),
       );
 

diff --git a/src/lib/features/lesson/lesson_details_page.dart b/src/lib/features/lesson/lesson_details_page.dart
@@ -73,14 +73,22 @@ class _LessonDetailsState extends State<LessonDetails> {
           ))
       .toList();
 
-  Widget _buildFlashcards(List<QueryDocumentSnapshot<Object?>> cards) =>
-      Padding(
-        padding: const EdgeInsets.only(top: 20.0),
+  Widget _buildFlashcards(List<QueryDocumentSnapshot<Object?>> cards) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 20.0),
+      child: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: screenWidth * 0.25,
+        ),
         child: IndexedStack(
           index: _currentCardIndex,
           children: _getFlashcards(cards),
         ),
-      );
+      ),
+    );
+  }
 
   Widget _buildProgressTextIndicator() {
     return Container(

diff --git a/src/lib/features/review/review_details_page.dart b/src/lib/features/review/review_details_page.dart
@@ -64,13 +64,21 @@ class _ReviewState extends State<Review> {
           ))
       .toList();
 
-  Widget _buildFlashcards(List<ReviewModel> cards) => Padding(
-        padding: const EdgeInsets.only(top: 20.0),
+  Widget _buildFlashcards(List<ReviewModel> cards) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    return Padding(
+      padding: const EdgeInsets.only(top: 20.0),
+      child: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: screenWidth * 0.25,
+        ),
         child: IndexedStack(
           index: _currentCardIndex,
           children: _getFlashcards(cards),
         ),
-      );
+      ),
+    );
+  }
 
   Widget _buildProgressTextIndicator() {
     return Container(