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