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

feat: Added color themes

Browse Source
This commit is contained in:
Deven Joshi
2020-12-28 19:24:42 +05:30
parent b58d00a5f0
commit 08d2b32eff
8 changed files with 116 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/choose_user_page.dart
+5 -2
View File
@@ -171,7 +171,9 @@ class ChooseUserPage extends StatelessWidget {
.textTheme
.footnote
.copyWith(
color: Color(0xff7A7A7A),
color: StreamChatTheme.of(context)
.colorTheme
.grey,
),
),
trailing: SvgPicture.asset(
@@ -202,7 +204,8 @@ class ChooseUserPage extends StatelessWidget {
.textTheme
.footnote
.copyWith(
color: Color(0xff7A7A7A),
color:
StreamChatTheme.of(context).colorTheme.grey,
),
),
trailing: SvgPicture.asset(
lib/src/channel_bottom_sheet.dart
+1 -1
View File
@@ -73,7 +73,7 @@ class ChannelBottomSheet extends StatelessWidget {
ListTile(
leading: StreamSvgIcon.userRemove(
size: 24,
color: Color(0xff7A7A7A),
color: StreamChatTheme.of(context).colorTheme.grey,
),
title: Text(
'Leave Group',
lib/src/channel_list_view.dart
+7 -3
View File
@@ -203,7 +203,9 @@ class _ChannelListViewState extends State<ChannelListView>
padding: const EdgeInsets.all(8.0),
child: StreamSvgIcon.message(
size: 136,
color: Color(0xffDBDBDB),
color: StreamChatTheme.of(context)
.colorTheme
.greyGainsboro,
),
),
Padding(
@@ -227,7 +229,9 @@ class _ChannelListViewState extends State<ChannelListView>
.textTheme
.body
.copyWith(
color: Color(0xff7A7A7A),
color: StreamChatTheme.of(context)
.colorTheme
.grey,
),
),
),
@@ -311,7 +315,7 @@ class _ChannelListViewState extends State<ChannelListView>
Shimmer _buildLoadingItem() {
return Shimmer.fromColors(
baseColor: Color(0xffE5E5E5),
highlightColor: Color(0xffffffff),
highlightColor: StreamChatTheme.of(context).colorTheme.white,
child: ListTile(
leading: Container(
decoration: BoxDecoration(
lib/src/message_input.dart
+5 -4
View File
@@ -724,7 +724,7 @@ class MessageInputState extends State<MessageInput> {
duration: _animateContainer ? Duration(milliseconds: 300) : Duration.zero,
height: _openFilePickerSection ? _filePickerSize : 0,
child: Material(
color: Color(0xFFF2F2F2),
color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Column(
children: [
Row(
@@ -806,7 +806,8 @@ class MessageInputState extends State<MessageInput> {
width: 40.0,
height: 4.0,
decoration: BoxDecoration(
color: Color(0xFFF2F2F2),
color:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
borderRadius: BorderRadius.circular(4.0),
),
),
@@ -854,7 +855,7 @@ class MessageInputState extends State<MessageInput> {
},
child: Container(
constraints: BoxConstraints.expand(),
color: Color(0xfff2f2f2),
color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Text(
'Add more files',
style: TextStyle(
@@ -887,7 +888,7 @@ class MessageInputState extends State<MessageInput> {
PhotoManager.openSetting();
},
child: Container(
color: Color(0xFFF2F2F2),
color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
lib/src/message_list_view.dart
+3 -1
View File
@@ -342,7 +342,9 @@ class _MessageListViewState extends State<MessageListView> {
end: Alignment.bottomCenter,
colors: [
Color(0XFFF7F7F7),
Color(0XFFFCFCFC),
StreamChatTheme.of(context)
.colorTheme
.whiteSmoke,
],
),
),
lib/src/message_widget.dart
+5 -3
View File
@@ -502,6 +502,7 @@ class _MessageWidgetState extends State<MessageWidget> {
child: CustomPaint(
size: const Size(16, 32),
painter: _ThreadReplyPainter(
context: context,
color: widget.messageTheme.replyThreadColor,
),
),
@@ -916,7 +917,7 @@ class _MessageWidgetState extends State<MessageWidget> {
if (widget.message.attachments
?.any((element) => element.ogScrapeUrl != null) ==
true) {
return Color(0xFFE9F2FF);
return StreamChatTheme.of(context).colorTheme.blueAlice;
}
if (isOnlyEmoji) {
@@ -997,13 +998,14 @@ class _MessageWidgetState extends State<MessageWidget> {
class _ThreadReplyPainter extends CustomPainter {
final Color color;
final BuildContext context;
const _ThreadReplyPainter({@required this.color});
const _ThreadReplyPainter({this.context, @required this.color});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color ?? Color(0XFFDBDBDB)
..color = color ?? StreamChatTheme.of(context).colorTheme.greyGainsboro
..style = PaintingStyle.stroke
..strokeWidth = 1
..strokeCap = StrokeCap.round;
lib/src/stream_chat_theme.dart
+89
View File
@@ -45,6 +45,9 @@ class StreamChatThemeData {
/// The text themes used in the widgets
final TextTheme textTheme;
/// The text themes used in the widgets
final ColorTheme colorTheme;
/// Primary color of the chat widgets
final Color primaryColor;
@@ -84,6 +87,7 @@ class StreamChatThemeData {
/// Create a theme from scratch
StreamChatThemeData({
this.textTheme,
this.colorTheme,
this.primaryColor,
this.secondaryColor,
this.accentColor,
@@ -136,6 +140,7 @@ class StreamChatThemeData {
/// Creates a copy of [StreamChatThemeData] with specified attributes overridden.
StreamChatThemeData copyWith({
TextTheme textTheme,
ColorTheme colorTheme,
Color primaryColor,
Color secondaryColor,
Color accentColor,
@@ -160,6 +165,16 @@ class StreamChatThemeData {
headline: textTheme?.headline,
headlineBold: textTheme?.headlineBold,
),
colorTheme: this.colorTheme?.copyWith(
black: colorTheme?.black,
grey: colorTheme?.grey,
greyGainsboro: colorTheme?.greyGainsboro,
greyWhisper: colorTheme?.greyWhisper,
whiteSmoke: colorTheme?.whiteSmoke,
whiteSnow: colorTheme?.whiteSnow,
white: colorTheme?.white,
blueAlice: colorTheme?.blueAlice,
),
primaryColor: primaryColor ?? this.primaryColor,
secondaryColor: secondaryColor ?? this.secondaryColor,
primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme,
@@ -233,8 +248,10 @@ class StreamChatThemeData {
final accentColor = Color(0xff006cff);
final isDark = theme.brightness == Brightness.dark;
final textTheme = TextTheme();
final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light();
return StreamChatThemeData(
textTheme: textTheme,
colorTheme: colorTheme,
secondaryColor: Color(0xffEAEAEA),
accentColor: accentColor,
primaryColor: isDark ? Colors.black : Colors.white,
@@ -454,6 +471,78 @@ class TextTheme {
}
}
enum ColorThemeType {
light,
dark,
}
class ColorTheme {
final Color black;
final Color grey;
final Color greyGainsboro;
final Color greyWhisper;
final Color whiteSmoke;
final Color whiteSnow;
final Color white;
final Color blueAlice;
ColorTheme.light({
this.black = const Color(0xff000000),
this.grey = const Color(0xff7a7a7a),
this.greyGainsboro = const Color(0xffdbdbdb),
this.greyWhisper = const Color(0xffecebeb),
this.whiteSmoke = const Color(0xfff2f2f2),
this.whiteSnow = const Color(0xfffcfcfc),
this.white = const Color(0xffffffff),
this.blueAlice = const Color(0xffe9f2ff),
});
ColorTheme.dark({
this.black = const Color(0xffffffff),
this.grey = const Color(0xff7a7a7a),
this.greyGainsboro = const Color(0xff2d2f2f),
this.greyWhisper = const Color(0xff1c1e22),
this.whiteSmoke = const Color(0xff13151b),
this.whiteSnow = const Color(0xff070A0D),
this.white = const Color(0xff101418),
this.blueAlice = const Color(0xff00193D),
});
ColorTheme copyWith({
ColorThemeType type = ColorThemeType.light,
Color black,
Color grey,
Color greyGainsboro,
Color greyWhisper,
Color whiteSmoke,
Color whiteSnow,
Color white,
Color blueAlice,
}) {
return type == ColorThemeType.light
? ColorTheme.light(
black: black ?? this.black,
grey: grey ?? this.grey,
greyGainsboro: greyGainsboro ?? this.greyGainsboro,
greyWhisper: greyWhisper ?? this.greyWhisper,
whiteSmoke: whiteSmoke ?? this.whiteSmoke,
whiteSnow: whiteSnow ?? this.whiteSnow,
white: white ?? this.white,
blueAlice: blueAlice ?? this.blueAlice,
)
: ColorTheme.dark(
black: black ?? this.black,
grey: grey ?? this.grey,
greyGainsboro: greyGainsboro ?? this.greyGainsboro,
greyWhisper: greyWhisper ?? this.greyWhisper,
whiteSmoke: whiteSmoke ?? this.whiteSmoke,
whiteSnow: whiteSnow ?? this.whiteSnow,
white: white ?? this.white,
blueAlice: blueAlice ?? this.blueAlice,
);
}
}
/// Channel theme data
class ChannelTheme {
/// Theme of the [ChannelHeader] widget
lib/src/url_attachment.dart
+1 -1
View File
@@ -63,7 +63,7 @@ class UrlAttachment extends StatelessWidget {
borderRadius: BorderRadius.only(
topRight: Radius.circular(16.0),
),
color: Color(0xFFE9F2FF),
color: StreamChatTheme.of(context).colorTheme.blueAlice,
),
),
),