133 lines
4.2 KiB
Dart
133 lines
4.2 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../theme/mono_tokens.dart';
|
|
import '../utils/platform_detector.dart';
|
|
import 'app_icon.dart';
|
|
import 'expressive_button_group.dart';
|
|
|
|
/// Standard settings-option title style.
|
|
///
|
|
/// Mobile matches Flutter's dense ListTile title size so custom controls and
|
|
/// ordinary settings rows keep the same hierarchy. Desktop and TV retain the
|
|
/// larger body style used for D-pad readability.
|
|
TextStyle? settingsOptionTitleStyle(BuildContext context) {
|
|
final style = Theme.of(context).textTheme.bodyLarge;
|
|
return PlatformDetector.isMobile(context) ? style?.copyWith(fontSize: 13) : style;
|
|
}
|
|
|
|
class SettingsSectionHeader extends StatelessWidget {
|
|
final String title;
|
|
|
|
const SettingsSectionHeader(this.title, {super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
|
|
child: Text(
|
|
title,
|
|
style: Theme.of(context).textTheme.labelLarge?.copyWith(color: tokens(context).textMuted, fontWeight: .w600),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// M3E grouped list section: each child gets its own rounded surface card —
|
|
/// large radii on the section's outer corners, small radii between adjacent
|
|
/// items, hairline gaps — with an optional [SettingsSectionHeader] above.
|
|
///
|
|
/// Corner shapes are computed from the child list index, so conditional tiles
|
|
/// MUST be excluded with `if (...)` at list-build time. A child that renders
|
|
/// `SizedBox.shrink()` still occupies a corner slot and corrupts the group's
|
|
/// shape; hoist its condition (or wrap the whole group in a SettingsBuilder).
|
|
///
|
|
/// Each item is a shaped [Material] so the tiles' native ink focus/hover
|
|
/// highlight paints clipped inside the card — that is the d-pad focus visual
|
|
/// (background focus). The group adds no [Focus] nodes of its own; traversal
|
|
/// order and externally-owned tile focus nodes are untouched.
|
|
class SettingsGroup extends StatelessWidget {
|
|
final String? title;
|
|
final List<Widget> children;
|
|
final EdgeInsetsGeometry margin;
|
|
|
|
const SettingsGroup({
|
|
super.key,
|
|
this.title,
|
|
required this.children,
|
|
this.margin = const EdgeInsets.symmetric(horizontal: 16),
|
|
});
|
|
|
|
BorderRadius _radiusFor(int i, MonoTokens t) {
|
|
return BorderRadius.vertical(
|
|
top: Radius.circular(i == 0 ? t.radiusLg : t.radiusXs),
|
|
bottom: Radius.circular(i == children.length - 1 ? t.radiusLg : t.radiusXs),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final t = tokens(context);
|
|
return Column(
|
|
crossAxisAlignment: .start,
|
|
children: [
|
|
if (title != null) SettingsSectionHeader(title!),
|
|
Padding(
|
|
padding: margin,
|
|
child: Column(
|
|
children: [
|
|
for (var i = 0; i < children.length; i++) ...[
|
|
if (i > 0) SizedBox(height: t.groupGap),
|
|
Material(
|
|
color: t.surface,
|
|
clipBehavior: Clip.antiAlias,
|
|
shape: RoundedRectangleBorder(borderRadius: _radiusFor(i, t)),
|
|
child: children[i],
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// A setting with a label + icon row and a full-width button group below.
|
|
/// Used for settings with 2-3 short options.
|
|
class SegmentedSetting<T> extends StatelessWidget {
|
|
final IconData icon;
|
|
final String title;
|
|
final List<ButtonSegment<T>> segments;
|
|
final T selected;
|
|
final ValueChanged<T> onChanged;
|
|
|
|
const SegmentedSetting({
|
|
super.key,
|
|
required this.icon,
|
|
required this.title,
|
|
required this.segments,
|
|
required this.selected,
|
|
required this.onChanged,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
child: Column(
|
|
crossAxisAlignment: .start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
AppIcon(icon, fill: 1),
|
|
const SizedBox(width: 16),
|
|
Text(title, style: settingsOptionTitleStyle(context)),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
ExpressiveButtonGroup<T>(segments: segments, selected: selected, onChanged: onChanged),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|