wip

example/lib/advanced_options_page.dart

@@ -39,11 +39,13 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
         backgroundColor: StreamChatTheme.of(context).primaryColor,
         elevation: 1,
         centerTitle: true,
+        brightness: Theme.of(context).brightness,
         title: Text(
           'Advanced Options',
-          style: Theme.of(context).textTheme.subtitle1.copyWith(
+          style: StreamChatTheme.of(context)
-                fontWeight: FontWeight.bold,
+              .textTheme
-              ),
+              .headlineBold
+              .copyWith(color: Colors.black),
         ),
         leading: IconButton(
           icon: StreamSvgIcon.left(

example/lib/chips_input_text_field.dart

@@ -78,10 +78,10 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                     padding: const EdgeInsets.symmetric(vertical: 4.0),
                     child: Text(
                       'TO:',
-                      style: TextStyle(
+                      style: StreamChatTheme.of(context)
-                        fontSize: 12,
+                          .textTheme
-                        color: Colors.black.withOpacity(0.5),
+                          .footnote
-                      ),
+                          .copyWith(color: Colors.black.withOpacity(.5)),
                     ),
                   ),
                   SizedBox(width: 12),
@@ -111,10 +111,11 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                               disabledBorder: InputBorder.none,
                               contentPadding: const EdgeInsets.only(top: 4.0),
                               hintText: widget.hint,
-                              hintStyle: TextStyle(
+                              hintStyle: StreamChatTheme.of(context)
-                                color: Colors.black.withOpacity(0.5),
+                                  .textTheme
-                                fontSize: 14,
+                                  .body
-                              ),
+                                  .copyWith(
+                                      color: Colors.black.withOpacity(.5)),
                             ),
                           ),
                       ],

example/lib/choose_user_page.dart

@@ -80,19 +80,12 @@ class ChooseUserPage extends StatelessWidget {
               padding: const EdgeInsets.only(bottom: 13.0),
               child: Text(
                 'Welcome to Stream Chat',
-                style: TextStyle(
+                style: StreamChatTheme.of(context).textTheme.title,
-                  fontSize: 22,
-                  color: Colors.black,
-                  fontWeight: FontWeight.bold,
-                ),
               ),
             ),
             Text(
               'Select a user to try the Flutter SDK:',
-              style: TextStyle(
+              style: StreamChatTheme.of(context).textTheme.body,
-                fontSize: 14.5,
-                color: Colors.black,
-              ),
             ),
             Expanded(
               child: Padding(
@@ -169,9 +162,18 @@ class ChooseUserPage extends StatelessWidget {
                           ),
                           title: Text(
                             user.name,
-                            style: TextStyle(fontWeight: FontWeight.bold),
+                            style:
+                                StreamChatTheme.of(context).textTheme.bodyBold,
+                          ),
+                          subtitle: Text(
+                            'Stream test account',
+                            style: StreamChatTheme.of(context)
+                                .textTheme
+                                .footnote
+                                .copyWith(
+                                  color: Color(0xff7A7A7A),
+                                ),
                           ),
-                          subtitle: Text('Stream test account'),
                           trailing: SvgPicture.asset(
                             'assets/icon_arrow_right.svg',
                             height: 24,
@@ -192,9 +194,17 @@ class ChooseUserPage extends StatelessWidget {
                         ),
                         title: Text(
                           'Advanced Options',
-                          style: TextStyle(fontWeight: FontWeight.bold),
+                          style: StreamChatTheme.of(context).textTheme.bodyBold,
+                        ),
+                        subtitle: Text(
+                          'Custom settings',
+                          style: StreamChatTheme.of(context)
+                              .textTheme
+                              .footnote
+                              .copyWith(
+                                color: Color(0xff7A7A7A),
+                              ),
                         ),
-                        subtitle: Text('Custom settings'),
                         trailing: SvgPicture.asset(
                           'assets/icon_arrow_right.svg',
                           height: 24,

example/lib/main.dart

@@ -123,6 +123,9 @@ class _HomePageState extends State<HomePage> {
       bottomNavigationBar: BottomNavigationBar(
         currentIndex: _currentIndex,
         items: _navBarItems,
+        selectedLabelStyle: StreamChatTheme.of(context).textTheme.footnoteBold,
+        unselectedLabelStyle:
+            StreamChatTheme.of(context).textTheme.footnoteBold,
         type: BottomNavigationBarType.fixed,
         selectedItemColor: Colors.black,
         unselectedItemColor: Colors.grey,

example/lib/new_chat_screen.dart

@@ -113,10 +113,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
         leading: const StreamBackButton(),
         title: Text(
           'New Chat',
-          style: TextStyle(
+          style: StreamChatTheme.of(context)
-            color: Colors.black,
+              .textTheme
-            fontSize: 16,
+              .headlineBold
-          ),
+              .copyWith(color: Colors.black),
         ),
         centerTitle: true,
       ),
@@ -203,10 +203,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                         SizedBox(width: 8),
                         Text(
                           'Create a Group',
-                          style: TextStyle(
+                          style: StreamChatTheme.of(context).textTheme.bodyBold,
-                            fontWeight: FontWeight.bold,
-                            fontSize: 16,
-                          ),
                         ),
                       ],
                     ),
@@ -233,13 +230,13 @@ class _NewChatScreenState extends State<NewChatScreen> {
                     horizontal: 8,
                   ),
                   child: Text(
-                    _isSearchActive
+                      _isSearchActive
-                        ? "Matches for \"$_userNameQuery\""
+                          ? "Matches for \"$_userNameQuery\""
-                        : 'On the platform',
+                          : 'On the platform',
-                    style: TextStyle(
+                      style: StreamChatTheme.of(context)
-                      color: Colors.black.withOpacity(0.5),
+                          .textTheme
-                    ),
+                          .footnote
-                  ),
+                          .copyWith(color: Colors.black.withOpacity(.5))),
                 ),
               ),
             Expanded(
@@ -299,7 +296,14 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                             ),
                                           ),
                                           Text(
-                                              'No user matches these keywords...'),
+                                            'No user matches these keywords...',
+                                            style: StreamChatTheme.of(context)
+                                                .textTheme
+                                                .footnote
+                                                .copyWith(
+                                                    color: Colors.black
+                                                        .withOpacity(.5)),
+                                          ),
                                         ],
                                       ),
                                     ),

