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

Mitra chat input bar: port the exact pattern from client_app

Browse Source 
The missing piece was `constraints: BoxConstraints()` on the
InputDecoration. The app-wide InputDecorationTheme in halo_theme
sets a 48dp min-height for form fields, which the chat input pill
doesn't want. Without explicitly nulling that constraint, the
TextField refuses to collapse below 48dp, so the line-box can't
sit on the parent 44dp container's midline — textAlignVertical
becomes a no-op and the text anchors top.

Switched to the same Material + StadiumBorder + Center wrapper
client_app already uses (chat_screen.dart::_InputBar). Verified
on emulator-5556 driving typed "halo" — text body now sits
visually centered on the pill midline.

Reverts the empirical TextAlignVertical(y: 0.4) shim from 75343f9.

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

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

@@ -740,58 +740,57 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
// Pattern lifted from client_app/chat_screen.dart::_InputBar
// — same shape, same vertical-centering trick. Key bits:
// - Material + StadiumBorder = pill outline + proper focus
// clipping
// - Center wrapper centers the (isCollapsed) TextField
// - `constraints: BoxConstraints()` overrides the app-wide
// InputDecorationTheme min-height (set in halo_theme for
// form fields). Without it, the field claims ~48dp and
// refuses to collapse — textAlignVertical becomes a
// no-op against the parent's 44dp height.
child: SizedBox(
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
// (HaloTokens.bg) — previously the pill bg matched the
// page exactly, leaving only the very-light border to
// define the shape (looked like a soft shadow). Border
// color is unchanged — the visible outline keeps the
// same tone.
child: Material(
color: HaloTokens.surface,
borderRadius: HaloRadius.pill,
border: Border.fromBorderSide(
BorderSide(color: HaloTokens.border),
shape: const StadiumBorder(
side: BorderSide(color: HaloTokens.border),
),
),
// 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(),
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),
isDense: true,
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
focusedErrorBorder: InputBorder.none,
clipBehavior: Clip.antiAlias,
child: Center(
child: TextField(
controller: widget.messageController,
onChanged: widget.onTextChanged,
textInputAction: TextInputAction.send,
onSubmitted: (_) => widget.onSend(),
maxLines: 1,
textAlignVertical: TextAlignVertical.center,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13.5,
color: HaloTokens.ink,
),
decoration: const InputDecoration(
filled: false,
fillColor: Colors.transparent,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
errorBorder: InputBorder.none,
focusedErrorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
isCollapsed: true,
contentPadding: EdgeInsets.symmetric(horizontal: 16),
constraints: BoxConstraints(),
hintText: 'ketik balasan...',
hintStyle: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13.5,
color: HaloTokens.inkMuted,
),
),
),
),
),
),