compose_box: Cast inset shadow for scrollable contents

The shadow is always present, but the overlay is only visible when there
is text under it.  This only happens when the TextField is long enough
to be scrollable.

See also:

  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395
  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350

Fixes: zulip#915

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/compose_box.dart

@@ -307,25 +307,54 @@ class _ContentInput extends StatelessWidget {
             narrow: narrow,
             controller: controller,
             focusNode: focusNode,
-            fieldViewBuilder: (context) => TextField(
-              controller: controller,
-              focusNode: focusNode,
-              // `contentPadding` causes the text to be clipped by a rect
-              // shorter than the compose box, because it shrinks the body of
-              // [TextField].  Overriding this gives us fine control
-              // over the clipping behavior with [ClipRect].
-              clipBehavior: Clip.none,
-              style: TextStyle(
-                fontSize: 17,
-                height: (contentLineHeight / 17),
-                color: designVariables.textInput),
-              maxLines: null,
-              textCapitalization: TextCapitalization.sentences,
-              decoration: InputDecoration(
-                contentPadding: const EdgeInsets.symmetric(vertical: verticalPadding),
-                hintText: hintText,
-                hintStyle: TextStyle(
-                  color: designVariables.textInput.withValues(alpha: 0.5)))))));
+            fieldViewBuilder: (context) => _InsetShadowBox(
+              color: designVariables.composeBoxBg,
+              child: TextField(
+                controller: controller,
+                focusNode: focusNode,
+                // `contentPadding` causes the text to be clipped by a rect
+                // shorter than the compose box, because it shrinks the body of
+                // [TextField].  Overriding this gives us fine control
+                // over the clipping behavior with [ClipRect].
+                clipBehavior: Clip.none,
+                style: TextStyle(
+                  fontSize: 17,
+                  height: (contentLineHeight / 17),
+                  color: designVariables.textInput),
+                maxLines: null,
+                textCapitalization: TextCapitalization.sentences,
+                decoration: InputDecoration(
+                  contentPadding: const EdgeInsets.symmetric(vertical: verticalPadding),
+                  hintText: hintText,
+                  hintStyle: TextStyle(
+                    color: designVariables.textInput.withValues(alpha: 0.5))))))));
+  }
+}
+
+/// A widget that overlays inset shadows on a child.
+class _InsetShadowBox extends StatelessWidget {
+  const _InsetShadowBox({required this.color, required this.child});
+
+  /// The shadow color to fade into transparency from the top and bottom borders.
+  final Color color;
+  final Widget child;
+
+  BoxDecoration _shadowFrom(AlignmentGeometry begin) {
+    return BoxDecoration(gradient: LinearGradient(
+        begin: begin, end: -begin,
+        colors: [color, color.withValues(alpha: 0)]));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+        children: [
+          child,
+          Positioned(top: 0, left: 0, right: 0,
+              child: Container(height: 8, decoration: _shadowFrom(Alignment.topCenter))),
+          Positioned(bottom: 0, left: 0, right: 0,
+              child: Container(height: 8, decoration: _shadowFrom(Alignment.bottomCenter))),
+        ]);
   }
 }