fix: Broken dynamic color palette

This commit is contained in:
Christian Pauly 2022-05-18 12:13:59 +02:00
parent d755ca7496
commit 38f84c3ae0
12 changed files with 111 additions and 215 deletions

View File

@ -12,7 +12,7 @@ abstract class AppConfig {
static double bubbleSizeFactor = 1; static double bubbleSizeFactor = 1;
static double fontSizeFactor = 1; static double fontSizeFactor = 1;
static const Color chatColor = primaryColor; static const Color chatColor = primaryColor;
static Color? colorSchemeSeed; static Color? colorSchemeSeed = primaryColor;
static const double messageFontSize = 15.75; static const double messageFontSize = 15.75;
static const bool allowOtherHomeservers = true; static const bool allowOtherHomeservers = true;
static const bool enableRegistration = true; static const bool enableRegistration = true;
@ -64,7 +64,7 @@ abstract class AppConfig {
static void loadFromJson(Map<String, dynamic> json) { static void loadFromJson(Map<String, dynamic> json) {
if (json['chat_color'] != null) { if (json['chat_color'] != null) {
try { try {
colorSchemeSeed = Color(json['application_name']); colorSchemeSeed = Color(json['chat_color']);
} catch (e) { } catch (e) {
Logs().w( Logs().w(
'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"', 'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"',

View File

@ -74,11 +74,13 @@ abstract class FluffyThemes {
subtitle2: fallbackTextStyle, subtitle2: fallbackTextStyle,
); );
static ThemeData get light => ThemeData( static ThemeData light([ColorScheme? colorScheme]) => ThemeData(
visualDensity: VisualDensity.standard, visualDensity: VisualDensity.standard,
useMaterial3: true, useMaterial3: true,
brightness: Brightness.light, brightness: Brightness.light,
colorSchemeSeed: AppConfig.colorSchemeSeed, colorSchemeSeed: AppConfig.colorSchemeSeed ??
colorScheme?.primary ??
AppConfig.chatColor,
scaffoldBackgroundColor: Colors.white, scaffoldBackgroundColor: Colors.white,
textTheme: PlatformInfos.isDesktop textTheme: PlatformInfos.isDesktop
? Typography.material2018().black.merge(fallbackTextTheme) ? Typography.material2018().black.merge(fallbackTextTheme)
@ -124,11 +126,13 @@ abstract class FluffyThemes {
), ),
); );
static ThemeData get dark => ThemeData( static ThemeData dark([ColorScheme? colorScheme]) => ThemeData(
visualDensity: VisualDensity.standard, visualDensity: VisualDensity.standard,
useMaterial3: true, useMaterial3: true,
brightness: Brightness.dark, brightness: Brightness.dark,
colorSchemeSeed: AppConfig.colorSchemeSeed, colorSchemeSeed: AppConfig.colorSchemeSeed ??
colorScheme?.primary ??
AppConfig.chatColor,
scaffoldBackgroundColor: Colors.black, scaffoldBackgroundColor: Colors.black,
textTheme: PlatformInfos.isDesktop textTheme: PlatformInfos.isDesktop
? Typography.material2018().white.merge(fallbackTextTheme) ? Typography.material2018().white.merge(fallbackTextTheme)

View File

@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:adaptive_theme/adaptive_theme.dart'; import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter_app_lock/flutter_app_lock.dart'; import 'package:flutter_app_lock/flutter_app_lock.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:future_loading_dialog/future_loading_dialog.dart'; import 'package:future_loading_dialog/future_loading_dialog.dart';
@ -99,9 +100,10 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AdaptiveTheme( return DynamicColorBuilder(
light: FluffyThemes.light, builder: (lightColorScheme, darkColorScheme) => AdaptiveTheme(
dark: FluffyThemes.dark, light: FluffyThemes.light(lightColorScheme),
dark: FluffyThemes.dark(darkColorScheme),
initial: AdaptiveThemeMode.system, initial: AdaptiveThemeMode.system,
builder: (theme, darkTheme) => LayoutBuilder( builder: (theme, darkTheme) => LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
@ -135,7 +137,8 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
initialUrl: _initialUrl ?? '/', initialUrl: _initialUrl ?? '/',
routes: AppRoutes(columnMode ?? false).routes, routes: AppRoutes(columnMode ?? false).routes,
builder: (context, child) { builder: (context, child) {
LoadingDialog.defaultTitle = L10n.of(context)!.loadingPleaseWait; LoadingDialog.defaultTitle =
L10n.of(context)!.loadingPleaseWait;
LoadingDialog.defaultBackLabel = L10n.of(context)!.close; LoadingDialog.defaultBackLabel = L10n.of(context)!.close;
LoadingDialog.defaultOnError = LoadingDialog.defaultOnError =
(e) => (e as Object?)!.toLocalizedString(context); (e) => (e as Object?)!.toLocalizedString(context);
@ -162,6 +165,6 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
); );
}, },
), ),
); ));
} }
} }

View File

@ -4,7 +4,6 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import '../../widgets/avatar.dart'; import '../../widgets/avatar.dart';
import '../../widgets/default_app_bar_search_field.dart';
import 'events/image_bubble.dart'; import 'events/image_bubble.dart';
class StickerPickerDialog extends StatefulWidget { class StickerPickerDialog extends StatefulWidget {
@ -117,10 +116,13 @@ class StickerPickerDialogState extends State<StickerPickerDialog> {
icon: const Icon(Icons.close), icon: const Icon(Icons.close),
onPressed: Navigator.of(context, rootNavigator: false).pop, onPressed: Navigator.of(context, rootNavigator: false).pop,
), ),
title: DefaultAppBarSearchField( title: TextField(
autofocus: false, autofocus: false,
decoration: InputDecoration(
hintText: L10n.of(context)!.search, hintText: L10n.of(context)!.search,
suffix: const Icon(Icons.search_outlined), suffix: const Icon(Icons.search_outlined),
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
),
onChanged: (s) => setState(() => searchFilter = s), onChanged: (s) => setState(() => searchFilter = s),
), ),
), ),

View File

@ -6,7 +6,6 @@ import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/pages/invitation_selection/invitation_selection.dart'; import 'package:fluffychat/pages/invitation_selection/invitation_selection.dart';
import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/default_app_bar_search_field.dart';
import 'package:fluffychat/widgets/layouts/max_width_body.dart'; import 'package:fluffychat/widgets/layouts/max_width_body.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
@ -29,9 +28,13 @@ class InvitationSelectionView extends StatelessWidget {
.toSegments(['rooms', controller.roomId!]), .toSegments(['rooms', controller.roomId!]),
), ),
titleSpacing: 0, titleSpacing: 0,
title: DefaultAppBarSearchField( title: TextField(
autofocus: true, autofocus: true,
decoration: InputDecoration(
hintText: L10n.of(context)!.inviteContactToGroup(groupName), hintText: L10n.of(context)!.inviteContactToGroup(groupName),
suffix: const Icon(Icons.search_outlined),
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
),
onChanged: controller.searchUserWithCoolDown, onChanged: controller.searchUserWithCoolDown,
), ),
), ),

