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,
-              // Not clipping content input with [TextField] gives us fine
-              // control over the clipping behavior.  Otherwise, the non-zero
-              // vertical `contentPadding` would cause the text to be clipped
-              // by a rectangle shorter than the compose box.
-              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,
+                // Not clipping content input with [TextField] gives us fine
+                // control over the clipping behavior.  Otherwise, the non-zero
+                // vertical `contentPadding` would cause the text to be clipped
+                // by a rectangle shorter than the compose box.
+                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))),
+        ]);
   }
 }