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

apply theme to new chat screens

Browse Source
This commit is contained in:
Salvatore Giordano
2020-12-30 18:26:24 +01:00
parent 1b0d117ea4
commit 911581e094
18 changed files with 172 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/advanced_options_page.dart
+9 -4
View File
@@ -34,6 +34,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
resizeToAvoidBottomPadding: false, resizeToAvoidBottomPadding: false,
appBar: AppBar( appBar: AppBar(
backgroundColor: StreamChatTheme.of(context).colorTheme.white, backgroundColor: StreamChatTheme.of(context).colorTheme.white,
@@ -107,7 +108,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
fillColor: Color(0xffF5F5F5), fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true, filled: true,
labelText: labelText:
'Chat API Key ${_apiKeyError != null ? ':$_apiKeyError' : ''}', 'Chat API Key ${_apiKeyError != null ? ':$_apiKeyError' : ''}',
@@ -155,7 +157,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
fillColor: Color(0xffF5F5F5), fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true, filled: true,
labelText: labelText:
'User ID ${_userIdError != null ? ':$_userIdError' : ''}', 'User ID ${_userIdError != null ? ':$_userIdError' : ''}',
@@ -203,7 +206,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
fillColor: Color(0xffF5F5F5), fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true, filled: true,
labelText: labelText:
'User Token ${_userTokenError != null ? ':$_userTokenError' : ''}', 'User Token ${_userTokenError != null ? ':$_userTokenError' : ''}',
@@ -228,7 +232,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
fillColor: Color(0xffF5F5F5), fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true, filled: true,
labelText: 'Username (optional)', labelText: 'Username (optional)',
), ),
example/lib/choose_user_page.dart
+4 -2
View File
@@ -58,6 +58,7 @@ class ChooseUserPage extends StatelessWidget {
(_, value) => value..extraData['image'] = getRandomPicUrl(value)); (_, value) => value..extraData['image'] = getRandomPicUrl(value));
return Scaffold( return Scaffold(
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
body: SafeArea( body: SafeArea(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@@ -191,8 +192,9 @@ class ChooseUserPage extends StatelessWidget {
child: StreamSvgIcon.settings( child: StreamSvgIcon.settings(
color: StreamChatTheme.of(context).colorTheme.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
backgroundColor: backgroundColor: StreamChatTheme.of(context)
StreamChatTheme.of(context).colorTheme.accentBlue, .colorTheme
.greyWhisper,
), ),
title: Text( title: Text(
'Advanced Options', 'Advanced Options',
example/lib/group_chat_details_screen.dart
+11 -2
View File
@@ -59,7 +59,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
return false; return false;
}, },
child: Scaffold( child: Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1), backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
appBar: AppBar( appBar: AppBar(
elevation: 1, elevation: 1,
backgroundColor: StreamChatTheme.of(context).colorTheme.white, backgroundColor: StreamChatTheme.of(context).colorTheme.white,
@@ -151,7 +151,16 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
children: [ children: [
Container( Container(
width: double.maxFinite, width: double.maxFinite,
color: Colors.grey.shade50, decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
StreamChatTheme.of(context).colorTheme.whiteSmoke,
StreamChatTheme.of(context).colorTheme.whiteSnow,
],
),
),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
vertical: 8, vertical: 8,
example/lib/main.dart
+4 -1
View File
@@ -151,6 +151,8 @@ class _HomePageState extends State<HomePage> {
Drawer _buildDrawer(BuildContext context, User user) { Drawer _buildDrawer(BuildContext context, User user) {
return Drawer( return Drawer(
child: Container(
color: StreamChatTheme.of(context).colorTheme.white,
child: SafeArea( child: SafeArea(
child: Padding( child: Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
@@ -261,6 +263,7 @@ class _HomePageState extends State<HomePage> {
), ),
), ),
), ),
),
); );
} }
} }
@@ -488,7 +491,7 @@ class ThreadPage 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).colorTheme.whiteSnow,
appBar: ThreadHeader( appBar: ThreadHeader(
parent: parent, parent: parent,
), ),
example/lib/new_chat_screen.dart
+4 -2
View File
@@ -119,7 +119,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
@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).colorTheme.whiteSnow,
appBar: AppBar( appBar: AppBar(
elevation: 0, elevation: 0,
backgroundColor: StreamChatTheme.of(context).colorTheme.white, backgroundColor: StreamChatTheme.of(context).colorTheme.white,
@@ -215,7 +215,9 @@ class _NewChatScreenState extends State<NewChatScreen> {
StreamNeumorphicButton( StreamNeumorphicButton(
child: Center( child: Center(
child: StreamSvgIcon.contacts( child: StreamSvgIcon.contacts(
color: Color(0xFF006CFF), color: StreamChatTheme.of(context)
.colorTheme
.accentBlue,
size: 24, size: 24,
), ),
), ),
example/lib/new_group_chat_screen.dart
+5 -7
View File
@@ -3,9 +3,8 @@ import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'group_chat_details_screen.dart';
import 'search_text_field.dart';
import 'routes/routes.dart'; import 'routes/routes.dart';
import 'search_text_field.dart';
class NewGroupChatScreen extends StatefulWidget { class NewGroupChatScreen extends StatefulWidget {
@override @override
@@ -53,7 +52,7 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SafeArea( return SafeArea(
child: Scaffold( child: Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1), backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
body: NestedScrollView( body: NestedScrollView(
floatHeaderSlivers: true, floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
@@ -142,11 +141,11 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
.white, .white,
shape: BoxShape.circle, shape: BoxShape.circle,
border: Border.all( border: Border.all(
color: Colors.grey.shade100, color: StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
), ),
), ),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: StreamSvgIcon.close( child: StreamSvgIcon.close(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
.colorTheme .colorTheme
@@ -155,7 +154,6 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
), ),
), ),
), ),
),
) )
], ],
), ),
example/lib/search_text_field.dart
+1 -1
View File
@@ -24,7 +24,7 @@ class SearchTextField extends StatelessWidget {
decoration: BoxDecoration( decoration: BoxDecoration(
color: StreamChatTheme.of(context).colorTheme.white, color: StreamChatTheme.of(context).colorTheme.white,
border: Border.all( border: Border.all(
color: StreamChatTheme.of(context).colorTheme.white, color: StreamChatTheme.of(context).colorTheme.greyWhisper,
), ),
borderRadius: BorderRadius.circular(24), borderRadius: BorderRadius.circular(24),
), ),
example/pubspec.yaml
+1 -1
View File
@@ -1,6 +1,6 @@
name: example name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.0.98+101 version: 1.0.99+102
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
lib/src/channel_list_view.dart
+4 -4
View File
@@ -336,8 +336,8 @@ class _ChannelListViewState extends State<ChannelListView>
Shimmer _buildLoadingItem() { Shimmer _buildLoadingItem() {
if (widget.crossAxisCount > 1) { if (widget.crossAxisCount > 1) {
return Shimmer.fromColors( return Shimmer.fromColors(
baseColor: Color(0xffE5E5E5), baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
highlightColor: Color(0xffffffff), highlightColor: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Column( child: Column(
children: [ children: [
SizedBox( SizedBox(
@@ -367,8 +367,8 @@ class _ChannelListViewState extends State<ChannelListView>
); );
} else { } else {
return Shimmer.fromColors( return Shimmer.fromColors(
baseColor: Color(0xffE5E5E5), baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
highlightColor: StreamChatTheme.of(context).colorTheme.white, highlightColor: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: ListTile( child: ListTile(
leading: Container( leading: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
lib/src/channel_unread_indicator.dart
+1 -1
View File
@@ -36,7 +36,7 @@ class ChannelUnreadIndicator extends StatelessWidget {
'${snapshot.data}', '${snapshot.data}',
style: TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
color: StreamChatTheme.of(context).colorTheme.white, color: Colors.white,
), ),
), ),
), ),
lib/src/full_screen_media.dart
+1 -3
View File
@@ -100,9 +100,7 @@ class _FullScreenMediaState extends State<FullScreenMedia>
.channelTheme .channelTheme
.channelHeaderTheme .channelHeaderTheme
.color, .color,
end: StreamChatTheme.of(context) end: Colors.black)
.colorTheme
.black)
.lerp(_controller.value), .lerp(_controller.value),
), ),
onTapUp: (a, b, c) { onTapUp: (a, b, c) {
lib/src/image_actions_modal.dart
+3 -2
View File
@@ -35,7 +35,7 @@ class ImageActionsModal extends StatelessWidget {
begin: Alignment.topCenter, begin: Alignment.topCenter,
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
colors: [ colors: [
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.8), Colors.black.withOpacity(0.8),
Colors.transparent, Colors.transparent,
], ],
stops: [0.0, 0.4], stops: [0.0, 0.4],
@@ -110,10 +110,10 @@ class ImageActionsModal extends StatelessWidget {
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
color: Color(0xffe5e5e5),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: ListTile.divideTiles( children: ListTile.divideTiles(
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
context: context, context: context,
tiles: [ tiles: [
_buildButton( _buildButton(
@@ -203,6 +203,7 @@ class ImageActionsModal extends StatelessWidget {
); );
return Material( return Material(
color: StreamChatTheme.of(context).colorTheme.white,
child: InkWell( child: InkWell(
onTap: onTap, onTap: onTap,
child: ListTile( child: ListTile(
lib/src/image_footer.dart
+5 -3
View File
@@ -5,10 +5,10 @@ import 'dart:typed_data';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:chewie/chewie.dart'; import 'package:chewie/chewie.dart';
import 'package:dio/dio.dart';
import 'package:esys_flutter_share/esys_flutter_share.dart'; import 'package:esys_flutter_share/esys_flutter_share.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart'; import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart'; import 'package:path_provider/path_provider.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
@@ -300,7 +300,7 @@ class _ImageFooterState extends State<ImageFooter> {
limit: 25, limit: 25,
), ),
filter: { filter: {
if (_searchController.text.isNotEmpty) if (_channelNameQuery?.trim()?.isNotEmpty == true)
'name': { 'name': {
r'$autocomplete': _channelNameQuery, r'$autocomplete': _channelNameQuery,
}, },
@@ -311,7 +311,7 @@ class _ImageFooterState extends State<ImageFooter> {
sort: [ sort: [
SortOption( SortOption(
'name', 'name',
direction: 1, direction: SortOption.ASC,
), ),
], ],
emptyBuilder: (_) { emptyBuilder: (_) {
@@ -356,6 +356,8 @@ class _ImageFooterState extends State<ImageFooter> {
color: StreamChatTheme.of(context).colorTheme.white, color: StreamChatTheme.of(context).colorTheme.white,
height: 48.0, height: 48.0,
child: Material( child: Material(
color:
StreamChatTheme.of(context).colorTheme.white,
child: InkWell( child: InkWell(
onTap: () async { onTap: () async {
var url = widget var url = widget
lib/src/message_input.dart
+1 -1
View File
@@ -1343,7 +1343,7 @@ class MessageInputState extends State<MessageInput> {
StreamChatTheme.of(context) StreamChatTheme.of(context)
.colorTheme .colorTheme
.black .black
.withOpacity(0.2), .withOpacity(0.6),
maxRadius: 12.0, maxRadius: 12.0,
child: StreamSvgIcon.close( child: StreamSvgIcon.close(
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context)
lib/src/message_list_view.dart
+4 -2
View File
@@ -345,10 +345,12 @@ class _MessageListViewState extends State<MessageListView> {
begin: Alignment.topCenter, begin: Alignment.topCenter,
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
colors: [ colors: [
Color(0XFFF7F7F7),
StreamChatTheme.of(context) StreamChatTheme.of(context)
.colorTheme .colorTheme
.whiteSmoke, .whiteSmoke,
StreamChatTheme.of(context)
.colorTheme
.whiteSnow,
], ],
), ),
), ),
@@ -844,7 +846,7 @@ class _MessageListViewState extends State<MessageListView> {
} }
if (event.message.user.id == streamChannel.channel.client.state.user.id) { if (event.message.user.id == streamChannel.channel.client.state.user.id) {
WidgetsBinding.instance.addPostFrameCallback((_) { WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollController.jumpTo( _scrollController?.jumpTo(
index: 0, index: 0,
); );
}); });
lib/src/stream_chat_theme.dart
+8
View File
@@ -381,33 +381,41 @@ class TextTheme {
this.title = const TextStyle( this.title = const TextStyle(
fontSize: 22, fontSize: 22,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.black,
), ),
this.headlineBold = const TextStyle( this.headlineBold = const TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.black,
), ),
this.headline = const TextStyle( this.headline = const TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Colors.black,
), ),
this.bodyBold = const TextStyle( this.bodyBold = const TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.black,
), ),
this.body = const TextStyle( this.body = const TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Colors.black,
), ),
this.footnoteBold = const TextStyle( this.footnoteBold = const TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Colors.black,
), ),
this.footnote = const TextStyle( this.footnote = const TextStyle(
fontSize: 12, fontSize: 12,
color: Colors.black,
), ),
this.captionBold = const TextStyle( this.captionBold = const TextStyle(
fontSize: 10, fontSize: 10,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.black,
), ),
}); });
lib/src/unread_indicator.dart
+1 -1
View File
@@ -34,7 +34,7 @@ class UnreadIndicator extends StatelessWidget {
'${snapshot.data}', '${snapshot.data}',
style: TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
color: StreamChatTheme.of(context).colorTheme.white, color: Colors.white,
), ),
), ),
), ),
lib/src/user_item.dart
+2
View File
@@ -74,6 +74,8 @@ class UserItem extends StatelessWidget {
), ),
trailing: selected trailing: selected
? CircleAvatar( ? CircleAvatar(
backgroundColor:
StreamChatTheme.of(context).colorTheme.accentBlue,
child: StreamSvgIcon.check( child: StreamSvgIcon.check(
size: 20, size: 20,
color: StreamChatTheme.of(context).colorTheme.white, color: StreamChatTheme.of(context).colorTheme.white,