View File

@ -9,7 +9,6 @@ import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
import 'package:fluffychat/utils/string_extension.dart'; import 'package:fluffychat/utils/string_extension.dart';
import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/contacts_list.dart'; import 'package:fluffychat/widgets/contacts_list.dart';
import 'package:fluffychat/widgets/default_app_bar_search_field.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
import '../../utils/localized_exception_extension.dart'; import '../../utils/localized_exception_extension.dart';
import '../../utils/platform_infos.dart'; import '../../utils/platform_infos.dart';
@ -80,11 +79,14 @@ class SearchView extends StatelessWidget {
appBar: AppBar( appBar: AppBar(
leading: const BackButton(), leading: const BackButton(),
titleSpacing: 0, titleSpacing: 0,
title: DefaultAppBarSearchField( title: TextField(
autofocus: true, autofocus: true,
hintText: L10n.of(context)!.search, controller: controller.controller,
searchController: controller.controller, decoration: InputDecoration(
suffix: const Icon(Icons.search_outlined), suffix: const Icon(Icons.search_outlined),
hintText: L10n.of(context)!.search,
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
),
onChanged: controller.search, onChanged: controller.search,
), ),
bottom: TabBar( bottom: TabBar(

View File

@ -44,8 +44,8 @@ class SettingsStyleController extends State<SettingsStyle> {
); );
AppConfig.colorSchemeSeed = color; AppConfig.colorSchemeSeed = color;
AdaptiveTheme.of(context).setTheme( AdaptiveTheme.of(context).setTheme(
light: FluffyThemes.light, light: FluffyThemes.light(),
dark: FluffyThemes.dark, dark: FluffyThemes.dark(),
); );
} }

View File

@ -1,126 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import '../config/app_config.dart';
class DefaultAppBarSearchField extends StatefulWidget {
final TextEditingController? searchController;
final void Function(String)? onChanged;
final void Function(String)? onSubmit;
final Widget? suffix;
final bool autofocus;
final String? prefixText;
final String? hintText;
final String? labelText;
final EdgeInsets? padding;
final bool readOnly;
final Widget? prefixIcon;
final bool unfocusOnClear;
final bool autocorrect;
const DefaultAppBarSearchField({
Key? key,
this.searchController,
this.onChanged,
this.onSubmit,
this.suffix,
this.autofocus = false,
this.prefixText,
this.hintText,
this.padding,
this.labelText,
this.readOnly = false,
this.prefixIcon,
this.unfocusOnClear = true,
this.autocorrect = true,
}) : super(key: key);
@override
DefaultAppBarSearchFieldState createState() =>
DefaultAppBarSearchFieldState();
}
class DefaultAppBarSearchFieldState extends State<DefaultAppBarSearchField> {
late final TextEditingController _searchController;
bool _lastTextWasEmpty = false;
final FocusNode _focusNode = FocusNode();
void requestFocus() => _focusNode.requestFocus();
void _updateSearchController() {
final thisTextIsEmpty = _searchController.text.isEmpty;
if (_lastTextWasEmpty != thisTextIsEmpty) {
setState(() => _lastTextWasEmpty = thisTextIsEmpty);
}
}
@override
void initState() {
super.initState();
_searchController = widget.searchController ?? TextEditingController();
// we need to remove the listener in the dispose method, so we need a reference to the callback
_searchController.addListener(_updateSearchController);
_focusNode.addListener(() => setState(() {}));
}
@override
void dispose() {
_focusNode.dispose();
_searchController.removeListener(_updateSearchController);
if (widget.searchController == null) {
// we need to dispose our own created searchController
_searchController.dispose();
}
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
height: 40,
padding: widget.padding ?? const EdgeInsets.only(right: 12),
child: TextField(
autofocus: widget.autofocus,
autocorrect: widget.autocorrect,
enableSuggestions: widget.autocorrect,
keyboardType: widget.autocorrect ? null : TextInputType.visiblePassword,
controller: _searchController,
onChanged: widget.onChanged,
focusNode: _focusNode,
readOnly: widget.readOnly,
onSubmitted: widget.onSubmit,
decoration: InputDecoration(
prefixText: widget.prefixText,
labelText: widget.labelText,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderSide:
BorderSide(color: Theme.of(context).secondaryHeaderColor),
),
contentPadding: const EdgeInsets.only(
top: 8,
bottom: 8,
left: 16,
),
hintText: widget.hintText,
prefixIcon: widget.prefixIcon,
suffixIcon: !widget.readOnly &&
(_focusNode.hasFocus ||
(widget.suffix == null &&
(_searchController.text.isNotEmpty)))
? IconButton(
tooltip: L10n.of(context)!.clearText,
icon: const Icon(Icons.backspace_outlined),
onPressed: () {
_searchController.clear();
widget.onChanged?.call('');
if (widget.unfocusOnClear) _focusNode.unfocus();
},
)
: widget.suffix,
),
),
);
}
}

