feat: Make font size configurable

lib/app_config.dart

@@ -8,6 +8,7 @@ abstract class AppConfig {
   static String _defaultHomeserver = 'matrix.org';
   static String get defaultHomeserver => _defaultHomeserver;
   static String jitsiInstance = 'https://meet.jit.si/';
+  static double fontSizeFactor = 1.0;
   static const bool allowOtherHomeservers = true;
   static const bool enableRegistration = true;
   static const Color primaryColor = Color(0xFF5625BA);

lib/components/content_banner.dart

@@ -51,15 +51,13 @@ class ContentBanner extends StatelessWidget {
             bottom: 0,
             child: Opacity(
               opacity: opacity,
-              child: !loading
+              child: (!loading && mxContent != null)
-                  ? mxContent != null
+                  ? CachedNetworkImage(
-                      ? CachedNetworkImage(
+                      imageUrl: src,
-                          imageUrl: src,
+                      height: 300,
-                          height: 300,
+                      fit: BoxFit.cover,
-                          fit: BoxFit.cover,
+                    )
-                        )
+                  : Icon(defaultIcon, size: 200),
-                      : Icon(defaultIcon, size: 300)
-                  : Icon(defaultIcon, size: 300),
             ),
           ),
           if (onEdit != null)

lib/components/list_items/message.dart

@@ -7,6 +7,7 @@ import 'package:fluffychat/utils/event_extension.dart';
 import 'package:fluffychat/utils/string_color.dart';
 import 'package:flutter/material.dart';
 
+import '../../app_config.dart';
 import '../avatar.dart';
 import '../matrix.dart';
 import '../message_reactions.dart';
@@ -244,7 +245,7 @@ class _MetaRow extends StatelessWidget {
           Text(
             displayname,
             style: TextStyle(
-              fontSize: 11,
+              fontSize: 11 * AppConfig.fontSizeFactor,
               fontWeight: FontWeight.bold,
               color: displayname.color.withAlpha(200),
             ),

lib/components/list_items/state_message.dart

@@ -3,6 +3,8 @@ import 'package:fluffychat/utils/matrix_locals.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 
+import '../../app_config.dart';
+
 class StateMessage extends StatelessWidget {
   final Event event;
   const StateMessage(this.event);
@@ -26,6 +28,8 @@ class StateMessage extends StatelessWidget {
             event.getLocalizedBody(MatrixLocals(L10n.of(context))),
             textAlign: TextAlign.center,
             style: TextStyle(
+              fontSize: Theme.of(context).textTheme.bodyText1.fontSize *
+                  AppConfig.fontSizeFactor,
               color: Theme.of(context).textTheme.bodyText2.color,
               decoration: event.redacted ? TextDecoration.lineThrough : null,
             ),

lib/components/matrix.dart

@@ -380,6 +380,8 @@ class MatrixState extends State<Matrix> {
           wallpaper = file;
         }
       });
+      store.getItem(SettingKeys.fontSizeFactor).then((value) => AppConfig
+          .fontSizeFactor = double.tryParse(value) ?? AppConfig.fontSizeFactor);
       store
           .getItemBool(SettingKeys.renderHtml, AppConfig.renderHtml)
           .then((value) => AppConfig.renderHtml = value);

lib/components/message_content.dart

@@ -73,6 +73,8 @@ class MessageContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final fontSize =
+        DefaultTextStyle.of(context).style.fontSize * AppConfig.fontSizeFactor;
     switch (event.type) {
       case EventTypes.Message:
       case EventTypes.Encrypted:
@@ -105,7 +107,6 @@ class MessageContent extends StatelessWidget {
               final bigEmotes = event.onlyEmotes &&
                   event.numberEmotes > 0 &&
                   event.numberEmotes <= 10;
-              final fontSize = DefaultTextStyle.of(context).style.fontSize;
               return HtmlMessage(
                 html: html,
                 defaultTextStyle: TextStyle(
@@ -163,7 +164,6 @@ class MessageContent extends StatelessWidget {
                 onPressed: () => launch(event.body),
               );
             }
-            final fontSize = DefaultTextStyle.of(context).style.fontSize;
             if (event.redacted) {
               return Row(
                 mainAxisSize: MainAxisSize.min,

lib/config/setting_keys.dart

@@ -9,6 +9,7 @@ abstract class SettingKeys {
   static const String amoledEnabled = 'amoled_enabled';
   static const String codeLanguage = 'code_language';
   static const String showNoGoogle = 'chat.fluffy.show_no_google';
+  static const String fontSizeFactor = 'chat.fluffy.font_size_factor';
   static const String showNoPid = 'chat.fluffy.show_no_pid';
   static const String databasePassword = 'database-password';
   static const String appLockKey = 'chat.fluffy.app_lock';

lib/views/settings_style.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:image_picker/image_picker.dart';
 
+import '../app_config.dart';
 import '../components/matrix.dart';
 
 class SettingsStyle extends StatefulWidget {
@@ -75,12 +76,12 @@ class _SettingsStyleState extends State<SettingsStyle> {
             title: Text(L10n.of(context).darkTheme),
             onChanged: (t) => _switchTheme(t, context),
           ),
-          Divider(thickness: 1),
+          Divider(height: 1),
           ListTile(
             title: Text(
               L10n.of(context).wallpaper,
               style: TextStyle(
-                color: Theme.of(context).primaryColor,
+                color: Theme.of(context).accentColor,
                 fontWeight: FontWeight.bold,
               ),
             ),
@@ -105,6 +106,49 @@ class _SettingsStyleState extends State<SettingsStyle> {
               onTap: () => setWallpaperAction(context),
             );
           }),
+          Divider(height: 1),
+          ListTile(
+            title: Text(
+              'Font size',
+              style: TextStyle(
+                color: Theme.of(context).accentColor,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            subtitle: Text('(*${AppConfig.fontSizeFactor})'),
+          ),
+          Container(
+            alignment: Alignment.centerLeft,
+            child: Container(
+              margin: const EdgeInsets.symmetric(horizontal: 16),
+              padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
+              decoration: BoxDecoration(
+                color: Theme.of(context).secondaryHeaderColor,
+                borderRadius: BorderRadius.circular(16),
+              ),
+              child: Text(
+                'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
+                style: TextStyle(
+                  fontSize: Theme.of(context).textTheme.bodyText1.fontSize *
+                      AppConfig.fontSizeFactor,
+                ),
+              ),
+            ),
+          ),
+          Slider(
+            min: 0.5,
+            max: 2.5,
+            divisions: 4,
+            value: AppConfig.fontSizeFactor,
+            semanticFormatterCallback: (d) => d.toString(),
+            onChanged: (d) {
+              setState(() => AppConfig.fontSizeFactor = d);
+              Matrix.of(context).store.setItem(
+                    SettingKeys.fontSizeFactor,
+                    AppConfig.fontSizeFactor.toString(),
+                  );
+            },
+          ),
         ],
       ),
     );