|
|
import 'dart:ui';
|
|
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
|
import 'package:dynamic_color/dynamic_color.dart';
|
|
|
import 'package:matrix/matrix.dart';
|
|
|
|
|
|
import 'package:fluffychat/config/setting_keys.dart';
|
|
|
import 'package:fluffychat/config/themes.dart';
|
|
|
import 'package:fluffychat/l10n/l10n.dart';
|
|
|
import 'package:fluffychat/pages/chat/events/state_message.dart';
|
|
|
import 'package:fluffychat/utils/account_config.dart';
|
|
|
import 'package:fluffychat/utils/color_value.dart';
|
|
|
import 'package:fluffychat/widgets/avatar.dart';
|
|
|
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
|
|
import 'package:fluffychat/widgets/matrix.dart';
|
|
|
import 'package:fluffychat/widgets/mxc_image.dart';
|
|
|
import '../../config/app_config.dart';
|
|
|
import '../../widgets/settings_switch_list_tile.dart';
|
|
|
import 'settings_style.dart';
|
|
|
|
|
|
class SettingsStyleView extends StatelessWidget {
|
|
|
final SettingsStyleController controller;
|
|
|
|
|
|
const SettingsStyleView(this.controller, {super.key});
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
final theme = Theme.of(context);
|
|
|
|
|
|
const colorPickerSize = 32.0;
|
|
|
final client = Matrix.of(context).client;
|
|
|
return Scaffold(
|
|
|
appBar: AppBar(
|
|
|
automaticallyImplyLeading: !FluffyThemes.isColumnMode(context),
|
|
|
centerTitle: FluffyThemes.isColumnMode(context),
|
|
|
title: Text(L10n.of(context).changeTheme),
|
|
|
),
|
|
|
backgroundColor: theme.colorScheme.surface,
|
|
|
body: MaxWidthBody(
|
|
|
child: Column(
|
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
children: [
|
|
|
Padding(
|
|
|
padding: const EdgeInsets.all(12.0),
|
|
|
child: SegmentedButton<ThemeMode>(
|
|
|
selected: {controller.currentTheme},
|
|
|
onSelectionChanged: (selected) =>
|
|
|
controller.switchTheme(selected.single),
|
|
|
segments: [
|
|
|
ButtonSegment(
|
|
|
value: ThemeMode.light,
|
|
|
label: Text(L10n.of(context).lightTheme),
|
|
|
icon: const Icon(Icons.light_mode_outlined),
|
|
|
),
|
|
|
ButtonSegment(
|
|
|
value: ThemeMode.dark,
|
|
|
label: Text(L10n.of(context).darkTheme),
|
|
|
icon: const Icon(Icons.dark_mode_outlined),
|
|
|
),
|
|
|
ButtonSegment(
|
|
|
value: ThemeMode.system,
|
|
|
label: Text(L10n.of(context).systemTheme),
|
|
|
icon: const Icon(Icons.auto_mode_outlined),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
Divider(
|
|
|
color: theme.dividerColor,
|
|
|
),
|
|
|
ListTile(
|
|
|
title: Text(
|
|
|
L10n.of(context).setColorTheme,
|
|
|
style: TextStyle(
|
|
|
color: theme.colorScheme.secondary,
|
|
|
fontWeight: FontWeight.bold,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
DynamicColorBuilder(
|
|
|
builder: (light, dark) {
|
|
|
final systemColor =
|
|
|
Theme.of(context).brightness == Brightness.light
|
|
|
? light?.primary
|
|
|
: dark?.primary;
|
|
|
final colors =
|
|
|
List<Color?>.from(SettingsStyleController.customColors);
|
|
|
if (systemColor == null) {
|
|
|
colors.remove(null);
|
|
|
}
|
|
|
return GridView.builder(
|
|
|
shrinkWrap: true,
|
|
|
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
|
|
|
maxCrossAxisExtent: 64,
|
|
|
),
|
|
|
itemCount: colors.length,
|
|
|
itemBuilder: (context, i) {
|
|
|
final color = colors[i];
|
|
|
return Padding(
|
|
|
padding: const EdgeInsets.all(12.0),
|
|
|
child: Tooltip(
|
|
|
message: color == null
|
|
|
? L10n.of(context).systemTheme
|
|
|
: '#${color.hexValue.toRadixString(16).toUpperCase()}',
|
|
|
child: InkWell(
|
|
|
borderRadius: BorderRadius.circular(colorPickerSize),
|
|
|
onTap: () => controller.setChatColor(color),
|
|
|
child: Material(
|
|
|
color: color ?? systemColor,
|
|
|
elevation: 6,
|
|
|
borderRadius:
|
|
|
BorderRadius.circular(colorPickerSize),
|
|
|
child: SizedBox(
|
|
|
width: colorPickerSize,
|
|
|
height: colorPickerSize,
|
|
|
child: controller.currentColor == color
|
|
|
? Center(
|
|
|
child: Icon(
|
|
|
Icons.check,
|
|
|
size: 16,
|
|
|
color: Theme.of(context)
|
|
|
.colorScheme
|
|
|
.onPrimary,
|
|
|
),
|
|
|
)
|
|
|
: null,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
},
|
|
|
);
|
|
|
},
|
|
|
),
|
|
|
Divider(
|
|
|
color: theme.dividerColor,
|
|
|
),
|
|
|
ListTile(
|
|
|
title: Text(
|
|
|
L10n.of(context).messagesStyle,
|
|
|
style: TextStyle(
|
|
|
color: theme.colorScheme.secondary,
|
|
|
fontWeight: FontWeight.bold,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
StreamBuilder(
|
|
|
stream: client.onSync.stream.where(
|
|
|
(syncUpdate) =>
|
|
|
syncUpdate.accountData?.any(
|
|
|
(accountData) =>
|
|
|
accountData.type ==
|
|
|
ApplicationAccountConfigExtension.accountDataKey,
|
|
|
) ??
|
|
|
false,
|
|
|
),
|
|
|
builder: (context, snapshot) {
|
|
|
final accountConfig = client.applicationAccountConfig;
|
|
|
|
|
|
return Column(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
AnimatedContainer(
|
|
|
duration: FluffyThemes.animationDuration,
|
|
|
curve: FluffyThemes.animationCurve,
|
|
|
decoration: const BoxDecoration(),
|
|
|
clipBehavior: Clip.hardEdge,
|
|
|
child: Stack(
|
|
|
alignment: Alignment.center,
|
|
|
children: [
|
|
|
if (accountConfig.wallpaperUrl != null)
|
|
|
Opacity(
|
|
|
opacity: controller.wallpaperOpacity,
|
|
|
child: ImageFiltered(
|
|
|
imageFilter: ImageFilter.blur(
|
|
|
sigmaX: controller.wallpaperBlur,
|
|
|
sigmaY: controller.wallpaperBlur,
|
|
|
),
|
|
|
child: MxcImage(
|
|
|
key: ValueKey(accountConfig.wallpaperUrl),
|
|
|
uri: accountConfig.wallpaperUrl,
|
|
|
fit: BoxFit.cover,
|
|
|
isThumbnail: true,
|
|
|
width: FluffyThemes.columnWidth * 2,
|
|
|
height: 212,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
Column(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
const SizedBox(height: 16),
|
|
|
StateMessage(
|
|
|
Event(
|
|
|
eventId: 'style_dummy',
|
|
|
room:
|
|
|
Room(id: '!style_dummy', client: client),
|
|
|
content: {'membership': 'join'},
|
|
|
type: EventTypes.RoomMember,
|
|
|
senderId: client.userID!,
|
|
|
originServerTs: DateTime.now(),
|
|
|
stateKey: client.userID!,
|
|
|
),
|
|
|
),
|
|
|
Padding(
|
|
|
padding: EdgeInsets.only(
|
|
|
left: 12 + 12 + Avatar.defaultSize,
|
|
|
right: 12,
|
|
|
top: accountConfig.wallpaperUrl == null
|
|
|
? 0
|
|
|
: 12,
|
|
|
bottom: 12,
|
|
|
),
|
|
|
child: DecoratedBox(
|
|
|
decoration: BoxDecoration(
|
|
|
color: theme.bubbleColor,
|
|
|
borderRadius: BorderRadius.circular(
|
|
|
AppConfig.borderRadius,
|
|
|
),
|
|
|
),
|
|
|
child: Padding(
|
|
|
padding: const EdgeInsets.symmetric(
|
|
|
horizontal: 16,
|
|
|
vertical: 8,
|
|
|
),
|
|
|
child: Text(
|
|
|
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
|
|
|
style: TextStyle(
|
|
|
color: theme.onBubbleColor,
|
|
|
fontSize: AppConfig.messageFontSize *
|
|
|
AppConfig.fontSizeFactor,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
Align(
|
|
|
alignment: Alignment.centerLeft,
|
|
|
child: Padding(
|
|
|
padding: EdgeInsets.only(
|
|
|
right: 12,
|
|
|
left: 12,
|
|
|
top: accountConfig.wallpaperUrl == null
|
|
|
? 0
|
|
|
: 12,
|
|
|
bottom: 12,
|
|
|
),
|
|
|
child: Material(
|
|
|
color:
|
|
|
theme.colorScheme.surfaceContainerHigh,
|
|
|
borderRadius: BorderRadius.circular(
|
|
|
AppConfig.borderRadius,
|
|
|
),
|
|
|
child: Padding(
|
|
|
padding: const EdgeInsets.symmetric(
|
|
|
horizontal: 16,
|
|
|
vertical: 8,
|
|
|
),
|
|
|
child: Text(
|
|
|
'Lorem ipsum dolor sit amet',
|
|
|
style: TextStyle(
|
|
|
color: theme.colorScheme.onSurface,
|
|
|
fontSize: AppConfig.messageFontSize *
|
|
|
AppConfig.fontSizeFactor,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
Divider(
|
|
|
color: theme.dividerColor,
|
|
|
),
|
|
|
ListTile(
|
|
|
title: TextButton.icon(
|
|
|
style: TextButton.styleFrom(
|
|
|
backgroundColor: theme.colorScheme.secondaryContainer,
|
|
|
foregroundColor:
|
|
|
theme.colorScheme.onSecondaryContainer,
|
|
|
),
|
|
|
onPressed: controller.setWallpaper,
|
|
|
icon: const Icon(Icons.edit_outlined),
|
|
|
label: Text(L10n.of(context).setWallpaper),
|
|
|
),
|
|
|
trailing: accountConfig.wallpaperUrl == null
|
|
|
? null
|
|
|
: IconButton(
|
|
|
icon: const Icon(Icons.delete_outlined),
|
|
|
color: theme.colorScheme.error,
|
|
|
onPressed: controller.deleteChatWallpaper,
|
|
|
),
|
|
|
),
|
|
|
if (accountConfig.wallpaperUrl != null) ...[
|
|
|
ListTile(title: Text(L10n.of(context).opacity)),
|
|
|
Slider.adaptive(
|
|
|
min: 0.1,
|
|
|
max: 1.0,
|
|
|
divisions: 9,
|
|
|
semanticFormatterCallback: (d) => d.toString(),
|
|
|
value: controller.wallpaperOpacity,
|
|
|
onChanged: controller.updateWallpaperOpacity,
|
|
|
onChangeEnd: controller.saveWallpaperOpacity,
|
|
|
),
|
|
|
ListTile(title: Text(L10n.of(context).blur)),
|
|
|
Slider.adaptive(
|
|
|
min: 0.0,
|
|
|
max: 10.0,
|
|
|
divisions: 10,
|
|
|
semanticFormatterCallback: (d) => d.toString(),
|
|
|
value: controller.wallpaperBlur,
|
|
|
onChanged: controller.updateWallpaperBlur,
|
|
|
onChangeEnd: controller.saveWallpaperBlur,
|
|
|
),
|
|
|
],
|
|
|
],
|
|
|
);
|
|
|
},
|
|
|
),
|
|
|
ListTile(
|
|
|
title: Text(L10n.of(context).fontSize),
|
|
|
trailing: Text('× ${AppConfig.fontSizeFactor}'),
|
|
|
),
|
|
|
Slider.adaptive(
|
|
|
min: 0.5,
|
|
|
max: 2.5,
|
|
|
divisions: 20,
|
|
|
value: AppConfig.fontSizeFactor,
|
|
|
semanticFormatterCallback: (d) => d.toString(),
|
|
|
onChanged: controller.changeFontSizeFactor,
|
|
|
),
|
|
|
Divider(
|
|
|
color: theme.dividerColor,
|
|
|
),
|
|
|
ListTile(
|
|
|
title: Text(
|
|
|
L10n.of(context).overview,
|
|
|
style: TextStyle(
|
|
|
color: theme.colorScheme.secondary,
|
|
|
fontWeight: FontWeight.bold,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
SettingsSwitchListTile.adaptive(
|
|
|
title: L10n.of(context).presencesToggle,
|
|
|
onChanged: (b) => AppConfig.showPresences = b,
|
|
|
storeKey: SettingKeys.showPresences,
|
|
|
defaultValue: AppConfig.showPresences,
|
|
|
),
|
|
|
SettingsSwitchListTile.adaptive(
|
|
|
title: L10n.of(context).separateChatTypes,
|
|
|
onChanged: (b) => AppConfig.separateChatTypes = b,
|
|
|
storeKey: SettingKeys.separateChatTypes,
|
|
|
defaultValue: AppConfig.separateChatTypes,
|
|
|
),
|
|
|
SettingsSwitchListTile.adaptive(
|
|
|
title: L10n.of(context).displayNavigationRail,
|
|
|
onChanged: (b) => AppConfig.displayNavigationRail = b,
|
|
|
storeKey: SettingKeys.displayNavigationRail,
|
|
|
defaultValue: AppConfig.displayNavigationRail,
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
}
|