View File

@ -25,8 +25,8 @@ class _LockScreenState extends State<LockScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
theme: FluffyThemes.light, theme: FluffyThemes.light(),
darkTheme: FluffyThemes.light, darkTheme: FluffyThemes.light(),
localizationsDelegates: L10n.localizationsDelegates, localizationsDelegates: L10n.localizationsDelegates,
supportedLocales: L10n.supportedLocales, supportedLocales: L10n.supportedLocales,
home: Builder( home: Builder(

View File

@ -503,8 +503,8 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
if (value != null && int.tryParse(value) != null) { if (value != null && int.tryParse(value) != null) {
AppConfig.colorSchemeSeed = Color(int.parse(value)); AppConfig.colorSchemeSeed = Color(int.parse(value));
AdaptiveTheme.of(context).setTheme( AdaptiveTheme.of(context).setTheme(
light: FluffyThemes.light, light: FluffyThemes.light(),
dark: FluffyThemes.dark, dark: FluffyThemes.dark(),
); );
} }
}); });

View File

@ -367,6 +367,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.2.1" version: "0.2.1"
dynamic_color:
dependency: "direct main"
description:
name: dynamic_color
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.2"
email_validator: email_validator:
dependency: "direct main" dependency: "direct main"
description: description:
@ -2055,4 +2062,4 @@ packages:
version: "3.1.0" version: "3.1.0"
sdks: sdks:
dart: ">=2.17.0-0 <3.0.0" dart: ">=2.17.0-0 <3.0.0"
flutter: ">=2.8.0" flutter: ">=2.13.0-0.2.pre"

View File

@ -21,6 +21,7 @@ dependencies:
desktop_lifecycle: ^0.1.0 desktop_lifecycle: ^0.1.0
desktop_notifications: ^0.6.3 desktop_notifications: ^0.6.3
device_info_plus: ^3.2.1 device_info_plus: ^3.2.1
dynamic_color: ^1.2.2
email_validator: ^2.0.1 email_validator: ^2.0.1
emoji_picker_flutter: ^1.1.2 emoji_picker_flutter: ^1.1.2
encrypt: ^5.0.1 encrypt: ^5.0.1