fix: consistent borderless text input styling

This commit is contained in:
edde746
2026-04-01 23:10:40 +02:00
parent 984125a79e
commit 4c534b44d4
5 changed files with 40 additions and 48 deletions
@@ -9,6 +9,7 @@ import '../../providers/companion_remote_provider.dart';
import '../../utils/platform_detector.dart';
import '../../utils/app_logger.dart';
import '../../widgets/overlay_sheet.dart';
import '../../widgets/pill_input_decoration.dart';
import 'pairing_screen.dart';
class MobileRemoteScreen extends StatefulWidget {
@@ -644,11 +645,11 @@ class _SearchBottomSheetState extends State<_SearchBottomSheet> {
TextField(
controller: _controller,
autofocus: true,
decoration: InputDecoration(
decoration: pillInputDecoration(
context,
hintText: t.companionRemote.remote.searchHint,
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(icon: const Icon(Icons.send), onPressed: () => _submit(_controller.text)),
border: const OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(100))),
),
onSubmitted: _submit,
),
+3 -16
View File
@@ -12,6 +12,7 @@ import '../providers/multi_server_provider.dart';
import '../utils/app_logger.dart';
import '../utils/snackbar_helper.dart';
import '../widgets/desktop_app_bar.dart';
import '../widgets/pill_input_decoration.dart';
import '../widgets/focusable_media_card.dart';
import '../utils/focus_utils.dart';
import 'libraries/state_messages.dart';
@@ -237,7 +238,8 @@ class _SearchScreenState extends State<SearchScreen> with Refreshable, FullRefre
child: TextField(
controller: _searchController,
focusNode: _searchFocusNode,
decoration: InputDecoration(
decoration: pillInputDecoration(
context,
hintText: t.search.hint,
prefixIcon: const AppIcon(Symbols.search_rounded, fill: 1),
suffixIcon: _searchController.text.isNotEmpty
@@ -249,21 +251,6 @@ class _SearchScreenState extends State<SearchScreen> with Refreshable, FullRefre
},
)
: null,
filled: true,
fillColor: Theme.of(context).colorScheme.surfaceContainerHighest,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide.none,
),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide.none,
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
),
),
+10 -10
View File
@@ -99,20 +99,20 @@ ThemeData monoTheme({required bool dark, bool oled = false}) {
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: c.surface,
fillColor: c.text.withValues(alpha: 0.08),
isDense: true,
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide(color: c.outline),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide(color: c.outline),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide(color: c.text.withValues(alpha: 0.5)),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide.none,
),
hintStyle: TextStyle(color: c.textMuted),
),
+19
View File
@@ -0,0 +1,19 @@
import 'package:flutter/material.dart';
const pillInputRadius = BorderRadius.all(Radius.circular(100));
InputDecoration pillInputDecoration(BuildContext context, {String? hintText, Widget? prefixIcon, Widget? suffixIcon}) {
final fillColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.08);
const border = OutlineInputBorder(borderRadius: pillInputRadius, borderSide: BorderSide.none);
return InputDecoration(
hintText: hintText,
prefixIcon: prefixIcon,
suffixIcon: suffixIcon,
filled: true,
fillColor: fillColor,
border: border,
enabledBorder: border,
focusedBorder: border,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
);
}
@@ -11,24 +11,9 @@ import '../../../utils/snackbar_helper.dart';
import '../../../widgets/app_icon.dart';
import '../../../widgets/focusable_list_tile.dart';
import '../../../widgets/overlay_sheet.dart';
import '../../../widgets/pill_input_decoration.dart';
import 'base_video_control_sheet.dart';
const _kPillRadius = BorderRadius.all(Radius.circular(100));
InputDecoration _pillInputDecoration(BuildContext context, {String? hintText, Widget? prefixIcon}) {
final fillColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.08);
return InputDecoration(
hintText: hintText,
prefixIcon: prefixIcon,
filled: true,
fillColor: fillColor,
border: const OutlineInputBorder(borderRadius: _kPillRadius, borderSide: BorderSide.none),
enabledBorder: const OutlineInputBorder(borderRadius: _kPillRadius, borderSide: BorderSide.none),
focusedBorder: const OutlineInputBorder(borderRadius: _kPillRadius, borderSide: BorderSide.none),
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
);
}
class SubtitleSearchSheet extends StatefulWidget {
final String ratingKey;
final String serverId;
@@ -186,9 +171,9 @@ class _SubtitleSearchSheetState extends State<SubtitleSearchSheet> {
// Language chip
Material(
color: fillColor,
borderRadius: _kPillRadius,
borderRadius: pillInputRadius,
child: InkWell(
borderRadius: _kPillRadius,
borderRadius: pillInputRadius,
onTap: () => setState(() => _showLanguagePicker = true),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
@@ -208,7 +193,7 @@ class _SubtitleSearchSheetState extends State<SubtitleSearchSheet> {
Expanded(
child: TextField(
controller: _titleController,
decoration: _pillInputDecoration(
decoration: pillInputDecoration(
context,
hintText: widget.mediaTitle ?? 'Title',
prefixIcon: const Icon(Symbols.search_rounded, size: 20),
@@ -369,7 +354,7 @@ class _LanguagePickerViewState extends State<_LanguagePickerView> {
child: TextField(
controller: _filterController,
autofocus: true,
decoration: _pillInputDecoration(
decoration: pillInputDecoration(
context,
hintText: t.videoControls.searchLanguages,
prefixIcon: const Icon(Symbols.search_rounded, size: 20),