chen08209
1111 lines
35 KiB
Dart
1111 lines
35 KiB
Dart
import 'package:fl_clash/common/common.dart';
|
|
import 'package:fl_clash/enum/enum.dart';
|
|
import 'package:fl_clash/models/models.dart';
|
|
import 'package:fl_clash/providers/config.dart';
|
|
import 'package:fl_clash/providers/state.dart';
|
|
import 'package:fl_clash/ui/icons/icons.dart';
|
|
import 'package:fl_clash/views/font_family.dart';
|
|
import 'package:fl_clash/views/theme_preview.dart';
|
|
import 'package:fl_clash/widgets/widgets.dart';
|
|
import 'package:material_ui/material_ui.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:material_color_utilities/hct/hct.dart';
|
|
|
|
class ThemeView extends StatelessWidget {
|
|
const ThemeView({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final appLocalizations = context.appLocalizations;
|
|
return BaseScaffold(
|
|
title: appLocalizations.theme,
|
|
body: CustomScrollView(
|
|
slivers: [
|
|
SliverToBoxAdapter(child: SizedBox(height: context.appBarInset)),
|
|
const SliverToBoxAdapter(child: ThemeLivePreview()),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _ThemeModeItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _PureBlackItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _PrimaryColorItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _NavigationBarItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _TabAnimationItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _LiquidGlassItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _SidebarBlurItem(),
|
|
const _FontFamilyItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
|
const _TextScaleFactorItem(),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 32)),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class ItemCard extends StatelessWidget {
|
|
final Widget child;
|
|
final Info info;
|
|
final List<Widget> actions;
|
|
final double? space;
|
|
|
|
const ItemCard({
|
|
super.key,
|
|
required this.info,
|
|
required this.child,
|
|
this.actions = const [],
|
|
this.space,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Wrap(
|
|
runSpacing: 16,
|
|
children: [
|
|
InfoHeader(info: info, actions: actions, space: space),
|
|
child,
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ThemeModeItem extends ConsumerWidget {
|
|
const _ThemeModeItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final themeMode = ref.watch(
|
|
themeSettingProvider.select((state) => state.themeMode),
|
|
);
|
|
final floatingBar = ref.watch(_floatingBarProvider);
|
|
final liquidGlass = ref.watch(_liquidGlassProvider);
|
|
final light = MiniScreen(
|
|
colorScheme: ref.watch(genColorSchemeProvider(Brightness.light)),
|
|
floatingBar: floatingBar,
|
|
liquidGlass: liquidGlass,
|
|
);
|
|
final dark = MiniScreen(
|
|
colorScheme: ref.watch(genColorSchemeProvider(Brightness.dark)),
|
|
floatingBar: floatingBar,
|
|
liquidGlass: liquidGlass,
|
|
);
|
|
return SliverToBoxAdapter(
|
|
child: PreviewChoiceGroup<ThemeMode>(
|
|
info: Info(label: appLocalizations.themeMode, glyph: AppGlyphs.sun),
|
|
value: themeMode,
|
|
choices: [
|
|
PreviewChoice(
|
|
value: ThemeMode.system,
|
|
label: appLocalizations.auto,
|
|
pictogram: MiniScreenThumb(
|
|
screen: MiniSplitScreen(light: light, dark: dark),
|
|
),
|
|
),
|
|
PreviewChoice(
|
|
value: ThemeMode.light,
|
|
label: appLocalizations.light,
|
|
pictogram: MiniScreenThumb(screen: light),
|
|
),
|
|
PreviewChoice(
|
|
value: ThemeMode.dark,
|
|
label: appLocalizations.dark,
|
|
pictogram: MiniScreenThumb(screen: dark),
|
|
),
|
|
],
|
|
onChanged: (value) {
|
|
ref
|
|
.read(themeSettingProvider.notifier)
|
|
.update((state) => state.copyWith(themeMode: value));
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
const double _headerButtonHeight = 32;
|
|
|
|
final _headerButtonStyle = FilledButton.styleFrom(
|
|
minimumSize: const Size(0, _headerButtonHeight),
|
|
padding: const EdgeInsets.symmetric(horizontal: 14),
|
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
visualDensity: VisualDensity.standard,
|
|
);
|
|
|
|
class _PrimaryColorItem extends ConsumerStatefulWidget {
|
|
const _PrimaryColorItem();
|
|
|
|
@override
|
|
ConsumerState<_PrimaryColorItem> createState() => _PrimaryColorItemState();
|
|
}
|
|
|
|
class _PrimaryColorItemState extends ConsumerState<_PrimaryColorItem> {
|
|
int? _removablePrimaryColor;
|
|
|
|
Future<void> _handleReset() async {
|
|
final res = await dialogs.showMessage(
|
|
message: TextSpan(text: context.appLocalizations.resetTip),
|
|
);
|
|
if (res != true) {
|
|
return;
|
|
}
|
|
ref.read(themeSettingProvider.notifier).update((state) {
|
|
return state.copyWith(
|
|
primaryColors: defaultPrimaryColors,
|
|
primaryColor: defaultPrimaryColor,
|
|
schemeVariant: DynamicSchemeVariant.content,
|
|
);
|
|
});
|
|
}
|
|
|
|
Future<void> _handleDel() async {
|
|
final appLocalizations = context.appLocalizations;
|
|
if (_removablePrimaryColor == null) {
|
|
return;
|
|
}
|
|
final res = await dialogs.showMessage(
|
|
message: TextSpan(
|
|
text: appLocalizations.deleteTip(appLocalizations.colorSchemes),
|
|
),
|
|
);
|
|
if (res != true || !mounted) {
|
|
return;
|
|
}
|
|
ref.read(themeSettingProvider.notifier).update((state) {
|
|
final newPrimaryColors = List<int>.from(state.primaryColors)
|
|
..remove(_removablePrimaryColor);
|
|
int? newPrimaryColor = state.primaryColor;
|
|
if (state.primaryColor == _removablePrimaryColor) {
|
|
if (newPrimaryColors.contains(defaultPrimaryColor)) {
|
|
newPrimaryColor = defaultPrimaryColor;
|
|
} else {
|
|
newPrimaryColor = null;
|
|
}
|
|
}
|
|
return state.copyWith(
|
|
primaryColors: newPrimaryColors,
|
|
primaryColor: newPrimaryColor,
|
|
);
|
|
});
|
|
setState(() {
|
|
_removablePrimaryColor = null;
|
|
});
|
|
}
|
|
|
|
Future<void> _handleAdd() async {
|
|
final appLocalizations = context.appLocalizations;
|
|
final res = await dialogs.showCommonDialog<int>(
|
|
child: const _PaletteDialog(),
|
|
);
|
|
if (res == null || !mounted) {
|
|
return;
|
|
}
|
|
final isExists = ref.read(
|
|
themeSettingProvider.select((state) => state.primaryColors.contains(res)),
|
|
);
|
|
if (isExists) {
|
|
context.showNotifier(
|
|
appLocalizations.existsTip(appLocalizations.colorSchemes),
|
|
level: MessageLevel.warning,
|
|
);
|
|
return;
|
|
}
|
|
ref.read(themeSettingProvider.notifier).update((state) {
|
|
return state.copyWith(
|
|
primaryColors: List.from(state.primaryColors)..add(res),
|
|
);
|
|
});
|
|
}
|
|
|
|
void _handleChangeSchemeVariant(DynamicSchemeVariant value) {
|
|
ref.read(themeSettingProvider.notifier).update((state) {
|
|
return state.copyWith(schemeVariant: value);
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final themeColors = ref.watch(
|
|
themeSettingProvider.select(
|
|
(state) => ThemeColorsSelectorState(
|
|
primaryColor: state.primaryColor,
|
|
primaryColors: state.primaryColors,
|
|
schemeVariant: state.schemeVariant,
|
|
isDefault:
|
|
state.primaryColor == defaultPrimaryColor &&
|
|
intListEquality.equals(
|
|
state.primaryColors,
|
|
defaultPrimaryColors,
|
|
) &&
|
|
state.schemeVariant == DynamicSchemeVariant.content,
|
|
),
|
|
),
|
|
);
|
|
final primaryColor = themeColors.primaryColor;
|
|
final primaryColors = [null, ...themeColors.primaryColors];
|
|
final schemeVariant = themeColors.schemeVariant;
|
|
final isEquals = themeColors.isDefault;
|
|
|
|
return SliverToBoxAdapter(
|
|
child: CommonPopScope(
|
|
onPop: _removablePrimaryColor == null
|
|
? null
|
|
: (_) {
|
|
_clearRemovable();
|
|
return false;
|
|
},
|
|
child: ItemCard(
|
|
info: Info(
|
|
label: appLocalizations.themeColor,
|
|
glyph: AppGlyphs.palette,
|
|
),
|
|
space: 8,
|
|
actions: [
|
|
if (_removablePrimaryColor == null)
|
|
ElasticButton(
|
|
child: CommonPopupBox(
|
|
targetBuilder: (open) => FilledButton.tonal(
|
|
style: _headerButtonStyle,
|
|
onPressed: open,
|
|
child: PopupValueText(schemeVariant.label),
|
|
),
|
|
popupBuilder: (_) => CommonPopupMenu(
|
|
items: [
|
|
for (final variant in DynamicSchemeVariant.values)
|
|
CommonPopupMenuItem(
|
|
label: variant.label,
|
|
checked: variant == schemeVariant,
|
|
onPressed: () => _handleChangeSchemeVariant(variant),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (_removablePrimaryColor != null)
|
|
ElasticButton(
|
|
child: FilledButton(
|
|
style: _headerButtonStyle,
|
|
onPressed: _clearRemovable,
|
|
child: Text(appLocalizations.cancel),
|
|
),
|
|
),
|
|
if (_removablePrimaryColor == null && !isEquals)
|
|
ElasticButton(
|
|
child: IconButton.filledTonal(
|
|
tooltip: context.appLocalizations.reset,
|
|
iconSize: 18,
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints.tightFor(
|
|
width: _headerButtonHeight,
|
|
height: _headerButtonHeight,
|
|
),
|
|
visualDensity: VisualDensity.standard,
|
|
onPressed: _handleReset,
|
|
icon: const GlyphIcon(AppGlyphs.reset, fill: 1),
|
|
),
|
|
),
|
|
],
|
|
child: Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: _PrimaryColorGrid(
|
|
colors: primaryColors,
|
|
selectedColor: primaryColor,
|
|
removableColor: _removablePrimaryColor,
|
|
onSelect: _handleSelectColor,
|
|
onRequestRemove: _markRemovable,
|
|
onDelete: _handleDel,
|
|
onAdd: _handleAdd,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _clearRemovable() {
|
|
setState(() {
|
|
_removablePrimaryColor = null;
|
|
});
|
|
}
|
|
|
|
void _markRemovable(int? color) {
|
|
setState(() {
|
|
_removablePrimaryColor = color;
|
|
});
|
|
}
|
|
|
|
void _handleSelectColor(int? color) {
|
|
_clearRemovable();
|
|
ref
|
|
.read(themeSettingProvider.notifier)
|
|
.update((state) => state.copyWith(primaryColor: color));
|
|
}
|
|
}
|
|
|
|
class _PrimaryColorGrid extends StatelessWidget {
|
|
const _PrimaryColorGrid({
|
|
required this.colors,
|
|
required this.selectedColor,
|
|
required this.removableColor,
|
|
required this.onSelect,
|
|
required this.onRequestRemove,
|
|
required this.onDelete,
|
|
required this.onAdd,
|
|
});
|
|
|
|
static const double _size = 48;
|
|
|
|
final List<int?> colors;
|
|
final int? selectedColor;
|
|
final int? removableColor;
|
|
final void Function(int? color) onSelect;
|
|
final void Function(int? color) onRequestRemove;
|
|
final VoidCallback onDelete;
|
|
final VoidCallback onAdd;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Wrap(
|
|
spacing: 12,
|
|
runSpacing: 12,
|
|
children: [
|
|
for (final color in colors)
|
|
_PrimaryColorTile(
|
|
color: color,
|
|
isSelected: color == selectedColor,
|
|
isRemovable: removableColor != null && removableColor == color,
|
|
onSelect: () => onSelect(color),
|
|
onRequestRemove: () => onRequestRemove(color),
|
|
onDelete: onDelete,
|
|
),
|
|
if (removableColor == null)
|
|
SizedBox.square(
|
|
dimension: _size,
|
|
child: IconButton.filledTonal(
|
|
tooltip: context.appLocalizations.add,
|
|
onPressed: onAdd,
|
|
icon: const GlyphIcon(AppGlyphs.addCircle, fill: 1),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PrimaryColorTile extends StatelessWidget {
|
|
const _PrimaryColorTile({
|
|
required this.color,
|
|
required this.isSelected,
|
|
required this.isRemovable,
|
|
required this.onSelect,
|
|
required this.onRequestRemove,
|
|
required this.onDelete,
|
|
});
|
|
|
|
final int? color;
|
|
final bool isSelected;
|
|
final bool isRemovable;
|
|
final VoidCallback onSelect;
|
|
final VoidCallback onRequestRemove;
|
|
final VoidCallback onDelete;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = context.colorScheme;
|
|
return Stack(
|
|
children: [
|
|
EffectGestureDetector(
|
|
onLongPress: onRequestRemove,
|
|
onSecondaryTap: onRequestRemove,
|
|
child: ColorSchemeBox(
|
|
isSelected: isSelected,
|
|
primaryColor: color != null ? Color(color!) : null,
|
|
onPressed: onSelect,
|
|
size: _PrimaryColorGrid._size,
|
|
),
|
|
),
|
|
if (isRemovable)
|
|
Positioned.fill(
|
|
child: Tooltip(
|
|
message: context.appLocalizations.delete,
|
|
child: Material(
|
|
color: colorScheme.errorContainer.withValues(alpha: 0.9),
|
|
shape: AppShape.circle,
|
|
clipBehavior: Clip.antiAlias,
|
|
child: InkWell(
|
|
customBorder: AppShape.circle,
|
|
onTap: onDelete,
|
|
child: Center(
|
|
child: GlyphIcon(
|
|
AppGlyphs.delete,
|
|
color: colorScheme.onErrorContainer,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
final _floatingBarProvider = appSettingProvider.select(
|
|
(state) => state.floatingNavigationBar,
|
|
);
|
|
|
|
final _liquidGlassProvider = themeSettingProvider.select(
|
|
(state) => state.liquidGlass,
|
|
);
|
|
|
|
class _PureBlackItem extends ConsumerWidget {
|
|
const _PureBlackItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final pureBlack = ref.watch(
|
|
themeSettingProvider.select((state) => state.pureBlack),
|
|
);
|
|
final floatingBar = ref.watch(_floatingBarProvider);
|
|
final liquidGlass = ref.watch(_liquidGlassProvider);
|
|
Widget preview(bool pureBlack) => MiniScreenThumb(
|
|
screen: MiniScreen(
|
|
colorScheme: ref.watch(
|
|
genColorSchemeProvider(Brightness.dark, pureBlack: pureBlack),
|
|
),
|
|
floatingBar: floatingBar,
|
|
liquidGlass: liquidGlass,
|
|
),
|
|
);
|
|
return SliverToBoxAdapter(
|
|
child: PreviewChoiceGroup<bool>(
|
|
info: Info(
|
|
label: appLocalizations.pureBlackMode,
|
|
glyph: AppGlyphs.pureBlack,
|
|
),
|
|
value: pureBlack,
|
|
choices: [
|
|
PreviewChoice(
|
|
value: false,
|
|
label: appLocalizations.standard,
|
|
pictogram: preview(false),
|
|
),
|
|
PreviewChoice(
|
|
value: true,
|
|
label: appLocalizations.pureBlack,
|
|
pictogram: preview(true),
|
|
),
|
|
],
|
|
onChanged: (value) {
|
|
ref
|
|
.read(themeSettingProvider.notifier)
|
|
.update((state) => state.copyWith(pureBlack: value));
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _NavigationBarItem extends ConsumerWidget {
|
|
const _NavigationBarItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final floatingBar = ref.watch(_floatingBarProvider);
|
|
final liquidGlass = ref.watch(_liquidGlassProvider);
|
|
final colorScheme = context.colorScheme;
|
|
return SliverToBoxAdapter(
|
|
child: PreviewChoiceGroup<bool>(
|
|
info: Info(
|
|
label: appLocalizations.navigationBarStyle,
|
|
glyph: AppGlyphs.layers,
|
|
),
|
|
value: floatingBar,
|
|
choices: [
|
|
PreviewChoice(
|
|
value: true,
|
|
label: appLocalizations.floating,
|
|
pictogram: MiniScreenThumb(
|
|
screen: MiniScreen(
|
|
colorScheme: colorScheme,
|
|
floatingBar: true,
|
|
liquidGlass: liquidGlass,
|
|
),
|
|
),
|
|
),
|
|
PreviewChoice(
|
|
value: false,
|
|
label: appLocalizations.docked,
|
|
pictogram: MiniScreenThumb(
|
|
screen: MiniScreen(colorScheme: colorScheme, floatingBar: false),
|
|
),
|
|
),
|
|
],
|
|
onChanged: (value) {
|
|
ref
|
|
.read(appSettingProvider.notifier)
|
|
.update((state) => state.copyWith(floatingNavigationBar: value));
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TabAnimationItem extends ConsumerWidget {
|
|
const _TabAnimationItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final tabAnimation = ref.watch(
|
|
appSettingProvider.select((state) => state.tabAnimation),
|
|
);
|
|
final floatingBar = ref.watch(_floatingBarProvider);
|
|
final liquidGlass = ref.watch(_liquidGlassProvider);
|
|
final colorScheme = context.colorScheme;
|
|
Widget switching(TabAnimation tabAnimation) => MiniScreenThumb(
|
|
screen: MiniScreen(
|
|
colorScheme: colorScheme,
|
|
floatingBar: floatingBar,
|
|
liquidGlass: liquidGlass,
|
|
selected: 1,
|
|
previous: 0,
|
|
progress: 0.55,
|
|
tabAnimation: tabAnimation,
|
|
),
|
|
);
|
|
return SliverToBoxAdapter(
|
|
child: PreviewChoiceGroup<TabAnimation>(
|
|
info: Info(
|
|
label: appLocalizations.tabAnimation,
|
|
glyph: AppGlyphs.motion,
|
|
),
|
|
value: tabAnimation,
|
|
choices: [
|
|
PreviewChoice(
|
|
value: TabAnimation.slide,
|
|
label: appLocalizations.slide,
|
|
pictogram: switching(TabAnimation.slide),
|
|
),
|
|
PreviewChoice(
|
|
value: TabAnimation.fade,
|
|
label: appLocalizations.fade,
|
|
pictogram: switching(TabAnimation.fade),
|
|
),
|
|
],
|
|
onChanged: (value) {
|
|
ref
|
|
.read(appSettingProvider.notifier)
|
|
.update((state) => state.copyWith(tabAnimation: value));
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _LiquidGlassItem extends ConsumerWidget {
|
|
const _LiquidGlassItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final liquidGlass = ref.watch(_liquidGlassProvider);
|
|
final colorScheme = context.colorScheme;
|
|
// Floating either way, as a docked bar stays a fill, over the list page,
|
|
// whose rows run on under the bar where glass shows them.
|
|
Widget preview(bool liquidGlass) => MiniScreenThumb(
|
|
screen: MiniScreen(
|
|
colorScheme: colorScheme,
|
|
floatingBar: true,
|
|
liquidGlass: liquidGlass,
|
|
selected: 1,
|
|
),
|
|
);
|
|
return SliverToBoxAdapter(
|
|
child: PreviewChoiceGroup<bool>(
|
|
info: Info(
|
|
label: appLocalizations.liquidGlass,
|
|
glyph: AppGlyphs.liquidGlass,
|
|
),
|
|
value: liquidGlass,
|
|
choices: [
|
|
PreviewChoice(
|
|
value: false,
|
|
label: appLocalizations.standard,
|
|
pictogram: preview(false),
|
|
),
|
|
PreviewChoice(
|
|
value: true,
|
|
label: appLocalizations.liquidGlass,
|
|
pictogram: preview(true),
|
|
),
|
|
],
|
|
onChanged: (value) {
|
|
ref
|
|
.read(themeSettingProvider.notifier)
|
|
.update((state) => state.copyWith(liquidGlass: value));
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SidebarBlurItem extends ConsumerWidget {
|
|
const _SidebarBlurItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
if (!feature.sidebarBlur || (!system.isMacOS && !system.isWindows)) {
|
|
return const SliverToBoxAdapter(child: SizedBox.shrink());
|
|
}
|
|
final appLocalizations = context.appLocalizations;
|
|
final sidebarBlur = ref.watch(
|
|
themeSettingProvider.select((state) => state.sidebarBlur),
|
|
);
|
|
return SliverToBoxAdapter(
|
|
child: ListItem.toggle(
|
|
leading: const GlyphIcon(AppGlyphs.blur),
|
|
horizontalTitleGap: 12,
|
|
title: Text(
|
|
appLocalizations.sidebarBlur,
|
|
style: AppTextStyle.subheadline
|
|
.of(context, emphasized: true)
|
|
.copyWith(color: context.colorScheme.onSurfaceVariant),
|
|
),
|
|
subtitle: Text(appLocalizations.sidebarBlurDesc),
|
|
value: sidebarBlur,
|
|
onChanged: (value) {
|
|
ref
|
|
.read(themeSettingProvider.notifier)
|
|
.update((state) => state.copyWith(sidebarBlur: value));
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FontFamilyItem extends ConsumerWidget {
|
|
const _FontFamilyItem();
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final colorScheme = context.colorScheme;
|
|
final fontFamily = ref.watch(
|
|
themeSettingProvider.select((state) => state.fontFamily),
|
|
);
|
|
final preview = Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 14, 12, 14),
|
|
child: Row(
|
|
spacing: 12,
|
|
children: [
|
|
Text(
|
|
'Aa',
|
|
style: AppTextStyle.headline
|
|
.of(context)
|
|
.copyWith(fontFamily: fontFamily),
|
|
),
|
|
Expanded(
|
|
child: Text(
|
|
fontFamily ?? appLocalizations.defaultText,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: AppTextStyle.subheadline
|
|
.of(context)
|
|
.copyWith(
|
|
fontFamily: fontFamily,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
),
|
|
GlyphIcon(
|
|
AppGlyphs.chevronForward,
|
|
size: 20,
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
final cardColor = context.raisedSurfaceLevel.colorOf(colorScheme);
|
|
Widget card(VoidCallback onTap) => Material(
|
|
color: cardColor,
|
|
shape: AppShape.lg,
|
|
clipBehavior: Clip.antiAlias,
|
|
child: InkWell(customBorder: AppShape.lg, onTap: onTap, child: preview),
|
|
);
|
|
return SliverToBoxAdapter(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
InfoHeader(
|
|
info: Info(
|
|
label: appLocalizations.fontFamily,
|
|
glyph: AppGlyphs.font,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
|
|
child: context.isMobileView
|
|
? OpenContainer<void>(
|
|
closedShape: AppShape.lg,
|
|
closedColor: cardColor,
|
|
closedBuilder: (_, open) => card(open),
|
|
openBuilder: (_, _) => const FontFamilyView(),
|
|
)
|
|
: card(
|
|
() => showSheet<void>(
|
|
context: context,
|
|
builder: (_) => const FontFamilyView(),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TextScaleFactorItem extends ConsumerStatefulWidget {
|
|
const _TextScaleFactorItem();
|
|
|
|
static const _step = 0.05;
|
|
|
|
@override
|
|
ConsumerState<_TextScaleFactorItem> createState() =>
|
|
_TextScaleFactorItemState();
|
|
}
|
|
|
|
class _TextScaleFactorItemState extends ConsumerState<_TextScaleFactorItem> {
|
|
double? _draft;
|
|
|
|
void _update(TextScale Function(TextScale textScale) update) {
|
|
setState(() => _draft = null);
|
|
ref
|
|
.read(themeSettingProvider.notifier)
|
|
.update((state) => state.copyWith(textScale: update(state.textScale)));
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final appLocalizations = context.appLocalizations;
|
|
final colorScheme = context.colorScheme;
|
|
final textScale = ref.watch(
|
|
themeSettingProvider.select((state) => state.textScale),
|
|
);
|
|
final systemScale = systemTextScaleOf(
|
|
context,
|
|
).clamp(minTextScale, maxTextScale).toDouble();
|
|
final scale = _draft ?? (textScale.enable ? textScale.scale : systemScale);
|
|
final percent = '${(scale * 100).round()}%';
|
|
final level = context.raisedSurfaceLevel;
|
|
final divisions =
|
|
((maxTextScale - minTextScale) / _TextScaleFactorItem._step).round();
|
|
return SliverToBoxAdapter(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
InfoHeader(
|
|
info: Info(
|
|
label: appLocalizations.textScale,
|
|
glyph: AppGlyphs.textSize,
|
|
),
|
|
actions: [
|
|
if (textScale.enable && textScale.scale != 1)
|
|
ElasticButton(
|
|
child: IconButton.filledTonal(
|
|
tooltip: appLocalizations.reset,
|
|
iconSize: 18,
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints.tightFor(
|
|
width: _headerButtonHeight,
|
|
height: _headerButtonHeight,
|
|
),
|
|
visualDensity: VisualDensity.standard,
|
|
onPressed: () =>
|
|
_update((state) => state.copyWith(scale: 1)),
|
|
icon: const GlyphIcon(AppGlyphs.reset, fill: 1),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
|
|
child: Column(
|
|
spacing: 8,
|
|
children: [
|
|
_SegmentedToggle(
|
|
value: textScale.enable,
|
|
offLabel: appLocalizations.followSystem,
|
|
onLabel: appLocalizations.custom,
|
|
onChanged: (value) =>
|
|
_update((state) => state.copyWith(enable: value)),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
|
decoration: ShapeDecoration(
|
|
color: level.colorOf(colorScheme),
|
|
shape: AppShape.lg,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
spacing: 12,
|
|
children: [
|
|
Expanded(
|
|
child: AnimatedSize(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeOutCubic,
|
|
alignment: Alignment.topLeft,
|
|
child: MediaQuery(
|
|
data: MediaQuery.of(context).copyWith(
|
|
textScaler: TextScaler.linear(scale),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
spacing: 4,
|
|
children: [
|
|
Text(
|
|
'Aa',
|
|
style: AppTextStyle.title3.of(context),
|
|
),
|
|
Text(
|
|
appLocalizations.textScalePreview,
|
|
style: AppTextStyle.subheadline
|
|
.of(context)
|
|
.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 4,
|
|
),
|
|
decoration: ShapeDecoration(
|
|
color: level.next.colorOf(colorScheme),
|
|
shape: AppShape.full,
|
|
),
|
|
child: Text(
|
|
percent,
|
|
style: AppTextStyle.subheadline
|
|
.of(context, emphasized: true)
|
|
.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
fontFeatures: const [
|
|
FontFeature.tabularFigures(),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
MediaQuery.withNoTextScaling(
|
|
child: Row(
|
|
spacing: 12,
|
|
children: [
|
|
ExcludeSemantics(
|
|
child: Text(
|
|
'A',
|
|
style: AppTextStyle.footnote
|
|
.of(context)
|
|
.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: SliderTheme(
|
|
data: SliderDefaultsM3(context),
|
|
child: Slider(
|
|
padding: EdgeInsets.zero,
|
|
min: minTextScale,
|
|
max: maxTextScale,
|
|
divisions: divisions,
|
|
value: scale,
|
|
label: percent,
|
|
onChanged: textScale.enable
|
|
? (value) =>
|
|
setState(() => _draft = value)
|
|
: null,
|
|
onChangeEnd: (value) => _update(
|
|
(state) => state.copyWith(scale: value),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
ExcludeSemantics(
|
|
child: Text(
|
|
'A',
|
|
style: AppTextStyle.title2
|
|
.of(context)
|
|
.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SegmentedToggle extends StatelessWidget {
|
|
const _SegmentedToggle({
|
|
required this.value,
|
|
required this.offLabel,
|
|
required this.onLabel,
|
|
required this.onChanged,
|
|
});
|
|
|
|
static const double _height = 44;
|
|
static const double _inset = 4;
|
|
|
|
final bool value;
|
|
final String offLabel;
|
|
final String onLabel;
|
|
final ValueChanged<bool> onChanged;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = context.colorScheme;
|
|
return Container(
|
|
height: _height,
|
|
padding: const EdgeInsets.all(_inset),
|
|
decoration: ShapeDecoration(
|
|
color: context.raisedSurfaceLevel.colorOf(colorScheme),
|
|
shape: AppShape.full,
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
AnimatedAlign(
|
|
duration: const Duration(milliseconds: 250),
|
|
curve: Curves.easeOutCubic,
|
|
alignment: value
|
|
? AlignmentDirectional.centerEnd
|
|
: AlignmentDirectional.centerStart,
|
|
child: FractionallySizedBox(
|
|
widthFactor: 0.5,
|
|
heightFactor: 1,
|
|
child: DecoratedBox(
|
|
decoration: ShapeDecoration(
|
|
color: colorScheme.primary,
|
|
shape: AppShape.full,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
for (final (option, label) in [
|
|
(false, offLabel),
|
|
(true, onLabel),
|
|
])
|
|
Expanded(
|
|
child: Semantics(
|
|
selected: option == value,
|
|
button: true,
|
|
child: Material(
|
|
type: MaterialType.transparency,
|
|
shape: AppShape.full,
|
|
clipBehavior: Clip.antiAlias,
|
|
child: InkWell(
|
|
customBorder: AppShape.full,
|
|
onTap: option == value ? null : () => onChanged(option),
|
|
child: Center(
|
|
child: AnimatedDefaultTextStyle(
|
|
duration: const Duration(milliseconds: 200),
|
|
style: AppTextStyle.subheadline
|
|
.of(context, emphasized: option == value)
|
|
.copyWith(
|
|
color: option == value
|
|
? colorScheme.onPrimary
|
|
: colorScheme.onSurfaceVariant,
|
|
),
|
|
child: Text(
|
|
label,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PaletteDialog extends StatefulWidget {
|
|
const _PaletteDialog();
|
|
|
|
@override
|
|
State<_PaletteDialog> createState() => _PaletteDialogState();
|
|
}
|
|
|
|
class _PaletteDialogState extends State<_PaletteDialog> {
|
|
final _controller = ValueNotifier<Color>(Color(Hct.from(0, 0, 60).toInt()));
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final appLocalizations = context.appLocalizations;
|
|
return CommonDialog(
|
|
title: appLocalizations.palette,
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
child: Text(appLocalizations.cancel),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop(_controller.value.toARGB32());
|
|
},
|
|
child: Text(appLocalizations.confirm),
|
|
),
|
|
],
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SizedBox(width: 300, child: Palette(controller: _controller)),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|