From 163af9fdc8f85fe21251c5c1521381f320f4be5d Mon Sep 17 00:00:00 2001
From: d-rooX <bot0463@gmail.com>
Date: Tue, 23 May 2023 17:32:45 +0300
Subject: [PATCH] flexible popup

---
 example/lib/app.dart         |  7 +--
 lib/utils/mistake_popup.dart | 99 ++++++++++++++++--------------------
 2 files changed, 46 insertions(+), 60 deletions(-)

diff --git a/example/lib/app.dart b/example/lib/app.dart
index 54e05aa..8ca5ca8 100644
--- a/example/lib/app.dart
+++ b/example/lib/app.dart
@@ -34,17 +34,14 @@ class _AppState extends State<App> {
       // column here for test purposes;
       // change mainAxisAlignment to test popup behaviour
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.end,
         children: [
           LanguageToolTextField(
             style: const TextStyle(),
             decoration: const InputDecoration(),
             coloredController: _controller,
             mistakePopup: MistakePopup(
-              popupRenderer: PopupOverlayRenderer(
-                width: _popupWidth,
-                height: _popupHeight,
-              ),
+              popupRenderer: PopupOverlayRenderer(),
             ),
           ),
         ],
diff --git a/lib/utils/mistake_popup.dart b/lib/utils/mistake_popup.dart
index 2f7f3f4..a6619ce 100644
--- a/lib/utils/mistake_popup.dart
+++ b/lib/utils/mistake_popup.dart
@@ -44,14 +44,8 @@ class MistakePopup {
 class PopupOverlayRenderer {
   OverlayEntry? _overlayEntry;
 
-  /// Width of popup
-  final double width;
-
-  /// Height of popup
-  final double height;
-
   /// [PopupOverlayRenderer] constructor
-  PopupOverlayRenderer({required this.width, required this.height});
+  PopupOverlayRenderer();
 
   /// Render overlay entry on the screen with dismiss logic
   OverlayEntry render(
@@ -72,17 +66,14 @@ class PopupOverlayRenderer {
               Positioned(
                 left: _popupPosition.dx,
                 top: _popupPosition.dy,
-                child: SizedBox(
-                  width: width,
-                  height: height,
-                  child: popupBuilder(context),
-                ),
+                child: popupBuilder(context),
               ),
             ],
           ),
         ),
       ),
     );
+
     Overlay.of(context).insert(_createdEntry);
     _overlayEntry = _createdEntry;
 
@@ -92,11 +83,17 @@ class PopupOverlayRenderer {
   /// Function that bounds given offset to screen sizes
   Offset _calculatePosition(BuildContext context, Offset position) {
     final _screenSize = MediaQuery.of(context).size;
+
+    // todo find window size somehow
+    const width = 250.0;
+    const height = 250.0;
+
     final _popupRect = Rect.fromCenter(
       center: position,
       width: width,
       height: height,
     );
+
     const _screenBorderPadding = 10.0;
 
     double dx = _popupRect.left;
@@ -153,7 +150,6 @@ class LanguageToolMistakePopup extends StatelessWidget {
     const _borderRadius = 10.0;
     const _mistakeNameFontSize = 13.0;
     const _mistakeMessageFontSize = 15.0;
-    const _replacementsButtonsRowHeight = 35.0;
 
     return Container(
       padding: const EdgeInsets.all(10),
@@ -162,52 +158,45 @@ class LanguageToolMistakePopup extends StatelessWidget {
         color: Colors.white,
         borderRadius: BorderRadius.circular(_borderRadius),
       ),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(
-            mistake.type.name,
-            style: TextStyle(
-              color: Colors.grey.shade700,
-              fontSize: _mistakeNameFontSize,
-              fontWeight: FontWeight.w500,
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 250),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              mistake.type.name,
+              style: TextStyle(
+                color: Colors.grey.shade700,
+                fontSize: _mistakeNameFontSize,
+                fontWeight: FontWeight.w500,
+              ),
             ),
-          ),
-          const SizedBox(height: 10),
-          Expanded(
-            child: SingleChildScrollView(
-              physics: const BouncingScrollPhysics(),
-              child: Text(
-                mistake.message,
-                style: const TextStyle(
-                  // fontStyle: FontStyle.italic,
-                  fontSize: _mistakeMessageFontSize,
-                ),
+            const SizedBox(height: 10),
+            Text(
+              mistake.message,
+              style: const TextStyle(
+                // fontStyle: FontStyle.italic,
+                fontSize: _mistakeMessageFontSize,
               ),
             ),
-          ),
-          const SizedBox(height: 10),
-          SizedBox(
-            height: _replacementsButtonsRowHeight,
-            child: ListView.separated(
-              separatorBuilder: (context, index) => const SizedBox(width: 5),
-              scrollDirection: Axis.horizontal,
-              itemCount: mistake.replacements.length,
-              itemBuilder: (context, index) {
-                final replacement = mistake.replacements[index];
-
-                return ElevatedButton(
-                  onPressed: () {
-                    controller.replaceMistake(mistake, replacement);
-                    popupRenderer.dismiss();
-                  },
-                  child: Text(replacement),
-                );
-              },
+            const SizedBox(height: 10),
+            Wrap(
+              spacing: 10,
+              direction: Axis.horizontal,
+              children: mistake.replacements
+                  .map(
+                    (replacement) => ElevatedButton(
+                      onPressed: () {
+                        controller.replaceMistake(mistake, replacement);
+                        popupRenderer.dismiss();
+                      },
+                      child: Text(replacement),
+                    ),
+                  )
+                  .toList(growable: false),
             ),
-          )
-        ],
+          ],
+        ),
       ),
     );
   }