fix: [MDS-1003] Fix TextInput overflow issues (#355)

coingaming · Feb 19, 2024 · 058042c · 058042c
1 parent fb59d5b
commit 058042c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 51 deletions.
diff --git a/example/lib/src/storybook/stories/text_area.dart b/example/lib/src/storybook/stories/text_area.dart
@@ -90,9 +90,9 @@ class TextAreaStory extends StatelessWidget {
       initial: true,
     );
 
-    final growableKnob = context.knobs.boolean(
-      label: "Growable",
-      description: "Whether MoonTextArea is growable with unfixed height",
+    final expandsKnob = context.knobs.boolean(
+      label: "expands",
+      description: "Whether MoonTextArea can expand to fit its contents.",
     );
 
     final showHelperKnob = context.knobs.boolean(
@@ -111,7 +111,8 @@ class TextAreaStory extends StatelessWidget {
                 children: [
                   MoonTextArea(
                     enabled: enabledKnob,
-                    height: growableKnob ? null : 200,
+                    expands: expandsKnob,
+                    height: expandsKnob ? null : 200,
                     textColor: textColor,
                     hintTextColor: hintTextColor,
                     backgroundColor: backgroundColor,

diff --git a/lib/src/widgets/common/border_container.dart b/lib/src/widgets/common/border_container.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 
 class BorderContainer extends StatefulWidget {
+  final bool expands;
   final Clip clipBehavior;
   final Color? backgroundColor;
   final Decoration? decoration;
@@ -17,6 +18,7 @@ class BorderContainer extends StatefulWidget {
   /// Primarily utilized in [MoonTextInput] and [MoonTextInputGroup].
   const BorderContainer({
     super.key,
+    this.expands = false,
     this.clipBehavior = Clip.none,
     this.backgroundColor,
     this.decoration,
@@ -84,8 +86,12 @@ class _BorderContainerState extends State<BorderContainer> with SingleTickerProv
       animation: _borderAnimation,
       builder: (context, child) {
         return Container(
-          height: widget.height,
-          width: widget.width,
+          constraints: BoxConstraints(
+            minHeight: widget.height ?? 0,
+            minWidth: widget.width ?? 0,
+            maxHeight: widget.expands ? double.infinity : widget.height ?? double.infinity,
+            maxWidth: widget.expands ? double.infinity : widget.width ?? double.infinity,
+          ),
           clipBehavior: widget.clipBehavior,
           decoration: widget.decoration ??
               ShapeDecorationWithPremultipliedAlpha(

diff --git a/lib/src/widgets/text_area/text_area.dart b/lib/src/widgets/text_area/text_area.dart
@@ -32,6 +32,9 @@ class MoonTextArea extends StatelessWidget {
   /// {@macro flutter.services.TextInputConfiguration.enableSuggestions}
   final bool enableSuggestions;
 
+  /// {@macro flutter.widgets.editableText.expands}
+  final bool expands;
+
   /// {@macro flutter.widgets.editableText.readOnly}
   final bool readOnly;
 
@@ -224,6 +227,7 @@ class MoonTextArea extends StatelessWidget {
     this.enableIMEPersonalizedLearning = true,
     this.enableInteractiveSelection,
     this.enableSuggestions = true,
+    this.expands = false,
     this.readOnly = false,
     this.scribbleEnabled = true,
     this.showCursor,
@@ -343,7 +347,7 @@ class MoonTextArea extends StatelessWidget {
       enableSuggestions: enableSuggestions,
       errorColor: effectiveErrorColor,
       errorBuilder: errorBuilder,
-      expands: height != null,
+      expands: expands,
       focusNode: focusNode,
       height: height,
       helper: helper,

diff --git a/lib/src/widgets/text_input/text_input.dart b/lib/src/widgets/text_input/text_input.dart
@@ -1298,21 +1298,21 @@ class _MoonTextInputState extends State<MoonTextInput>
           backgroundColor: effectiveBackgroundColor,
           border: resolvedBorder,
           decoration: widget.decoration,
-          height: widget.keyboardType == TextInputType.multiline && widget.height == null ? null : effectiveHeight,
+          expands: widget.expands,
+          width: widget.width,
+          height: effectiveHeight,
           duration: effectiveTransitionDuration,
           curve: effectiveTransitionCurve,
           child: Row(
+            crossAxisAlignment: widget.expands ? CrossAxisAlignment.center : CrossAxisAlignment.stretch,
             children: [
               if (widget.leading != null)
-                SizedBox(
-                  height: double.infinity,
-                  child: Padding(
-                    padding: EdgeInsetsDirectional.only(
-                      start: resolvedContentPadding.left,
-                      end: effectiveGap,
-                    ),
-                    child: widget.leading,
+                Padding(
+                  padding: EdgeInsetsDirectional.only(
+                    start: resolvedContentPadding.left,
+                    end: effectiveGap,
                   ),
+                  child: widget.leading,
                 ),
               Expanded(
                 child: Padding(
@@ -1371,15 +1371,12 @@ class _MoonTextInputState extends State<MoonTextInput>
                 ),
               ),
               if (widget.trailing != null)
-                SizedBox(
-                  height: double.infinity,
-                  child: Padding(
-                    padding: EdgeInsetsDirectional.only(
-                      start: effectiveGap,
-                      end: resolvedContentPadding.right,
-                    ),
-                    child: widget.trailing,
+                Padding(
+                  padding: EdgeInsetsDirectional.only(
+                    start: effectiveGap,
+                    end: resolvedContentPadding.right,
                   ),
+                  child: widget.trailing,
                 ),
             ],
           ),
@@ -1392,38 +1389,34 @@ class _MoonTextInputState extends State<MoonTextInput>
       opacity: widget.enabled ? 1.0 : effectiveDisabledOpacityValue,
       curve: effectiveTransitionCurve,
       duration: effectiveTransitionDuration,
-      child: SizedBox(
-        width: widget.width,
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            child,
-            if (widget.helper != null || (widget.errorText != null))
-              RepaintBoundary(
-                child: IconTheme(
-                  data: IconThemeData(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          child,
+          if (widget.helper != null || (widget.errorText != null))
+            RepaintBoundary(
+              child: IconTheme(
+                data: IconThemeData(
+                  color: widget.errorText != null ? effectiveErrorColor : effectiveHintTextColor,
+                ),
+                child: DefaultTextStyle(
+                  style: effectiveHelperTextStyle.copyWith(
                     color: widget.errorText != null ? effectiveErrorColor : effectiveHintTextColor,
                   ),
-                  child: DefaultTextStyle(
-                    style: effectiveHelperTextStyle.copyWith(
-                      color: widget.errorText != null ? effectiveErrorColor : effectiveHintTextColor,
-                    ),
-                    child: widget.errorText != null
-                        ? widget.errorBuilder?.call(context, widget.errorText) ??
-                            Padding(
-                              padding: effectiveHelperPadding,
-                              child: MoonErrorMessage(errorText: widget.errorText!),
-                            )
-                        : Padding(
+                  child: widget.errorText != null
+                      ? widget.errorBuilder?.call(context, widget.errorText) ??
+                          Padding(
                             padding: effectiveHelperPadding,
-                            child: widget.helper,
-                          ),
-                  ),
+                            child: MoonErrorMessage(errorText: widget.errorText!),
+                          )
+                      : Padding(
+                          padding: effectiveHelperPadding,
+                          child: widget.helper,
+                        ),
                 ),
               ),
-          ],
-        ),
+            ),
+        ],
       ),
     );