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

Mitra chat input bar: white pill bg + vertical-center hint

Browse Source 
Previous commit applied the pill/center fixes to the wrong textbox
(goodbye composer). Reverted that and applied to the actual chat
message input bar.

- Container bg: HaloTokens.bg → HaloTokens.surface. The pill now sits
  on white against the cream page (HaloTokens.bg) so the outline reads
  as a proper pill, not a faint shadow. Border color unchanged
  (HaloTokens.border, the previous "shadow" tone).
- TextField wrapped in Center widget. textAlignVertical:center +
  isCollapsed:true alone don't center the field against the parent
  44dp container height — they only center within the field's own
  intrinsic line-box, which then docks top of the parent. Center
  delegates vertical placement to the container's stack, so the hint
  lands on the vertical midline. textAlignVertical removed (Center
  now owns alignment).

Goodbye composer (Pesan Penutup) restored to its prior styling.

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

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

@@ -744,27 +744,41 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
height: 44,
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: const BoxDecoration(
color: HaloTokens.bg,
// 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.
color: HaloTokens.surface,
borderRadius: HaloRadius.pill,
border: Border.fromBorderSide(
BorderSide(color: HaloTokens.border),
),
),
child: TextField(
controller: widget.messageController,
onChanged: widget.onTextChanged,
textInputAction: TextInputAction.send,
onSubmitted: (_) => widget.onSend(),
textAlignVertical: TextAlignVertical.center,
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,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
// 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(
child: TextField(
controller: widget.messageController,
onChanged: widget.onTextChanged,
textInputAction: TextInputAction.send,
onSubmitted: (_) => widget.onSend(),
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,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
),
),
),
),
@@ -886,31 +900,12 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
const SizedBox(height: 8),
Text('Tuliskan pesan terakhirmu untuk $name', textAlign: TextAlign.center),
const SizedBox(height: 24),
// Pill-shaped, single-line text field with the border color picked
// up from the previous "shadow" tone (HaloTokens.border). Container
// fixes the height so textAlignVertical can center the entry.
Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: BorderRadius.circular(100),
border: Border.all(color: HaloTokens.border, width: 1),
),
child: TextField(
controller: widget.goodbyeController,
maxLines: 1,
textAlignVertical: TextAlignVertical.center,
style: const TextStyle(fontSize: 14, color: HaloTokens.ink),
decoration: const InputDecoration(
hintText: 'Terima kasih sudah curhat...',
hintStyle: TextStyle(color: HaloTokens.inkMuted, fontSize: 14),
isCollapsed: true,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
),
TextField(
controller: widget.goodbyeController,
maxLines: 3,
decoration: InputDecoration(
hintText: 'Terima kasih sudah curhat...',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
),
),
const SizedBox(height: 16),