wip: Add inset shadow.

Simplify code. Add tests.

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

Author: PIG208

lib/widgets/compose_box.dart

@@ -299,29 +299,88 @@ class _ContentInput extends StatelessWidget {
         narrow: narrow,
         controller: controller,
         focusNode: focusNode,
-        fieldViewBuilder: (context) => SingleChildScrollView(
-          // While the [TextField] is scrollable, we need to wrap it with
-          // [SingleChildScrollView] to insert a fixed-height padding that can
-          // be scrolled along with the text.
-          child: Padding(
-            padding: const EdgeInsets.only(top: topPadding, left: 16, right: 16),
-            child: TextField(
-              controller: controller,
-              focusNode: focusNode,
-              decoration: InputDecoration.collapsed(
-                border: InputBorder.none,
-                hintText: hintText,
-                hintStyle: TextStyle(color: designVariables.textInput.withOpacity(0.5))),
-              minLines: 2,
-              maxLines: null,
-              textCapitalization: TextCapitalization.sentences,
-              style: TextStyle(
-                fontSize: 17,
-                height: (contentLineHeight / 17),
-                color: designVariables.textInput))))));
+        fieldViewBuilder: (context) => _ShadowBox(
+          color: designVariables.bgComposeBox,
+          child: SingleChildScrollView(
+            // While the [TextField] is scrollable, we need to wrap it with
+            // [SingleChildScrollView] to insert a fixed-height padding that can
+            // be scrolled along with the text.
+            child: Padding(
+              padding: const EdgeInsets.only(top: topPadding, left: 16, right: 16),
+              child: TextField(
+                controller: controller,
+                focusNode: focusNode,
+                decoration: InputDecoration.collapsed(
+                  border: InputBorder.none,
+                  hintText: hintText,
+                  hintStyle: TextStyle(color: designVariables.textInput.withOpacity(0.5))),
+                minLines: 2,
+                maxLines: null,
+                textCapitalization: TextCapitalization.sentences,
+                style: TextStyle(
+                  fontSize: 17,
+                  height: (contentLineHeight / 17),
+                  color: designVariables.textInput)))))));
   }
 }
 
+/// Overlay inset shadows on the child from all scrollable directions.
+class _ShadowBox extends StatefulWidget {
+  const _ShadowBox({required this.color, required this.child});
+
+  final Color color;
+  final Widget child;
+
+  @override
+  State<_ShadowBox> createState() => _ShadowBoxState();
+}
+
+class _ShadowBoxState extends State<_ShadowBox> {
+  bool showTopShadow  = false; bool showBottomShadow = false;
+  bool showLeftShadow = false; bool showRightShadow  = false;
+
+  bool handleScroll(ScrollNotification notification) {
+    final metrics = notification.metrics;
+    setState(() {
+      switch (metrics.axisDirection) {
+        case AxisDirection.up:
+        case AxisDirection.down:
+          showTopShadow = metrics.extentBefore != 0;
+          showBottomShadow = metrics.extentAfter != 0;
+        case AxisDirection.right:
+        case AxisDirection.left:
+          showLeftShadow = metrics.extentBefore != 0;
+          showRightShadow = metrics.extentAfter != 0;
+      }
+    });
+    return false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    BoxDecoration shadowFrom(AlignmentGeometry begin) =>
+      BoxDecoration(gradient: LinearGradient(begin: begin, end: -begin,
+        colors: [widget.color, widget.color.withOpacity(0)]));
+
+    return NotificationListener<ScrollNotification>(
+      onNotification: handleScroll,
+      child: Stack(
+        children: [
+          widget.child,
+          if (showTopShadow) Positioned(top: 0, left: 0, right: 0,
+            child: Container(height: 8, decoration: shadowFrom(Alignment.topCenter))),
+          if (showBottomShadow) Positioned(bottom: 0, left: 0, right: 0,
+            child: Container(height: 8, decoration: shadowFrom(Alignment.bottomCenter))),
+          if (showLeftShadow) Positioned(left: 0, top: 0, bottom: 0,
+            child: Container(width: 8, decoration: shadowFrom(Alignment.centerLeft))),
+          if (showRightShadow) Positioned(right: 0, top: 0, bottom: 0,
+            child: Container(width: 8, decoration: shadowFrom(Alignment.centerRight))),
+        ],
+      ));
+  }
+}
+
+
 /// The content input for _StreamComposeBox.
 class _StreamContentInput extends StatefulWidget {
   const _StreamContentInput({