example/lib/new_group_chat_screen.dart

@@ -261,7 +261,14 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                     color: Colors.grey,
                                   ),
                                 ),
-                                Text('No user matches these keywords...'),
+                                Text(
+                                  'No user matches these keywords...',
+                                  style: StreamChatTheme.of(context)
+                                      .textTheme
+                                      .footnote
+                                      .copyWith(
+                                          color: Colors.black.withOpacity(.5)),
+                                ),
                               ],
                             ),
                           ),

example/lib/search_text_field.dart

@@ -40,6 +40,7 @@ class SearchTextField extends StatelessWidget {
               controller: controller,
               onChanged: onChanged,
               decoration: InputDecoration(
+                prefixText: '    ',
                 prefixIconConstraints: BoxConstraints.tight(Size(40, 24)),
                 prefixIcon: Padding(
                   padding: const EdgeInsets.only(
@@ -52,10 +53,10 @@ class SearchTextField extends StatelessWidget {
                   ),
                 ),
                 hintText: hintText,
-                hintStyle: TextStyle(
+                hintStyle: StreamChatTheme.of(context)
-                  color: Colors.black.withOpacity(0.5),
+                    .textTheme
-                  fontSize: 14,
+                    .body
-                ),
+                    .copyWith(color: Colors.black.withOpacity(.5)),
                 contentPadding: const EdgeInsets.all(0),
                 border: OutlineInputBorder(
                   borderSide: BorderSide.none,

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.87+89
+version: 1.0.88+90
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/channel_list_header.dart

@@ -144,13 +144,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
 
   Widget _buildConnectedTitleState(BuildContext context) => Text(
         'Stream Chat',
-        style: StreamChatTheme.of(context)
+        style: StreamChatTheme.of(context).textTheme.headlineBold.copyWith(
-            .channelTheme
+              color: Colors.black,
-            .channelHeaderTheme
-            .title
-            .copyWith(
-              fontSize: 16,
-              fontWeight: FontWeight.bold,
             ),
       );
 

lib/src/channel_list_view.dart

@@ -210,9 +210,9 @@ class _ChannelListViewState extends State<ChannelListView>
                               padding: const EdgeInsets.all(8.0),
                               child: Text(
                                 'Let’s start chatting!',
-                                style: TextStyle(
+                                style: StreamChatTheme.of(context)
-                                  fontSize: 16,
+                                    .textTheme
-                                ),
+                                    .headline,
                               ),
                             ),
                             Padding(
@@ -223,10 +223,12 @@ class _ChannelListViewState extends State<ChannelListView>
                               child: Text(
                                 'How about sending your first message to a friend?',
                                 textAlign: TextAlign.center,
-                                style: TextStyle(
+                                style: StreamChatTheme.of(context)
-                                  fontSize: 14,
+                                    .textTheme
-                                  color: Color(0xff7A7A7A),
+                                    .body
-                                ),
+                                    .copyWith(
+                                      color: Color(0xff7A7A7A),
+                                    ),
                               ),
                             ),
                           ],
@@ -242,11 +244,13 @@ class _ChannelListViewState extends State<ChannelListView>
                               onPressed: widget.onStartChatPressed,
                               child: Text(
                                 'Start a chat',
-                                style: TextStyle(
+                                style: StreamChatTheme.of(context)
-                                  color:
+                                    .textTheme
-                                      StreamChatTheme.of(context).accentColor,
+                                    .bodyBold
-                                  fontWeight: FontWeight.bold,
+                                    .copyWith(
-                                ),
+                                      color: StreamChatTheme.of(context)
+                                          .accentColor,
+                                    ),
                               ),
                             ),
                           ),

lib/src/channel_preview.dart

@@ -49,6 +49,9 @@ class ChannelPreview extends StatelessWidget {
           return Opacity(
             opacity: snapshot.data ? 0.5 : 1,
             child: ListTile(
+              contentPadding: const EdgeInsets.symmetric(
+                horizontal: 8,
+              ),
               onTap: () {
                 if (onTap != null) {
                   onTap(channel);

lib/src/message_list_view.dart

@@ -195,10 +195,10 @@ class _MessageListViewState extends State<MessageListView> {
             return Center(
               child: Text(
                 'No chats here yet...',
-                style: TextStyle(
+                style: StreamChatTheme.of(context)
-                  fontSize: 12,
+                    .textTheme
-                  color: Colors.black.withOpacity(.5),
+                    .footnote
-                ),
+                    .copyWith(color: Colors.black.withOpacity(.5)),
               ),
             );
           }

lib/src/message_search_item.dart

@@ -126,8 +126,6 @@ class MessageSearchItem extends StatelessWidget {
       maxLines: 1,
       overflow: TextOverflow.ellipsis,
       style: StreamChatTheme.of(context).channelPreviewTheme.subtitle.copyWith(
-            color:
-                StreamChatTheme.of(context).channelPreviewTheme.subtitle.color,
             fontStyle: (message.isSystem || message.isDeleted)
                 ? FontStyle.italic
                 : FontStyle.normal,

lib/src/stream_chat_theme.dart

@@ -42,6 +42,9 @@ class StreamChatTheme extends InheritedWidget {
 
 /// Theme data
 class StreamChatThemeData {
+  /// The text themes used in the widgets
+  final TextTheme textTheme;
+
   /// Primary color of the chat widgets
   final Color primaryColor;
 
@@ -80,6 +83,7 @@ class StreamChatThemeData {
 
   /// Create a theme from scratch
   StreamChatThemeData({
+    this.textTheme,
     this.primaryColor,
     this.secondaryColor,
     this.accentColor,
@@ -131,6 +135,7 @@ class StreamChatThemeData {
 
   /// Creates a copy of [StreamChatThemeData] with specified attributes overridden.
   StreamChatThemeData copyWith({
+    TextTheme textTheme,
     Color primaryColor,
     Color secondaryColor,
     Color accentColor,
@@ -145,6 +150,16 @@ class StreamChatThemeData {
     List<ReactionIcon> reactionIcons,
   }) =>
       StreamChatThemeData(
+        textTheme: this.textTheme?.copyWith(
+              title: textTheme?.title,
+              body: textTheme?.body,
+              bodyBold: textTheme?.bodyBold,
+              captionBold: textTheme?.captionBold,
+              footnote: textTheme?.footnote,
+              footnoteBold: textTheme?.footnoteBold,
+              headline: textTheme?.headline,
+              headlineBold: textTheme?.headlineBold,
+            ),
         primaryColor: primaryColor ?? this.primaryColor,
         secondaryColor: secondaryColor ?? this.secondaryColor,
         primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme,
@@ -152,17 +167,12 @@ class StreamChatThemeData {
         defaultChannelImage: defaultChannelImage ?? this.defaultChannelImage,
         defaultUserImage: defaultUserImage ?? this.defaultUserImage,
         backgroundColor: backgroundColor ?? this.backgroundColor,
-        channelPreviewTheme: channelPreviewTheme?.copyWith(
+        channelPreviewTheme: this.channelPreviewTheme?.copyWith(
-              title:
+              title: channelPreviewTheme.title,
-                  channelPreviewTheme.title ?? this.channelPreviewTheme.title,
+              subtitle: channelPreviewTheme.subtitle,
-              subtitle: channelPreviewTheme.subtitle ??
+              lastMessageAt: channelPreviewTheme.lastMessageAt,
-                  this.channelPreviewTheme.subtitle,
+              avatarTheme: channelPreviewTheme.avatarTheme,
-              lastMessageAt: channelPreviewTheme.lastMessageAt ??
+            ),
-                  this.channelPreviewTheme.lastMessageAt,
-              avatarTheme: channelPreviewTheme.avatarTheme ??
-                  this.channelPreviewTheme.avatarTheme,
-            ) ??
-            this.channelPreviewTheme,
         channelTheme: channelTheme?.copyWith(
               channelHeaderTheme: channelTheme.channelHeaderTheme ??
                   this.channelTheme.channelHeaderTheme,
@@ -218,7 +228,9 @@ class StreamChatThemeData {
   static StreamChatThemeData getDefaultTheme(ThemeData theme) {
     final accentColor = Color(0xff006cff);
     final isDark = theme.brightness == Brightness.dark;
+    final textTheme = TextTheme();
     return StreamChatThemeData(
+      textTheme: textTheme,
       secondaryColor: Color(0xffEAEAEA),
       accentColor: accentColor,
       primaryColor: isDark ? Colors.black : Colors.white,
@@ -242,19 +254,12 @@ class StreamChatThemeData {
             width: 40,
           ),
         ),
-        title: TextStyle(
+        title: textTheme.bodyBold,
-            fontSize: 14,
+        subtitle: textTheme.footnote.copyWith(
-            color: isDark ? Colors.white : Colors.black,
+          color: Color(0xff7A7A7A),
-            fontWeight: FontWeight.bold),
-        subtitle: TextStyle(
-          fontSize: 12.5,
-          color: (isDark ? Colors.white : Colors.black).withOpacity(0.5),
         ),
-        lastMessageAt: TextStyle(
+        lastMessageAt: textTheme.footnote.copyWith(
-          fontSize: 11,
+          color: Colors.black.withOpacity(.5),
-          color: isDark
-              ? Colors.white.withOpacity(.5)
-              : Colors.black.withOpacity(.5),
         ),
       ),
       channelTheme: ChannelTheme(
@@ -375,6 +380,73 @@ class StreamChatThemeData {
   }
 }
 
+class TextTheme {
+  final TextStyle title;
+  final TextStyle headlineBold;
+  final TextStyle headline;
+  final TextStyle bodyBold;
+  final TextStyle body;
+  final TextStyle footnoteBold;
+  final TextStyle footnote;
+  final TextStyle captionBold;
+
+  TextTheme({
+    this.title = const TextStyle(
+      fontSize: 22,
+      fontWeight: FontWeight.bold,
+    ),
+    this.headlineBold = const TextStyle(
+      fontSize: 16,
+      fontWeight: FontWeight.bold,
+    ),
+    this.headline = const TextStyle(
+      fontSize: 16,
+      fontWeight: FontWeight.w500,
+    ),
+    this.bodyBold = const TextStyle(
+      fontSize: 14,
+      fontWeight: FontWeight.bold,
+    ),
+    this.body = const TextStyle(
+      fontSize: 14,
+      fontWeight: FontWeight.w500,
+    ),
+    this.footnoteBold = const TextStyle(
+      fontSize: 12,
+      fontWeight: FontWeight.w500,
+    ),
+    this.footnote = const TextStyle(
+      fontSize: 12,
+    ),
+    this.captionBold = const TextStyle(
+      fontSize: 10,
+      fontWeight: FontWeight.bold,
+    ),
+  });
+
+  TextTheme copyWith({
+    TextStyle body,
+    TextStyle title,
+    TextStyle headlineBold,
+    TextStyle headline,
+    TextStyle bodyBold,
+    TextStyle footnoteBold,
+    TextStyle footnote,
+    TextStyle captionBold,
+  }) {
+    return TextTheme(
+      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,
+    );
+  }
+}
+
 /// Channel theme data
 class ChannelTheme {
   /// Theme of the [ChannelHeader] widget

lib/src/user_item.dart

@@ -83,13 +83,19 @@ class UserItem extends StatelessWidget {
           : null,
       title: Text(
         user.name,
-        style: TextStyle(fontWeight: FontWeight.bold),
+        style: StreamChatTheme.of(context).textTheme.bodyBold,
       ),
       subtitle: showLastOnline ? _buildLastActive(context) : null,
     );
   }
 
   Widget _buildLastActive(context) {
-    return Text('Last online ${Jiffy(user.lastActive).fromNow()}');
+    return Text(
+      'Last online ${Jiffy(user.lastActive).fromNow()}',
+      style: StreamChatTheme.of(context)
+          .textTheme
+          .footnote
+          .copyWith(color: Colors.black.withOpacity(.5)),
+    );
   }
 }

lib/src/user_list_view.dart

@@ -361,7 +361,7 @@ class _UserListViewState extends State<UserListView>
                 header,
                 style: TextStyle(
                     fontWeight: FontWeight.bold,
-                    fontSize: 12,
+                    fontSize: 14.5,
                     color: Colors.black.withOpacity(0.3)),
               ),
             ),