MarianumMobile/Client
MarianumMobile/Client
5
1
Fork 0
Code Issues34 Pull Requests Actions Packages Projects1 Releases Wiki Activity

Added darkmode for chat view

Browse Source
This commit is contained in:
Elias Müller 2023-05-26 23:16:10 +02:00
parent 9aea09d582
commit 0f259414fb
10 changed files with 248 additions and 78 deletions

BIN
assets/background/chatDark.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 45 KiB

4
lib/data/appTheme.dart

@ -22,6 +22,10 @@ class AppTheme extends ChangeNotifier {
}
}
static bool isDarkMode(BuildContext context) {
return Theme.of(context).brightness == Brightness.dark;
}
}
class ThemeModeDisplay {

60
lib/main.dart

@ -6,6 +6,8 @@ import 'package:jiffy/jiffy.dart';
import 'package:marianum_mobile/data/appTheme.dart';
import 'package:marianum_mobile/data/timetable/timetableProps.dart';
import 'package:marianum_mobile/screen/login/login.dart';
import 'package:marianum_mobile/theming/darkAppTheme.dart';
import 'package:marianum_mobile/theming/lightAppTheme.dart';
import 'package:marianum_mobile/widget/errorView.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
@ -50,7 +52,6 @@ class Main extends StatefulWidget {
}
class _MainState extends State<Main> {
static const Color marianumRed = Color.fromARGB(255, 153, 51, 51);
final Future<SharedPreferences> _storage = SharedPreferences.getInstance();
@ -92,61 +93,8 @@ class _MainState extends State<Main> {
title: 'Marianum Fulda',
themeMode: value.getMode,
theme: ThemeData(
brightness: Brightness.light,
primaryColor: marianumRed,
colorScheme: const ColorScheme(
brightness: Brightness.light,
surface: Colors.white,
onSurface: Colors.black,
onSecondary: Colors.white,
onPrimary: Colors.white,
onError: marianumRed,
onBackground: Colors.black,
error: marianumRed,
background: Colors.white,
secondary: Colors.grey,
primary: marianumRed,
),
hintColor: marianumRed,
inputDecorationTheme: const InputDecorationTheme(
border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
),
appBarTheme: const AppBarTheme(
backgroundColor: marianumRed,
),
progressIndicatorTheme: const ProgressIndicatorThemeData(
color: marianumRed,
),
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primaryColor: marianumRed,
colorScheme: const ColorScheme(
brightness: Brightness.dark,
surface: Colors.white,
onSurface: Colors.white,
onSecondary: Colors.black,
onPrimary: Colors.black,
onError: marianumRed,
onBackground: Colors.black,
error: marianumRed,
background: Colors.black,
secondary: Colors.grey,
primary: marianumRed,
),
hintColor: marianumRed,
inputDecorationTheme: const InputDecorationTheme(
border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
),
appBarTheme: const AppBarTheme(
backgroundColor: marianumRed,
),
progressIndicatorTheme: const ProgressIndicatorThemeData(
color: marianumRed,
),
),
theme: LightAppTheme.theme,
darkTheme: DarkAppTheme.theme,
home: FutureBuilder<SharedPreferences>(

128
lib/screen/pages/more/debug/ThemeColors.dart Normal file

@ -0,0 +1,128 @@
import 'package:flutter/material.dart';
class ColorPreviewWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
return ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.color_lens_outlined),
title: Text('Farbtest'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ColorPreviewPage(),
),
);
},
),
],
);
}
}
class ColorPreviewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
final colorScheme = themeData.colorScheme;
return Scaffold(
appBar: AppBar(
title: Text('Farbtest'),
),
body: ListView(
children: <Widget>[
for (var entry in [
'Primary',
'Primary Variant',
'Secondary',
'Secondary Variant',
'Background',
'Surface',
'Error',
'On Primary',
'On Secondary',
'On Background',
'On Surface',
'On Error',
])
ColorItem(name: entry, color: _getColor(colorScheme, entry)),
],
),
);
}
Color _getColor(ColorScheme colorScheme, String name) {
switch (name) {
case 'Primary':
return colorScheme.primary;
case 'Primary Variant':
return colorScheme.primaryVariant;
case 'Secondary':
return colorScheme.secondary;
case 'Secondary Variant':
return colorScheme.secondaryVariant;
case 'Background':
return colorScheme.background;
case 'Surface':
return colorScheme.surface;
case 'Error':
return colorScheme.error;
case 'On Primary':
return colorScheme.onPrimary;
case 'On Secondary':
return colorScheme.onSecondary;
case 'On Background':
return colorScheme.onBackground;
case 'On Surface':
return colorScheme.onSurface;
case 'On Error':
return colorScheme.onError;
default:
return Colors.transparent;
}
}
}
class ColorItem extends StatelessWidget {
final String name;
final Color color;
const ColorItem({Key? key, required this.name, required this.color})
: super(key: key);
@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
return Container(
padding: EdgeInsets.all(16.0),
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
name,
style: TextStyle(
color: themeData.brightness == Brightness.light
? Colors.black
: Colors.white,
),
),
Text(
'#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}',
style: TextStyle(
color: themeData.brightness == Brightness.light
? Colors.black
: Colors.white,
),
),
],
),
);
}
}

