talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added theme to main app

Browse Source
This commit is contained in:
Deven Joshi
2020-12-30 13:49:25 +05:30
parent 23fef38f2c
commit bf839e9bce
2 changed files with 94 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/main.dart
+5 -2
View File
@@ -52,10 +52,13 @@ class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return StreamChat( return StreamChat(
streamChatThemeData: StreamChatThemeData.getDefaultTheme(
ThemeData.dark(),
),
client: client, client: client,
child: MaterialApp( child: MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
theme: ThemeData.dark(), theme: ThemeData.light(),
darkTheme: ThemeData.dark(), darkTheme: ThemeData.dark(),
//TODO change to system once dark theme is implemented //TODO change to system once dark theme is implemented
themeMode: ThemeMode.dark, themeMode: ThemeMode.dark,
@@ -426,7 +429,7 @@ class ChannelPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1), backgroundColor: StreamChatTheme.of(context).backgroundColor,
appBar: ChannelHeader( appBar: ChannelHeader(
showTypingIndicator: false, showTypingIndicator: false,
), ),
lib/src/stream_chat_theme.dart
+89 -37
View File
@@ -247,18 +247,17 @@ class StreamChatThemeData {
static StreamChatThemeData getDefaultTheme(ThemeData theme) { static StreamChatThemeData getDefaultTheme(ThemeData theme) {
final accentColor = Color(0xff006cff); final accentColor = Color(0xff006cff);
final isDark = theme.brightness == Brightness.dark; final isDark = theme.brightness == Brightness.dark;
final textTheme = TextTheme(); final textTheme = isDark ? TextTheme.dark() : TextTheme.light();
final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light(); final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light();
return StreamChatThemeData( return StreamChatThemeData(
textTheme: textTheme, textTheme: textTheme,
colorTheme: colorTheme, colorTheme: colorTheme,
secondaryColor: Color(0xffEAEAEA), secondaryColor: Color(0xffEAEAEA),
accentColor: accentColor, accentColor: accentColor,
primaryColor: isDark ? colorTheme.black : colorTheme.white, primaryColor: colorTheme.white,
primaryIconTheme: IconThemeData( primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)),
color: isDark ? Colors.white : Colors.black.withOpacity(.5)),
defaultChannelImage: (context, channel) => SizedBox(), defaultChannelImage: (context, channel) => SizedBox(),
backgroundColor: isDark ? Colors.black : Colors.white, backgroundColor: colorTheme.white,
defaultUserImage: (context, user) => Center( defaultUserImage: (context, user) => Center(
child: CachedNetworkImage( child: CachedNetworkImage(
filterQuality: FilterQuality.high, filterQuality: FilterQuality.high,
@@ -280,7 +279,7 @@ class StreamChatThemeData {
color: Color(0xff7A7A7A), color: Color(0xff7A7A7A),
), ),
lastMessageAt: textTheme.footnote.copyWith( lastMessageAt: textTheme.footnote.copyWith(
color: Colors.black.withOpacity(.5), color: colorTheme.black.withOpacity(.5),
), ),
), ),
channelTheme: ChannelTheme( channelTheme: ChannelTheme(
@@ -295,20 +294,17 @@ class StreamChatThemeData {
width: 40, width: 40,
), ),
), ),
color: isDark ? Colors.black : Colors.white, color: colorTheme.white,
title: TextStyle( title: TextStyle(
fontSize: 14, fontSize: 14,
color: isDark ? Colors.white : Colors.black, color: colorTheme.black,
), ),
lastMessageAt: TextStyle( lastMessageAt: TextStyle(
fontSize: 11, fontSize: 11,
color: isDark color: colorTheme.black.withOpacity(.5),
? Colors.white.withOpacity(.5)
: Colors.black.withOpacity(.5),
), ),
), ),
inputBackground: inputBackground: colorTheme.white.withAlpha(12),
isDark ? Colors.black.withAlpha(12) : Colors.white.withAlpha(12),
inputGradient: LinearGradient(colors: [ inputGradient: LinearGradient(colors: [
Color(0xFF00AEFF), Color(0xFF00AEFF),
Color(0xFF0076FF), Color(0xFF0076FF),
@@ -317,12 +313,10 @@ class StreamChatThemeData {
ownMessageTheme: MessageTheme( ownMessageTheme: MessageTheme(
messageText: TextStyle( messageText: TextStyle(
fontSize: 14.5, fontSize: 14.5,
color: isDark ? Colors.white : Colors.black, color: colorTheme.black,
), ),
createdAt: TextStyle( createdAt: TextStyle(
color: isDark color: colorTheme.black.withOpacity(.5),
? Colors.white.withOpacity(.5)
: Colors.black.withOpacity(.5),
fontSize: 12, fontSize: 12,
), ),
replies: TextStyle( replies: TextStyle(
@@ -331,7 +325,7 @@ class StreamChatThemeData {
fontSize: 12, fontSize: 12,
), ),
messageBackgroundColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), messageBackgroundColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
reactionsBackgroundColor: isDark ? Colors.black : Colors.white, reactionsBackgroundColor: colorTheme.white,
reactionsBorderColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), reactionsBorderColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
replyThreadColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA), replyThreadColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
avatarTheme: AvatarTheme( avatarTheme: AvatarTheme(
@@ -348,15 +342,13 @@ class StreamChatThemeData {
otherMessageTheme: MessageTheme( otherMessageTheme: MessageTheme(
reactionsBackgroundColor: reactionsBackgroundColor:
isDark ? Color(0xff191919) : Color(0xffEAEAEA), isDark ? Color(0xff191919) : Color(0xffEAEAEA),
reactionsBorderColor: isDark ? Colors.black : Colors.white, reactionsBorderColor: colorTheme.white,
messageText: TextStyle( messageText: TextStyle(
fontSize: 14.5, fontSize: 14.5,
color: isDark ? Colors.white : Colors.black, color: colorTheme.black,
), ),
createdAt: TextStyle( createdAt: TextStyle(
color: isDark color: colorTheme.black.withOpacity(.5),
? Colors.white.withOpacity(.5)
: Colors.black.withOpacity(.5),
fontSize: 12, fontSize: 12,
), ),
replies: TextStyle( replies: TextStyle(
@@ -367,9 +359,8 @@ class StreamChatThemeData {
messageLinks: TextStyle( messageLinks: TextStyle(
color: accentColor, color: accentColor,
), ),
messageBackgroundColor: isDark ? Colors.black : Colors.white, messageBackgroundColor: colorTheme.white,
replyThreadColor: replyThreadColor: colorTheme.black.withAlpha(24),
isDark ? Colors.white.withAlpha(24) : Colors.black.withAlpha(24),
avatarTheme: AvatarTheme( avatarTheme: AvatarTheme(
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
constraints: BoxConstraints.tightFor( constraints: BoxConstraints.tightFor(
@@ -404,7 +395,13 @@ class StreamChatThemeData {
} }
} }
enum TextThemeType {
light,
dark,
}
class TextTheme { class TextTheme {
final TextThemeType type;
final TextStyle title; final TextStyle title;
final TextStyle headlineBold; final TextStyle headlineBold;
final TextStyle headline; final TextStyle headline;
@@ -414,7 +411,8 @@ class TextTheme {
final TextStyle footnote; final TextStyle footnote;
final TextStyle captionBold; final TextStyle captionBold;
TextTheme({ TextTheme.light({
this.type = TextThemeType.light,
this.title = const TextStyle( this.title = const TextStyle(
fontSize: 22, fontSize: 22,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
@@ -448,6 +446,49 @@ class TextTheme {
), ),
}); });
TextTheme.dark({
this.type = TextThemeType.dark,
this.title = const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
),
this.headlineBold = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
this.headline = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white,
),
this.bodyBold = const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
this.body = const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.white,
),
this.footnoteBold = const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.white,
),
this.footnote = const TextStyle(
fontSize: 12,
color: Colors.white,
),
this.captionBold = const TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white,
),
});
TextTheme copyWith({ TextTheme copyWith({
TextStyle body, TextStyle body,
TextStyle title, TextStyle title,
@@ -458,16 +499,27 @@ class TextTheme {
TextStyle footnote, TextStyle footnote,
TextStyle captionBold, TextStyle captionBold,
}) { }) {
return TextTheme( return type == TextThemeType.light
body: body ?? this.body, ? TextTheme.light(
title: title ?? this.title, body: body ?? this.body,
headlineBold: headlineBold ?? this.headlineBold, title: title ?? this.title,
headline: headline ?? this.headline, headlineBold: headlineBold ?? this.headlineBold,
bodyBold: bodyBold ?? this.bodyBold, headline: headline ?? this.headline,
footnoteBold: footnoteBold ?? this.footnoteBold, bodyBold: bodyBold ?? this.bodyBold,
footnote: footnote ?? this.footnote, footnoteBold: footnoteBold ?? this.footnoteBold,
captionBold: captionBold ?? this.captionBold, footnote: footnote ?? this.footnote,
); captionBold: captionBold ?? this.captionBold,
)
: TextTheme.dark(
body: body ?? this.body,
title: title ?? this.title,
headlineBold: headlineBold ?? this.headlineBold,
headline: headline ?? this.headline,
bodyBold: bodyBold ?? this.bodyBold,
footnoteBold: footnoteBold ?? this.footnoteBold,
footnote: footnote ?? this.footnote,
captionBold: captionBold ?? this.captionBold,
);
} }
} }