Added darkmode for chat view

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

View File

@ -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();
}
}

View File

@ -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
),
),

View File

@ -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(