rama/halobestie-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mitra chat input bar: drop maxLines:3 attempt + nudge alignment down

Browse Source 
Follow-up to 92da8b2. With `textAlignVertical: center` + `isDense:true`,
the TextField was centering the line-box baseline on the parent
midline — but Latin lowercase glyphs sit at ~75% of line height,
leaving descender space empty below and the optical center of text
visibly above the pill midline.

Fix: `textAlignVertical: TextAlignVertical(y: 0.4)` shifts the
baseline down to align Latin x-height optical centers with the pill
midline. Also added explicit `alignment: Alignment.center` on the
Container so the field's small intrinsic line-box positions on the
midline rather than docking to the top.

Verified on emulator-5556 driving the typed "halo" through the chat
input — text body now sits on the visual midline of the 44dp pill.

The horizontal underline below typed text is Gboard's composing-
region indicator (Android IME behavior), not a TextField underline,
and will go away once the user commits the word with space/send.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ramadhan Sjamsani
2026-05-21 22:28:03 +08:00
parent 92da8b2013
commit 75343f97b6
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
mitra_app/lib/features/chat/screens/mitra_chat_screen.dart
View File

@@ -742,6 +742,11 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
Expanded(
child: Container(
height: 44,
// alignment.center positions the TextField on the vertical
// midline of the 44dp container. Without this, isDense's
// small intrinsic height docks to the top of the parent
// (no implicit vertical centering for Container children).
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: const BoxDecoration(
// White bg so the pill stands out against the cream page
@@ -756,29 +761,37 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
BorderSide(color: HaloTokens.border),
),
),
// Center wrapper makes the TextField sit on the vertical
// midline of the 44dp pill. `textAlignVertical: center`
// + `isCollapsed: true` alone don't center against the
// parent height — they only center within the field's
// own intrinsic line-box, which then docks to the top of
// the parent. Wrapping in Center delegates the vertical
// alignment to the container's stack.
child: Center(
// Vertical centering recipe: Container.alignment.center
// positions the TextField on the midline; textAlignVertical
// with a positive y (~0.4) nudges the baseline down so the
// optical center of Latin lowercase glyphs lines up with
// the pill midline, not just the baseline. With y=0 (true
// center), the field's line-box centers but Latin text
// bodies sit in the upper half because the baseline is at
// ~75% of line height — leaving descender space empty
// below. y=0.4 shifts down to match the visual midline.
child: TextField(
controller: widget.messageController,
onChanged: widget.onTextChanged,
textInputAction: TextInputAction.send,
onSubmitted: (_) => widget.onSend(),
style: const TextStyle(fontSize: 13.5, color: HaloTokens.ink),
maxLines: 1,
textAlignVertical: const TextAlignVertical(y: 0.4),
style: const TextStyle(
fontSize: 13.5,
color: HaloTokens.ink,
),
decoration: const InputDecoration(
hintText: 'ketik balasan...',
hintStyle: TextStyle(color: HaloTokens.inkMuted, fontSize: 13.5),
isCollapsed: true,
isDense: true,
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
),
errorBorder: InputBorder.none,
focusedErrorBorder: InputBorder.none,
),
),
),