compose_box: Cast inset shadow for scrollable contents.

This also supports horizontal scrolling, to later add shadow when
we have more compose box icons.

Fixex: zulip#915

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

Author: PIG208

lib/widgets/compose_box.dart

@@ -302,32 +302,61 @@ class _ContentInput extends StatelessWidget {
         // The bottom padding is not added because it is not supposed to extend
         // the compose box.
         maxHeight: verticalPadding + contentLineHeight * 7 + contentLineHeight * 0.727),
-      child: ClipRect(
-        child: ComposeAutocomplete(
-          narrow: narrow,
-          controller: controller,
-          focusNode: focusNode,
-          fieldViewBuilder: (context) => TextField(
+        child: ClipRect(
+          child: ComposeAutocomplete(
+            narrow: narrow,
             controller: controller,
             focusNode: focusNode,
-            // `contentPadding` causes the text to be clipped while leaving
-            // a gap to the top border, because it shrinks the size of the
-            // body of `TextField`.  Overriding this gives us full control
-            // over the clipping behavior with the `ConstrainedBox`.
-            clipBehavior: Clip.none,
-            maxLines: null,
-            textCapitalization: TextCapitalization.sentences,
-            style: TextStyle(
-              fontSize: 17,
-              height: (contentLineHeight / 17),
-              color: designVariables.textInput),
-            decoration: InputDecoration(
-              isDense: true,
-              border: InputBorder.none,
-              contentPadding: const EdgeInsets.symmetric(vertical: verticalPadding),
-              hintText: hintText,
-              hintStyle: TextStyle(
-                color: designVariables.textInput.withValues(alpha: 0.5)))))));
+            fieldViewBuilder: (context) => _ShadowBox(
+              color: designVariables.bgComposeBox,
+              child: TextField(
+                controller: controller,
+                focusNode: focusNode,
+                // `contentPadding` causes the text to be clipped while leaving
+                // a gap to the top border, because it shrinks the size of the
+                // body of `TextField`.  Overriding this gives us full control
+                // over the clipping behavior with the `ConstrainedBox`.
+                clipBehavior: Clip.none,
+                maxLines: null,
+                textCapitalization: TextCapitalization.sentences,
+                style: TextStyle(
+                  fontSize: 17,
+                  height: (contentLineHeight / 17),
+                  color: designVariables.textInput),
+                decoration: InputDecoration(
+                  isDense: true,
+                  border: InputBorder.none,
+                  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 _ShadowBox extends StatelessWidget {
+  const _ShadowBox({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))),
+      ]);
   }
 }