Properly implemented toggle

Not hacky anymore 🎉
This commit is contained in:
JHubi1 2024-09-08 00:36:34 +02:00
parent 6c84f51267
commit 0629a8c0b5
No known key found for this signature in database
GPG Key ID: 7BF82570CBBBD050
3 changed files with 166 additions and 125 deletions

View File

@ -1,7 +1,6 @@
import 'dart:convert'; import 'dart:convert';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:ollama_app/worker/theme.dart';
import 'main.dart'; import 'main.dart';
import 'worker/haptic.dart'; import 'worker/haptic.dart';
@ -29,9 +28,8 @@ Widget toggle(BuildContext context, String text, bool value,
void Function()? onDisabledTap, void Function()? onDisabledTap,
void Function()? onLongTap, void Function()? onLongTap,
void Function()? onDoubleTap, void Function()? onDoubleTap,
Widget? icon}) { Widget? icon,
var space = ""; // Invisible character: U+2063 bool? iconAfterwards}) {
var spacePlus = " $space";
return InkWell( return InkWell(
enableFeedback: false, enableFeedback: false,
splashFactory: NoSplash.splashFactory, splashFactory: NoSplash.splashFactory,
@ -51,35 +49,42 @@ Widget toggle(BuildContext context, String text, bool value,
onDoubleTap: onDoubleTap, onDoubleTap: onDoubleTap,
child: Padding( child: Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4), padding: const EdgeInsets.only(top: 4, bottom: 4),
child: Stack(children: [ child: Row(children: [
Padding( Expanded(
padding: EdgeInsets.only( child: LayoutBuilder(builder: (context, constraints) {
left: (icon == null) ? 16 : 32, right: 16, top: 12), return Row(mainAxisSize: MainAxisSize.max, children: [
child: Divider(color: Theme.of(context).dividerColor)), (icon != null && !(iconAfterwards ?? false))
Row(mainAxisSize: MainAxisSize.max, children: [
(icon != null)
? Padding( ? Padding(
padding: const EdgeInsets.only(right: 8), padding: const EdgeInsets.only(right: 8),
child: icon, child: icon,
) )
: const SizedBox.shrink(), : const SizedBox.shrink(),
Expanded( ConstrainedBox(
child: Text(text + spacePlus, constraints: BoxConstraints(
maxWidth: constraints.maxWidth - (icon != null ? 32 : 0)),
child: Text(text,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
maxLines: 1, maxLines: 1,
style: TextStyle( style: TextStyle(color: disabled ? Colors.grey : null)),
color: disabled ? Colors.grey : null, ),
backgroundColor: (icon != null && (iconAfterwards ?? false))
(Theme.of(context).brightness == Brightness.light) ? Transform.translate(
? themeLight().colorScheme.surface offset: const Offset(0, 1),
: themeDark().colorScheme.surface))), child: Padding(
Container( padding: const EdgeInsets.only(left: 8),
child: icon,
))
: const SizedBox.shrink(),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: Divider(color: Theme.of(context).dividerColor)),
),
]);
}),
),
Padding(
padding: const EdgeInsets.only(left: 16), padding: const EdgeInsets.only(left: 16),
color: (Theme.of(context).brightness == Brightness.light)
? themeLight().colorScheme.surface
: themeDark().colorScheme.surface,
child: SizedBox(
height: 40,
child: Switch( child: Switch(
value: value, value: value,
onChanged: disabled onChanged: disabled
@ -94,22 +99,16 @@ Widget toggle(BuildContext context, String text, bool value,
? Theme.of(context).colorScheme.primary.withAlpha(50) ? Theme.of(context).colorScheme.primary.withAlpha(50)
: null, : null,
trackOutlineColor: disabled trackOutlineColor: disabled
? WidgetStatePropertyAll(Theme.of(context) ? WidgetStatePropertyAll(
.colorScheme Theme.of(context).colorScheme.primary.withAlpha(150))
.primary
.withAlpha(150))
: null, : null,
thumbColor: disabled thumbColor: disabled
? WidgetStatePropertyAll(Theme.of(context) ? WidgetStatePropertyAll(
.colorScheme Theme.of(context).colorScheme.primary.withAlpha(150))
.primary : !(prefs?.getBool("useDeviceTheme") ?? false) && value
.withAlpha(150))
: !(prefs?.getBool("useDeviceTheme") ?? false) &&
value
? WidgetStatePropertyAll( ? WidgetStatePropertyAll(
Theme.of(context).colorScheme.secondary) Theme.of(context).colorScheme.secondary)
: null))) : null))
]),
]), ]),
), ),
); );
@ -160,6 +159,7 @@ Widget button(String text, IconData? icon, void Function()? onPressed,
bool alwaysMobileDescription = false, bool alwaysMobileDescription = false,
String? badge, String? badge,
String? iconBadge, String? iconBadge,
bool? iconAfterwards,
void Function()? onDisabledTap, void Function()? onDisabledTap,
void Function()? onLongTap, void Function()? onLongTap,
void Function()? onDoubleTap}) { void Function()? onDoubleTap}) {
@ -177,6 +177,10 @@ Widget button(String text, IconData? icon, void Function()? onPressed,
: EdgeInsets.zero, : EdgeInsets.zero,
child: InkWell( child: InkWell(
enableFeedback: false, enableFeedback: false,
// disable hint that clickable, other tap functions still functional
splashFactory: (onPressed == null) ? NoSplash.splashFactory : null,
highlightColor: (onPressed == null) ? Colors.transparent : null,
hoverColor: (onPressed == null) ? Colors.transparent : null,
onTap: disabled onTap: disabled
? () { ? () {
selectionHaptic(); selectionHaptic();
@ -208,29 +212,60 @@ Widget button(String text, IconData? icon, void Function()? onPressed,
var iconContent = (icon != null || replaceIconIfNull) var iconContent = (icon != null || replaceIconIfNull)
? replaceIconIfNull ? replaceIconIfNull
? ImageIcon(MemoryImage(kTransparentImage)) ? ImageIcon(MemoryImage(kTransparentImage))
: Icon(icon, color: disabled ? Colors.grey : color) : Icon(icon,
color: disabled || (iconAfterwards ?? false)
? Colors.grey
: color)
: const SizedBox.shrink(); : const SizedBox.shrink();
return Row(children: [ return Row(
(iconBadge == null) crossAxisAlignment: CrossAxisAlignment.center,
children: [
!(iconAfterwards ?? false)
? (iconBadge == null)
? iconContent ? iconContent
: Badge( : Badge(
label: (iconBadge != "") ? Text(iconBadge) : null, label: (iconBadge != "") ? Text(iconBadge) : null,
child: iconContent), child: iconContent)
: const SizedBox.shrink(),
(icon != null || replaceIconIfNull) (icon != null || replaceIconIfNull)
? const SizedBox(width: 16, height: 42) ? SizedBox(
width: !(iconAfterwards ?? false) ? 16 : null,
height: 42)
: const SizedBox.shrink(), : const SizedBox.shrink(),
Expanded(child: Builder(builder: (context) { Expanded(child: Builder(builder: (context) {
Widget textWidget = Text(text, Widget textWidget = Text(text,
style: TextStyle(color: disabled ? Colors.grey : color)); style:
TextStyle(color: disabled ? Colors.grey : color));
if (badge != null) { if (badge != null) {
textWidget = Badge( textWidget = Badge(
label: Text(badge), label: Text(badge),
offset: const Offset(20, -4), offset: const Offset(20, -4),
backgroundColor: Theme.of(context).colorScheme.primary, backgroundColor:
Theme.of(context).colorScheme.primary,
textColor: Theme.of(context).colorScheme.onPrimary, textColor: Theme.of(context).colorScheme.onPrimary,
child: textWidget); child: textWidget);
} }
if (description == null || description!.startsWith("\n")) { if (iconAfterwards ?? false) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
textWidget,
// same info distance as [toggle]
const SizedBox(width: 8),
Transform.translate(
offset: const Offset(0, 1),
child: (iconBadge == null)
? iconContent
: Badge(
label: (iconBadge != "")
? Text(iconBadge)
: null,
child: iconContent)),
]);
} else {
if (description == null ||
description!.startsWith("\n")) {
description = description?.removePrefix("\n"); description = description?.removePrefix("\n");
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -267,6 +302,7 @@ Widget button(String text, IconData? icon, void Function()? onPressed,
: const SizedBox.shrink() : const SizedBox.shrink()
]); ]);
} }
}
})) }))
]); ]);
}), }),