6
lib/screen/pages/more/overhang.dart

@ -5,6 +5,7 @@ import 'package:marianum_mobile/screen/settings/settings.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
import '../../../widget/ListItem.dart';
import 'debug/ThemeColors.dart';
import 'message/message.dart';
class Overhang extends StatelessWidget {
@ -20,11 +21,12 @@ class Overhang extends StatelessWidget {
],
),
body: ListView(
children: const [
children: [
ListItemNavigator(icon: Icons.newspaper, text: "Marianum Message", target: Message()),
ListItemNavigator(icon: Icons.room, text: "Raumplan", target: Roomplan()),
ListItemNavigator(icon: Icons.calendar_month, text: "Schulferien", target: Roomplan()),
ListItemNavigator(icon: Icons.calculate, text: "Notendurschnitts rechner", target: Roomplan())
ListItemNavigator(icon: Icons.calculate, text: "Notendurschnitts rechner", target: Roomplan()),
ListItemNavigator(icon: Icons.color_lens_outlined, text: "Farbtest", target: ColorPreviewPage())
],
),
);

37
lib/screen/pages/talk/chatBubble.dart

@ -5,6 +5,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jiffy/jiffy.dart';
import 'package:marianum_mobile/data/appTheme.dart';
import '../../../api/marianumcloud/talk/chat/getChatResponse.dart';
import '../../../api/marianumcloud/talk/room/getRoomResponse.dart';
@ -30,18 +31,26 @@ class ChatBubble extends StatefulWidget {
}
class _ChatBubbleState extends State<ChatBubble> {
static const styleSystem = BubbleStyle(
color: Color(0xffd4eaf4),
borderWidth: 1,
elevation: 2,
margin: BubbleEdges.only(bottom: 20, top: 10),
alignment: Alignment.center,
);
// late BubbleStyle styleSystem;
// late BubbleStyle Function(bool) styleRemote;
// late BubbleStyle Function(bool) styleSelf;
static BubbleStyle getStyleOther(bool seamless) {
BubbleStyle getSystemStyle() {
return BubbleStyle(
color: AppTheme.isDarkMode(context) ? Color(0xff182229) : Colors.white,
borderWidth: 1,
elevation: 2,
margin: const BubbleEdges.only(bottom: 20, top: 10),
alignment: Alignment.center,
);
}
BubbleStyle getRemoteStyle(bool seamless) {
var color = AppTheme.isDarkMode(context) ? Color(0xff202c33) : Colors.white;
return BubbleStyle(
nip: BubbleNip.leftTop,
color: seamless ? Colors.transparent : Colors.white,
color: seamless ? Colors.transparent : color,
borderWidth: seamless ? 0 : 1,
elevation: seamless ? 0 : 1,
margin: const BubbleEdges.only(bottom: 10, left: 10, right: 50),
@ -49,10 +58,10 @@ class _ChatBubbleState extends State<ChatBubble> {
);
}
static BubbleStyle getStyleSelf(bool seamless) {
BubbleStyle getSelfStyle(bool seamless) {
return BubbleStyle(
nip: BubbleNip.rightBottom,
color: seamless ? Colors.transparent : const Color(0xffd9fdd3),
color: seamless ? Colors.transparent : Color(0xff005c4b),
borderWidth: seamless ? 0 : 1,
elevation: seamless ? 0 : 1,
margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
@ -76,12 +85,12 @@ class _ChatBubbleState extends State<ChatBubble> {
BubbleStyle getStyle() {
if(widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment) {
if(widget.isSender) {
return getStyleSelf(message.containsFile);
return getSelfStyle(message.containsFile);
} else {
return getStyleOther(message.containsFile);
return getRemoteStyle(message.containsFile);
}
} else {
return styleSystem;
return getSystemStyle();
}
}

6
lib/screen/pages/talk/chatTextfield.dart

@ -56,7 +56,7 @@ class _ChatTextfieldState extends State<ChatTextfield> {
padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
height: 60,
width: double.infinity,
color: Colors.white,
color: Theme.of(context).colorScheme.secondary,
child: Row(
children: <Widget>[
GestureDetector(
@ -108,9 +108,9 @@ class _ChatTextfieldState extends State<ChatTextfield> {
controller: _textBoxController,
readOnly: sending,
maxLines: 10,
decoration: const InputDecoration(
decoration: InputDecoration(
hintText: "Nachricht schreiben...",
hintStyle: TextStyle(color: Colors.black54),
hintStyle: TextStyle(color: Theme.of(context).colorScheme.onSecondary),
border: InputBorder.none
),
),

7
lib/screen/pages/talk/chatView.dart

@ -4,6 +4,7 @@ import 'package:jiffy/jiffy.dart';
import 'package:loader_overlay/loader_overlay.dart';
import 'package:marianum_mobile/api/marianumcloud/talk/chat/getChatResponse.dart';
import 'package:marianum_mobile/api/marianumcloud/talk/room/getRoomResponse.dart';
import 'package:marianum_mobile/data/appTheme.dart';
import 'package:marianum_mobile/data/chatList/chatProps.dart';
import 'package:marianum_mobile/screen/pages/talk/chatBubble.dart';
import 'package:marianum_mobile/screen/pages/talk/chatTextfield.dart';
@ -84,13 +85,13 @@ class _ChatViewState extends State<ChatView> {
),
),
body: Container(
decoration: const BoxDecoration(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/background/chat.png"),
image: AppTheme.isDarkMode(context) ? const AssetImage("assets/background/chatDark.png") : const AssetImage("assets/background/chat.png"),
scale: 1.5,
opacity: 0.5,
repeat: ImageRepeat.repeat,
colorFilter: ColorFilter.linearToSrgbGamma()
colorFilter: const ColorFilter.linearToSrgbGamma()
)
),
child: LoaderOverlay(

39
lib/theming/darkAppTheme.dart Normal file

@ -0,0 +1,39 @@
import 'package:flutter/material.dart';
class DarkAppTheme {
static const Color marianumRed = Color.fromARGB(255, 153, 51, 51);
static final theme = ThemeData(
brightness: Brightness.dark,
primaryColor: marianumRed,
hintColor: marianumRed,
colorScheme: const ColorScheme(
brightness: Brightness.dark,
surface: Colors.black,
onSurface: Colors.white,
primary: Colors.black,
onPrimary: Colors.white,
secondary: Colors.grey,
onSecondary: Colors.white,
background: Colors.black26,
onBackground: Colors.white,
error: marianumRed,
onError: marianumRed,
),
inputDecorationTheme: const InputDecorationTheme(
border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
),
appBarTheme: const AppBarTheme(
backgroundColor: marianumRed,
),
progressIndicatorTheme: const ProgressIndicatorThemeData(
color: marianumRed,
),
);
}

39
lib/theming/lightAppTheme.dart Normal file

@ -0,0 +1,39 @@
import 'package:flutter/material.dart';
class LightAppTheme {
static const Color marianumRed = Color.fromARGB(255, 153, 51, 51);
static final theme = ThemeData(
brightness: Brightness.light,
primaryColor: marianumRed,
colorScheme: const ColorScheme(
brightness: Brightness.light,
surface: Colors.white,
onSurface: Colors.black,
secondary: Colors.grey,
onSecondary: Colors.white,
primary: marianumRed,
onPrimary: Colors.white,
background: Colors.white,
onBackground: Colors.black,
error: marianumRed,
onError: marianumRed,
),
inputDecorationTheme: const InputDecorationTheme(
border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
),
appBarTheme: const AppBarTheme(
backgroundColor: marianumRed,
),
progressIndicatorTheme: const ProgressIndicatorThemeData(
color: marianumRed,
),
);
}