add streamchattheme.fromtheme

2020-02-28 11:01:11 +01:00
parent 15c13a7dc9
commit a6d659f932
12 changed files with 452 additions and 273 deletions
@@ -96,7 +96,7 @@ class _ChannelListViewState extends State<ChannelListView> {
    if (i < channels.length) {
      final channel = channels[i];

-      final channelClient = streamChat.client.channelClients[channel.id];
+      final channelClient = streamChat.client.channels[channel.id];

      ChannelTapCallback onTap;
      if (widget.onChannelTap != null) {
@@ -25,72 +25,74 @@ class _MessageInputState extends State<MessageInput> {

  @override
  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(8.0),
-      child: Container(
-        width: MediaQuery.of(context).size.width,
-        padding: EdgeInsets.all(2),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(10.0),
-          gradient: _typingStarted
-              ? StreamChatTheme.of(context).channelTheme.inputGradient
-              : null,
-        ),
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
        child: Container(
+          width: MediaQuery.of(context).size.width,
+          padding: EdgeInsets.all(2),
          decoration: BoxDecoration(
-            color: Colors.white,
            borderRadius: BorderRadius.circular(10.0),
+            gradient: _typingStarted
+                ? StreamChatTheme.of(context).channelTheme.inputGradient
+                : null,
          ),
          child: Container(
            decoration: BoxDecoration(
-              color: StreamChatTheme.of(context).channelTheme.inputBackground,
+              color: Colors.white,
              borderRadius: BorderRadius.circular(10.0),
-              border: Border.all(
-                  color: _typingStarted
-                      ? Colors.transparent
-                      : Colors.black.withOpacity(.2)),
            ),
-            child: Flex(
-              direction: Axis.horizontal,
-              children: <Widget>[
-                Expanded(
-                  child: TextField(
-                    minLines: null,
-                    maxLines: null,
-                    onSubmitted: (_) {
-                      _sendMessage(context);
-                    },
-                    controller: _textController,
-                    onChanged: (s) {
-                      StreamChannel.of(context).channel.keyStroke();
-                      setState(() {
-                        _messageIsPresent = s.trim().isNotEmpty;
-                      });
-                    },
-                    onTap: () {
-                      setState(() {
-                        _typingStarted = true;
-                      });
-                    },
-                    style: Theme.of(context).textTheme.body1,
-                    autofocus: false,
-                    decoration: InputDecoration(
-                      hintText: 'Write a message',
-                      prefixText: '   ',
-                      border: InputBorder.none,
+            child: Container(
+              decoration: BoxDecoration(
+                color: StreamChatTheme.of(context).channelTheme.inputBackground,
+                borderRadius: BorderRadius.circular(10.0),
+                border: Border.all(
+                    color: _typingStarted
+                        ? Colors.transparent
+                        : Colors.black.withOpacity(.2)),
+              ),
+              child: Flex(
+                direction: Axis.horizontal,
+                children: <Widget>[
+                  Expanded(
+                    child: TextField(
+                      minLines: null,
+                      maxLines: null,
+                      onSubmitted: (_) {
+                        _sendMessage(context);
+                      },
+                      controller: _textController,
+                      onChanged: (s) {
+                        StreamChannel.of(context).channel.keyStroke();
+                        setState(() {
+                          _messageIsPresent = s.trim().isNotEmpty;
+                        });
+                      },
+                      onTap: () {
+                        setState(() {
+                          _typingStarted = true;
+                        });
+                      },
+                      style: Theme.of(context).textTheme.body1,
+                      autofocus: false,
+                      decoration: InputDecoration(
+                        hintText: 'Write a message',
+                        prefixText: '   ',
+                        border: InputBorder.none,
+                      ),
                    ),
                  ),
-                ),
-                AnimatedCrossFade(
-                  crossFadeState: _messageIsPresent
-                      ? CrossFadeState.showFirst
-                      : CrossFadeState.showSecond,
-                  firstChild: _buildSendButton(context),
-                  secondChild: SizedBox(),
-                  duration: Duration(milliseconds: 300),
-                  alignment: Alignment.center,
-                ),
-              ],
+                  AnimatedCrossFade(
+                    crossFadeState: _messageIsPresent
+                        ? CrossFadeState.showFirst
+                        : CrossFadeState.showSecond,
+                    firstChild: _buildSendButton(context),
+                    secondChild: SizedBox(),
+                    duration: Duration(milliseconds: 300),
+                    alignment: Alignment.center,
+                  ),
+                ],
+              ),
            ),
          ),
        ),
@@ -218,7 +218,7 @@ class _MessageListViewState extends State<MessageListView> {
  }

  Widget _buildBottomMessage(
-    StreamChannelState channelBloc,
+    StreamChannelState channel,
    Message previousMessage,
    Message message,
    BuildContext context,
@@ -244,8 +244,8 @@ class _MessageListViewState extends State<MessageListView> {
      onVisibilityChanged: (visibility) {
        _isBottom = visibility.visibleBounds != Rect.zero;
        if (_isBottom) {
-          if (channelBloc.channel.state.unreadCount > 0) {
-            channelBloc.channel.markRead();
+          if (channel.channel.state.unreadCount > 0) {
+            channel.channel.markRead();
          }
        }
      },
@@ -133,8 +133,7 @@ class _MessageWidgetState extends State<MessageWidget>
    var row = [
      Text(
        'Replies: ${widget.message.replyCount}',
-        style:
-            Theme.of(context).textTheme.subtitle.copyWith(color: Colors.blue),
+        style: StreamChatTheme.of(context).messageTheme.replies,
      ),
      Transform(
        transform: Matrix4.rotationY(isMyMessage ? 0 : pi),
@@ -360,88 +359,90 @@ class _MessageWidgetState extends State<MessageWidget>
          final textStyle = TextStyle(
            fontSize: fontSize,
          );
-          return Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: <Widget>[
-              Container(
-                color: Colors.black87,
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  mainAxisSize: MainAxisSize.min,
-                  children: reactionToEmoji.keys.map((reactionType) {
-                    final ownReactionIndex = widget.message.ownReactions
-                        .indexWhere(
-                            (reaction) => reaction.type == reactionType);
-                    return Column(
-                      mainAxisSize: MainAxisSize.min,
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: <Widget>[
-                        IconButton(
-                          iconSize: fontSize + 10,
-                          icon: Text(
-                            reactionToEmoji[reactionType],
-                            style: textStyle,
+          return SafeArea(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: <Widget>[
+                Container(
+                  color: Colors.black87,
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    mainAxisSize: MainAxisSize.min,
+                    children: reactionToEmoji.keys.map((reactionType) {
+                      final ownReactionIndex = widget.message.ownReactions
+                          .indexWhere(
+                              (reaction) => reaction.type == reactionType);
+                      return Column(
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        children: <Widget>[
+                          IconButton(
+                            iconSize: fontSize + 10,
+                            icon: Text(
+                              reactionToEmoji[reactionType],
+                              style: textStyle,
+                            ),
+                            onPressed: () {
+                              if (ownReactionIndex != -1) {
+                                removeReaction(reactionType);
+                              } else {
+                                sendReaction(reactionType);
+                              }
+                            },
                          ),
-                          onPressed: () {
-                            if (ownReactionIndex != -1) {
-                              removeReaction(reactionType);
-                            } else {
-                              sendReaction(reactionType);
-                            }
-                          },
-                        ),
-                        ownReactionIndex != -1
-                            ? Padding(
-                                padding: const EdgeInsets.only(bottom: 4.0),
-                                child: Text(
-                                  widget.message.ownReactions[ownReactionIndex]
-                                      .score
-                                      .toString(),
-                                  style: TextStyle(color: Colors.white),
-                                ),
-                              )
-                            : SizedBox(),
-                      ],
-                    );
-                  }).toList(),
-                ),
-              ),
-              isMyMessage
-                  ? FlatButton(
-                      child: Padding(
-                        padding: const EdgeInsets.all(28.0),
-                        child: Text(
-                          'Delete message',
-                          style: Theme.of(context)
-                              .textTheme
-                              .headline
-                              .copyWith(color: Colors.red),
-                        ),
-                      ),
-                      onPressed: () {
-                        StreamChat.of(context)
-                            .client
-                            .deleteMessage(widget.message.id);
-                        Navigator.pop(context);
-                      },
-                    )
-                  : SizedBox(),
-              FlatButton(
-                child: Padding(
-                  padding: const EdgeInsets.all(28.0),
-                  child: Text(
-                    'Start a thread',
-                    style: Theme.of(context).textTheme.headline,
+                          ownReactionIndex != -1
+                              ? Padding(
+                                  padding: const EdgeInsets.only(bottom: 4.0),
+                                  child: Text(
+                                    widget.message
+                                        .ownReactions[ownReactionIndex].score
+                                        .toString(),
+                                    style: TextStyle(color: Colors.white),
+                                  ),
+                                )
+                              : SizedBox(),
+                        ],
+                      );
+                    }).toList(),
                  ),
                ),
-                onPressed: () {
-                  Navigator.pop(context);
-                  widget.onThreadTap(widget.message);
-                },
-              ),
-            ],
+                isMyMessage
+                    ? FlatButton(
+                        child: Padding(
+                          padding: const EdgeInsets.all(28.0),
+                          child: Text(
+                            'Delete message',
+                            style: Theme.of(context)
+                                .textTheme
+                                .headline
+                                .copyWith(color: Colors.red),
+                          ),
+                        ),
+                        onPressed: () {
+                          StreamChat.of(context)
+                              .client
+                              .deleteMessage(widget.message.id);
+                          Navigator.pop(context);
+                        },
+                      )
+                    : SizedBox(),
+                FlatButton(
+                  child: Padding(
+                    padding: const EdgeInsets.all(28.0),
+                    child: Text(
+                      'Start a thread',
+                      style: Theme.of(context).textTheme.headline,
+                    ),
+                  ),
+                  onPressed: () {
+                    Navigator.pop(context);
+                    widget.onThreadTap(widget.message);
+                  },
+                ),
+              ],
+            ),
          );
        });
  }
@@ -491,7 +492,7 @@ class _MessageWidgetState extends State<MessageWidget>
  }

  final Map<String, String> reactionToEmoji = {
-    'love': '♥️',
+    'love': '❤️️',
    'haha': '😂',
    'like': '👍',
    'sad': '😕',
@@ -44,15 +44,15 @@ class StreamChatState extends State<StreamChat> {

  @override
  Widget build(BuildContext context) {
-    final theme = _computeTheme(context);
+    final theme = _getTheme(context, widget.streamChatThemeData);
    return StreamChatTheme(
      data: theme,
      child: Builder(
        builder: (context) => Theme(
          data: Theme.of(context).copyWith(
            accentColor: StreamChatTheme.of(context).accentColor,
-            scaffoldBackgroundColor: theme.primaryColor,
-            backgroundColor: theme.primaryColor,
+            scaffoldBackgroundColor: Colors.white,
+            backgroundColor: Colors.white,
          ),
          child: WillPopScope(
            onWillPop: () async {
@@ -79,146 +79,66 @@ class StreamChatState extends State<StreamChat> {
    );
  }

-  StreamChatThemeData _computeTheme(BuildContext context) {
-    final defaultTheme = _getDefaultTheme(context);
+  StreamChatThemeData _getTheme(
+    BuildContext context,
+    StreamChatThemeData themeData,
+  ) {
+    final defaultTheme = StreamChatThemeData.getDefaultTheme(Theme.of(context));
    final theme = defaultTheme.copyWith(
-      primaryColor: widget.streamChatThemeData?.primaryColor,
+      primaryColor: themeData?.primaryColor,
      channelTheme: defaultTheme.channelTheme.copyWith(
-        channelHeaderTheme: defaultTheme.channelTheme.channelHeaderTheme
-            .copyWith(
-                color: widget.streamChatThemeData?.channelTheme
-                    ?.channelHeaderTheme?.color,
-                lastMessageAt: widget.streamChatThemeData?.channelTheme
-                    ?.channelHeaderTheme?.lastMessageAt,
-                title: widget.streamChatThemeData?.channelTheme
-                    ?.channelHeaderTheme?.title,
-                avatarTheme:
-                    defaultTheme.channelPreviewTheme.avatarTheme.copyWith(
-                  constraints: widget.streamChatThemeData?.channelTheme
-                      ?.channelHeaderTheme?.avatarTheme?.constraints,
-                  borderRadius: widget.streamChatThemeData?.channelTheme
-                      ?.channelHeaderTheme?.avatarTheme?.borderRadius,
-                )),
-        inputBackground:
-            widget.streamChatThemeData?.channelTheme?.inputBackground,
-        messageInputButtonIconTheme: widget
-            .streamChatThemeData?.channelTheme?.messageInputButtonIconTheme,
-        inputGradient: widget.streamChatThemeData?.channelTheme?.inputGradient,
+        channelHeaderTheme:
+            defaultTheme.channelTheme.channelHeaderTheme.copyWith(
+          color: themeData?.channelTheme?.channelHeaderTheme?.color,
+          lastMessageAt:
+              themeData?.channelTheme?.channelHeaderTheme?.lastMessageAt,
+          title: themeData?.channelTheme?.channelHeaderTheme?.title,
+          avatarTheme: defaultTheme.channelPreviewTheme.avatarTheme.copyWith(
+            constraints: themeData
+                ?.channelTheme?.channelHeaderTheme?.avatarTheme?.constraints,
+            borderRadius: themeData
+                ?.channelTheme?.channelHeaderTheme?.avatarTheme?.borderRadius,
+          ),
+        ),
+        inputBackground: themeData?.channelTheme?.inputBackground,
+        messageInputButtonIconTheme:
+            themeData?.channelTheme?.messageInputButtonIconTheme,
+        inputGradient: themeData?.channelTheme?.inputGradient,
        messageInputButtonTheme:
-            widget.streamChatThemeData?.channelTheme?.messageInputButtonTheme,
+            themeData?.channelTheme?.messageInputButtonTheme,
      ),
      messageTheme: defaultTheme.messageTheme.copyWith(
-        createdAt: widget.streamChatThemeData?.messageTheme?.createdAt,
-        messageText: widget.streamChatThemeData?.messageTheme?.messageText,
-        otherMessageBackgroundColor: widget
-            .streamChatThemeData?.messageTheme?.otherMessageBackgroundColor,
+        replies: themeData?.messageTheme?.replies,
+        createdAt: themeData?.messageTheme?.createdAt,
+        messageText: themeData?.messageTheme?.messageText,
+        otherMessageBackgroundColor:
+            themeData?.messageTheme?.otherMessageBackgroundColor,
        ownMessageBackgroundColor:
-            widget.streamChatThemeData?.messageTheme?.ownMessageBackgroundColor,
-        fontFamily: widget.streamChatThemeData?.messageTheme?.fontFamily,
-        messageAuthor: widget.streamChatThemeData?.messageTheme?.messageAuthor,
-        messageMention:
-            widget.streamChatThemeData?.messageTheme?.messageMention,
+            themeData?.messageTheme?.ownMessageBackgroundColor,
+        fontFamily: themeData?.messageTheme?.fontFamily,
+        messageAuthor: themeData?.messageTheme?.messageAuthor,
+        messageMention: themeData?.messageTheme?.messageMention,
        avatarTheme: defaultTheme.messageTheme.avatarTheme.copyWith(
-          constraints: widget
-              .streamChatThemeData?.messageTheme?.avatarTheme?.constraints,
-          borderRadius: widget
-              .streamChatThemeData?.messageTheme?.avatarTheme?.borderRadius,
+          constraints: themeData?.messageTheme?.avatarTheme?.constraints,
+          borderRadius: themeData?.messageTheme?.avatarTheme?.borderRadius,
        ),
      ),
-      accentColor: widget.streamChatThemeData?.accentColor,
-      secondaryColor: widget.streamChatThemeData?.secondaryColor,
+      accentColor: themeData?.accentColor,
+      secondaryColor: themeData?.secondaryColor,
      channelPreviewTheme: defaultTheme.channelPreviewTheme.copyWith(
        avatarTheme: defaultTheme.channelPreviewTheme.avatarTheme.copyWith(
-          constraints: widget.streamChatThemeData?.channelPreviewTheme
-              ?.avatarTheme?.constraints,
-          borderRadius: widget.streamChatThemeData?.channelPreviewTheme
-              ?.avatarTheme?.borderRadius,
+          constraints: themeData?.channelPreviewTheme?.avatarTheme?.constraints,
+          borderRadius:
+              themeData?.channelPreviewTheme?.avatarTheme?.borderRadius,
        ),
-        title: widget.streamChatThemeData?.channelPreviewTheme?.title,
-        lastMessageAt:
-            widget.streamChatThemeData?.channelPreviewTheme?.lastMessageAt,
-        subtitle: widget.streamChatThemeData?.channelPreviewTheme?.subtitle,
+        title: themeData?.channelPreviewTheme?.title,
+        lastMessageAt: themeData?.channelPreviewTheme?.lastMessageAt,
+        subtitle: themeData?.channelPreviewTheme?.subtitle,
      ),
    );
    return theme;
  }

-  StreamChatThemeData _getDefaultTheme(BuildContext context) {
-    final accentColor = Color(0xff006cff);
-    return StreamChatThemeData(
-      accentColor: accentColor,
-      primaryColor: Colors.white,
-      channelPreviewTheme: ChannelPreviewTheme(
-        avatarTheme: AvatarTheme(
-          borderRadius: BorderRadius.circular(20),
-          constraints: BoxConstraints.tightFor(
-            height: 40,
-            width: 40,
-          ),
-        ),
-        title: TextStyle(
-          fontSize: 14,
-          color: Colors.black,
-        ),
-        subtitle: TextStyle(
-          fontSize: 13,
-          color: Colors.black,
-        ),
-        lastMessageAt: TextStyle(
-          fontSize: 11,
-          color: Colors.black.withOpacity(.5),
-        ),
-      ),
-      channelTheme: ChannelTheme(
-        messageInputButtonIconTheme: Theme.of(context).iconTheme.copyWith(
-              color: accentColor,
-            ),
-        channelHeaderTheme: ChannelHeaderTheme(
-          avatarTheme: AvatarTheme(
-            borderRadius: BorderRadius.circular(20),
-            constraints: BoxConstraints.tightFor(
-              height: 40,
-              width: 40,
-            ),
-          ),
-          color: Colors.white,
-          title: TextStyle(
-            fontSize: 14,
-            color: Colors.black,
-          ),
-          lastMessageAt: TextStyle(
-            fontSize: 11,
-            color: Colors.black.withOpacity(.5),
-          ),
-        ),
-        inputBackground: Colors.black.withAlpha(12),
-        inputGradient: LinearGradient(colors: [
-          Color(0xFF00AEFF),
-          Color(0xFF0076FF),
-        ]),
-      ),
-      messageTheme: MessageTheme(
-        messageText: TextStyle(
-          fontSize: 15,
-          color: Colors.black,
-        ),
-        createdAt: TextStyle(
-          color: Colors.black.withOpacity(.5),
-          fontSize: 11,
-        ),
-        ownMessageBackgroundColor: Color(0xffebebeb),
-        otherMessageBackgroundColor: Colors.white,
-        avatarTheme: AvatarTheme(
-          borderRadius: BorderRadius.circular(20),
-          constraints: BoxConstraints.tightFor(
-            height: 32,
-            width: 32,
-          ),
-        ),
-      ),
-    );
-  }
-
  @override
  void initState() {
    super.initState();
@@ -40,10 +40,23 @@ class StreamChatThemeData {
  });

  factory StreamChatThemeData.fromTheme(ThemeData theme) {
+    final defaultTheme = getDefaultTheme(theme);
+
    return StreamChatThemeData(
      accentColor: theme.accentColor,
      primaryColor: theme.colorScheme.primary,
      secondaryColor: theme.colorScheme.secondary,
+      channelTheme: ChannelTheme(
+        inputGradient: LinearGradient(colors: [
+          theme.accentColor.withOpacity(.5),
+          theme.accentColor,
+        ]),
+      ),
+      messageTheme: MessageTheme(
+        replies: defaultTheme.messageTheme.replies.copyWith(
+          color: theme.accentColor,
+        ),
+      ),
    );
  }

@@ -63,6 +76,87 @@ class StreamChatThemeData {
        channelTheme: channelTheme ?? this.channelTheme,
        messageTheme: messageTheme ?? this.messageTheme,
      );
+
+  static StreamChatThemeData getDefaultTheme(ThemeData theme) {
+    final accentColor = Color(0xff006cff);
+    return StreamChatThemeData(
+      accentColor: accentColor,
+      primaryColor: Colors.white,
+      channelPreviewTheme: ChannelPreviewTheme(
+        avatarTheme: AvatarTheme(
+          borderRadius: BorderRadius.circular(20),
+          constraints: BoxConstraints.tightFor(
+            height: 40,
+            width: 40,
+          ),
+        ),
+        title: TextStyle(
+          fontSize: 14,
+          color: Colors.black,
+        ),
+        subtitle: TextStyle(
+          fontSize: 13,
+          color: Colors.black,
+        ),
+        lastMessageAt: TextStyle(
+          fontSize: 11,
+          color: Colors.black.withOpacity(.5),
+        ),
+      ),
+      channelTheme: ChannelTheme(
+        messageInputButtonIconTheme: theme.iconTheme.copyWith(
+          color: accentColor,
+        ),
+        channelHeaderTheme: ChannelHeaderTheme(
+          avatarTheme: AvatarTheme(
+            borderRadius: BorderRadius.circular(20),
+            constraints: BoxConstraints.tightFor(
+              height: 40,
+              width: 40,
+            ),
+          ),
+          color: Colors.white,
+          title: TextStyle(
+            fontSize: 14,
+            color: Colors.black,
+          ),
+          lastMessageAt: TextStyle(
+            fontSize: 11,
+            color: Colors.black.withOpacity(.5),
+          ),
+        ),
+        inputBackground: Colors.black.withAlpha(12),
+        inputGradient: LinearGradient(colors: [
+          Color(0xFF00AEFF),
+          Color(0xFF0076FF),
+        ]),
+      ),
+      messageTheme: MessageTheme(
+        messageText: TextStyle(
+          fontSize: 15,
+          color: Colors.black,
+        ),
+        createdAt: TextStyle(
+          color: Colors.black.withOpacity(.5),
+          fontSize: 11,
+        ),
+        replies: TextStyle(
+          color: accentColor,
+          fontWeight: FontWeight.bold,
+          fontSize: 12,
+        ),
+        ownMessageBackgroundColor: Color(0xffebebeb),
+        otherMessageBackgroundColor: Colors.white,
+        avatarTheme: AvatarTheme(
+          borderRadius: BorderRadius.circular(20),
+          constraints: BoxConstraints.tightFor(
+            height: 32,
+            width: 32,
+          ),
+        ),
+      ),
+    );
+  }
 }

 class ChannelTheme {
@@ -122,12 +216,14 @@ class MessageTheme {
  final TextStyle messageAuthor;
  final TextStyle messageMention;
  final TextStyle createdAt;
+  final TextStyle replies;
  final String fontFamily;
  final Color ownMessageBackgroundColor;
  final Color otherMessageBackgroundColor;
  final AvatarTheme avatarTheme;

  const MessageTheme({
+    this.replies,
    this.messageText,
    this.messageAuthor,
    this.messageMention,
@@ -143,6 +239,7 @@ class MessageTheme {
    TextStyle messageAuthor,
    TextStyle messageMention,
    TextStyle createdAt,
+    TextStyle replies,
    String fontFamily,
    Color ownMessageBackgroundColor,
    Color otherMessageBackgroundColor,
@@ -159,6 +256,7 @@ class MessageTheme {
        otherMessageBackgroundColor:
            otherMessageBackgroundColor ?? this.otherMessageBackgroundColor,
        avatarTheme: avatarTheme ?? this.avatarTheme,
+        replies: replies ?? this.replies,
      );
 }