View File

@ -78,7 +78,9 @@ class _ScreenSettingsBehaviorState extends State<ScreenSettingsBehavior> {
prefs!.setBool("useSystem", value); prefs!.setBool("useSystem", value);
setState(() {}); setState(() {});
}, },
icon: const Icon(Icons.info_outline_rounded), icon: const Icon(Icons.info_rounded,
color: Colors.grey),
iconAfterwards: true,
onLongTap: () { onLongTap: () {
selectionHaptic(); selectionHaptic();
ScaffoldMessenger.of(context).showSnackBar(SnackBar( ScaffoldMessenger.of(context).showSnackBar(SnackBar(

View File

@ -290,8 +290,9 @@ class _ScreenSettingsInterfaceState extends State<ScreenSettingsInterface> {
button( button(
AppLocalizations.of(context)! AppLocalizations.of(context)!
.settingsTimeoutMultiplier, .settingsTimeoutMultiplier,
Icons.info_outline_rounded, Icons.info_rounded,
null, null,
iconAfterwards: true,
context: context, context: context,
alwaysMobileDescription: true, alwaysMobileDescription: true,
description: description:
@ -380,7 +381,9 @@ class _ScreenSettingsInterfaceState extends State<ScreenSettingsInterface> {
setMainAppState!(() {}); setMainAppState!(() {});
setState(() {}); setState(() {});
}), }),
const SizedBox(height: 8), AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: desktopLayoutNotRequired(context) ? 16 : 8),
(colorSchemeLight != null && colorSchemeDark != null) (colorSchemeLight != null && colorSchemeDark != null)
? SegmentedButton( ? SegmentedButton(
segments: [ segments: [