@@ -501,8 +501,12 @@ class _ContentInput extends StatelessWidget {
501
501
this .hintText,
502
502
this .enabled = true ,
503
503
});
504
+ /// The narrow used for autocomplete.
505
+ ///
506
+ /// If `null` , autocomplete is disabled.
507
+ // TODO support autocomplete without a narrow
508
+ final Narrow ? narrow;
504
509
505
- final Narrow narrow;
506
510
final ComposeBoxController controller;
507
511
final String ? hintText;
508
512
final bool enabled;
@@ -536,49 +540,55 @@ class _ContentInput extends StatelessWidget {
536
540
Widget build (BuildContext context) {
537
541
final designVariables = DesignVariables .of (context);
538
542
543
+ final inputWidget = ConstrainedBox (
544
+ constraints: BoxConstraints (maxHeight: maxHeight (context)),
545
+ // This [ClipRect] replaces the [TextField] clipping we disable below.
546
+ child: ClipRect (
547
+ child: InsetShadowBox (
548
+ top: _verticalPadding, bottom: _verticalPadding,
549
+ color: designVariables.composeBoxBg,
550
+ child: TextField (
551
+ enabled: enabled,
552
+ controller: controller.content,
553
+ focusNode: controller.contentFocusNode,
554
+ // Let the content show through the `contentPadding` so that
555
+ // our [InsetShadowBox] can fade it smoothly there.
556
+ clipBehavior: Clip .none,
557
+ style: TextStyle (
558
+ fontSize: _fontSize,
559
+ height: _lineHeightRatio,
560
+ color: designVariables.textInput),
561
+ // From the spec at
562
+ // https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
563
+ // > Compose box has the height to fit 2 lines. This is [done] to
564
+ // > have a bigger hit area for the user to start the input. […]
565
+ minLines: 2 ,
566
+ maxLines: null ,
567
+ textCapitalization: TextCapitalization .sentences,
568
+ decoration: InputDecoration (
569
+ // This padding ensures that the user can always scroll long
570
+ // content entirely out of the top or bottom shadow if desired.
571
+ // With this and the `minLines: 2` above, an empty content input
572
+ // gets 60px vertical distance (with no text-size scaling)
573
+ // between the top of the top shadow and the bottom of the
574
+ // bottom shadow. That's a bit more than the 54px given in the
575
+ // Figma, and we can revisit if needed, but it's tricky to get
576
+ // that 54px distance while also making the scrolling work like
577
+ // this and offering two lines of touchable area.
578
+ contentPadding: const EdgeInsets .symmetric (vertical: _verticalPadding),
579
+ hintText: hintText,
580
+ hintStyle: TextStyle (
581
+ color: designVariables.textInput.withFadedAlpha (0.5 )))))));
582
+
583
+ if (narrow == null ) {
584
+ return inputWidget;
585
+ }
586
+
539
587
return ComposeAutocomplete (
540
- narrow: narrow,
588
+ narrow: narrow! ,
541
589
controller: controller.content,
542
590
focusNode: controller.contentFocusNode,
543
- fieldViewBuilder: (context) => ConstrainedBox (
544
- constraints: BoxConstraints (maxHeight: maxHeight (context)),
545
- // This [ClipRect] replaces the [TextField] clipping we disable below.
546
- child: ClipRect (
547
- child: InsetShadowBox (
548
- top: _verticalPadding, bottom: _verticalPadding,
549
- color: designVariables.composeBoxBg,
550
- child: TextField (
551
- enabled: enabled,
552
- controller: controller.content,
553
- focusNode: controller.contentFocusNode,
554
- // Let the content show through the `contentPadding` so that
555
- // our [InsetShadowBox] can fade it smoothly there.
556
- clipBehavior: Clip .none,
557
- style: TextStyle (
558
- fontSize: _fontSize,
559
- height: _lineHeightRatio,
560
- color: designVariables.textInput),
561
- // From the spec at
562
- // https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
563
- // > Compose box has the height to fit 2 lines. This is [done] to
564
- // > have a bigger hit area for the user to start the input. […]
565
- minLines: 2 ,
566
- maxLines: null ,
567
- textCapitalization: TextCapitalization .sentences,
568
- decoration: InputDecoration (
569
- // This padding ensures that the user can always scroll long
570
- // content entirely out of the top or bottom shadow if desired.
571
- // With this and the `minLines: 2` above, an empty content input
572
- // gets 60px vertical distance (with no text-size scaling)
573
- // between the top of the top shadow and the bottom of the
574
- // bottom shadow. That's a bit more than the 54px given in the
575
- // Figma, and we can revisit if needed, but it's tricky to get
576
- // that 54px distance while also making the scrolling work like
577
- // this and offering two lines of touchable area.
578
- contentPadding: const EdgeInsets .symmetric (vertical: _verticalPadding),
579
- hintText: hintText,
580
- hintStyle: TextStyle (
581
- color: designVariables.textInput.withFadedAlpha (0.5 ))))))));
591
+ fieldViewBuilder: (context) => inputWidget);
582
592
}
583
593
}
584
594
0 commit comments