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