apply theme to new chat screens

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
+9 -4
View File
@@ -34,6 +34,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
resizeToAvoidBottomPadding: false,
appBar: AppBar(
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
@@ -107,7 +108,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
fillColor: Color(0xffF5F5F5),
fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true,
labelText:
'Chat API Key ${_apiKeyError != null ? ':$_apiKeyError' : ''}',
@@ -155,7 +157,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
fillColor: Color(0xffF5F5F5),
fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true,
labelText:
'User ID ${_userIdError != null ? ':$_userIdError' : ''}',
@@ -203,7 +206,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
fillColor: Color(0xffF5F5F5),
fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true,
labelText:
'User Token ${_userTokenError != null ? ':$_userTokenError' : ''}',
@@ -228,7 +232,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
fillColor: Color(0xffF5F5F5),
fillColor:
StreamChatTheme.of(context).colorTheme.whiteSmoke,
filled: true,
labelText: 'Username (optional)',
),
+4 -2
View File
@@ -58,6 +58,7 @@ class ChooseUserPage extends StatelessWidget {
(_, value) => value..extraData['image'] = getRandomPicUrl(value));
return Scaffold(
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
@@ -191,8 +192,9 @@ class ChooseUserPage extends StatelessWidget {
child: StreamSvgIcon.settings(
color: StreamChatTheme.of(context).colorTheme.black,
),
backgroundColor:
StreamChatTheme.of(context).colorTheme.accentBlue,
backgroundColor: StreamChatTheme.of(context)
.colorTheme
.greyWhisper,
),
title: Text(
'Advanced Options',
+11 -2
View File
@@ -59,7 +59,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
return false;
},
child: Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1),
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
appBar: AppBar(
elevation: 1,
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
@@ -151,7 +151,16 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
children: [
Container(
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(
padding: const EdgeInsets.symmetric(
vertical: 8,
+103 -100
View File
@@ -151,113 +151,116 @@ class _HomePageState extends State<HomePage> {
Drawer _buildDrawer(BuildContext context, User user) {
return Drawer(
child: SafeArea(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).viewPadding.top + 8,
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
bottom: 20.0,
left: 8,
child: Container(
color: StreamChatTheme.of(context).colorTheme.white,
child: SafeArea(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).viewPadding.top + 8,
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
bottom: 20.0,
left: 8,
),
child: Row(
children: [
UserAvatar(
user: user,
showOnlineStatus: false,
constraints: BoxConstraints.tight(Size.fromRadius(20)),
),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text(
user.name,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
child: Row(
children: [
UserAvatar(
user: user,
showOnlineStatus: false,
constraints: BoxConstraints.tight(Size.fromRadius(20)),
ListTile(
leading: StreamSvgIcon.penWrite(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
onTap: () {
Navigator.popAndPushNamed(
context,
Routes.NEW_CHAT,
);
},
title: Text(
'New direct message',
style: TextStyle(
fontSize: 14.5,
),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text(
user.name,
),
),
ListTile(
leading: StreamSvgIcon.contacts(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
onTap: () {
Navigator.popAndPushNamed(
context,
Routes.NEW_GROUP_CHAT,
);
},
title: Text(
'New group',
style: TextStyle(
fontSize: 14.5,
),
),
),
Expanded(
child: Container(
alignment: Alignment.bottomCenter,
child: ListTile(
onTap: () async {
Navigator.pop(context);
final secureStorage = FlutterSecureStorage();
await secureStorage.deleteAll();
StreamChat.of(context).client.disconnect(
clearUser: true,
);
await Navigator.pushReplacementNamed(
context,
Routes.CHOOSE_USER,
);
},
leading: StreamSvgIcon.user(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
title: Text(
'Sign out',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
fontSize: 14.5,
),
),
),
],
),
),
ListTile(
leading: StreamSvgIcon.penWrite(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
onTap: () {
Navigator.popAndPushNamed(
context,
Routes.NEW_CHAT,
);
},
title: Text(
'New direct message',
style: TextStyle(
fontSize: 14.5,
),
),
),
ListTile(
leading: StreamSvgIcon.contacts(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
onTap: () {
Navigator.popAndPushNamed(
context,
Routes.NEW_GROUP_CHAT,
);
},
title: Text(
'New group',
style: TextStyle(
fontSize: 14.5,
),
),
),
Expanded(
child: Container(
alignment: Alignment.bottomCenter,
child: ListTile(
onTap: () async {
Navigator.pop(context);
final secureStorage = FlutterSecureStorage();
await secureStorage.deleteAll();
StreamChat.of(context).client.disconnect(
clearUser: true,
);
await Navigator.pushReplacementNamed(
context,
Routes.CHOOSE_USER,
);
},
leading: StreamSvgIcon.user(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
title: Text(
'Sign out',
style: TextStyle(
fontSize: 14.5,
),
),
),
),
),
],
],
),
),
),
),
@@ -488,7 +491,7 @@ class ThreadPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1),
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
appBar: ThreadHeader(
parent: parent,
),
+4 -2
View File
@@ -119,7 +119,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1),
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
appBar: AppBar(
elevation: 0,
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
@@ -215,7 +215,9 @@ class _NewChatScreenState extends State<NewChatScreen> {
StreamNeumorphicButton(
child: Center(
child: StreamSvgIcon.contacts(
color: Color(0xFF006CFF),
color: StreamChatTheme.of(context)
.colorTheme
.accentBlue,
size: 24,
),
),
+9 -11
View File
@@ -3,9 +3,8 @@ import 'dart:async';
import 'package:flutter/material.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 'search_text_field.dart';
class NewGroupChatScreen extends StatefulWidget {
@override
@@ -53,7 +52,7 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color.fromRGBO(252, 252, 252, 1),
backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
@@ -142,18 +141,17 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
.white,
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey.shade100,
),
),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.black,
size: 24,
.whiteSnow,
),
),
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
.colorTheme
.black,
size: 24,
),
),
),
)
+1 -1
View File
@@ -24,7 +24,7 @@ class SearchTextField extends StatelessWidget {
decoration: BoxDecoration(
color: StreamChatTheme.of(context).colorTheme.white,
border: Border.all(
color: StreamChatTheme.of(context).colorTheme.white,
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
),
borderRadius: BorderRadius.circular(24),
),
+1 -1
View File
@@ -1,6 +1,6 @@
name: example
description: A new Flutter project.
version: 1.0.98+101
version: 1.0.99+102
environment:
sdk: ">=2.2.2 <3.0.0"
+4 -4
View File
@@ -336,8 +336,8 @@ class _ChannelListViewState extends State<ChannelListView>
Shimmer _buildLoadingItem() {
if (widget.crossAxisCount > 1) {
return Shimmer.fromColors(
baseColor: Color(0xffE5E5E5),
highlightColor: Color(0xffffffff),
baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
highlightColor: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: Column(
children: [
SizedBox(
@@ -367,8 +367,8 @@ class _ChannelListViewState extends State<ChannelListView>
);
} else {
return Shimmer.fromColors(
baseColor: Color(0xffE5E5E5),
highlightColor: StreamChatTheme.of(context).colorTheme.white,
baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
highlightColor: StreamChatTheme.of(context).colorTheme.whiteSmoke,
child: ListTile(
leading: Container(
decoration: BoxDecoration(
+1 -1
View File
@@ -36,7 +36,7 @@ class ChannelUnreadIndicator extends StatelessWidget {
'${snapshot.data}',
style: TextStyle(
fontSize: 11,
color: StreamChatTheme.of(context).colorTheme.white,
color: Colors.white,
),
),
),
+1 -3
View File
@@ -100,9 +100,7 @@ class _FullScreenMediaState extends State<FullScreenMedia>
.channelTheme
.channelHeaderTheme
.color,
end: StreamChatTheme.of(context)
.colorTheme
.black)
end: Colors.black)
.lerp(_controller.value),
),
onTapUp: (a, b, c) {
+3 -2
View File
@@ -35,7 +35,7 @@ class ImageActionsModal extends StatelessWidget {
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.8),
Colors.black.withOpacity(0.8),
Colors.transparent,
],
stops: [0.0, 0.4],
@@ -110,10 +110,10 @@ class ImageActionsModal extends StatelessWidget {
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
color: Color(0xffe5e5e5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
context: context,
tiles: [
_buildButton(
@@ -203,6 +203,7 @@ class ImageActionsModal extends StatelessWidget {
);
return Material(
color: StreamChatTheme.of(context).colorTheme.white,
child: InkWell(
onTap: onTap,
child: ListTile(
+5 -3
View File
@@ -5,10 +5,10 @@ import 'dart:typed_data';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:chewie/chewie.dart';
import 'package:dio/dio.dart';
import 'package:esys_flutter_share/esys_flutter_share.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:stream_chat/stream_chat.dart';
@@ -300,7 +300,7 @@ class _ImageFooterState extends State<ImageFooter> {
limit: 25,
),
filter: {
if (_searchController.text.isNotEmpty)
if (_channelNameQuery?.trim()?.isNotEmpty == true)
'name': {
r'$autocomplete': _channelNameQuery,
},
@@ -311,7 +311,7 @@ class _ImageFooterState extends State<ImageFooter> {
sort: [
SortOption(
'name',
direction: 1,
direction: SortOption.ASC,
),
],
emptyBuilder: (_) {
@@ -356,6 +356,8 @@ class _ImageFooterState extends State<ImageFooter> {
color: StreamChatTheme.of(context).colorTheme.white,
height: 48.0,
child: Material(
color:
StreamChatTheme.of(context).colorTheme.white,
child: InkWell(
onTap: () async {
var url = widget
+1 -1
View File
@@ -1343,7 +1343,7 @@ class MessageInputState extends State<MessageInput> {
StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.2),
.withOpacity(0.6),
maxRadius: 12.0,
child: StreamSvgIcon.close(
color: StreamChatTheme.of(context)
+4 -2
View File
@@ -345,10 +345,12 @@ class _MessageListViewState extends State<MessageListView> {
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFFF7F7F7),
StreamChatTheme.of(context)
.colorTheme
.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) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollController.jumpTo(
_scrollController?.jumpTo(
index: 0,
);
});
+8
View File
@@ -381,33 +381,41 @@ class TextTheme {
this.title = const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.black,
),
this.headlineBold = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
this.headline = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black,
),
this.bodyBold = const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.black,
),
this.body = const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black,
),
this.footnoteBold = const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.black,
),
this.footnote = const TextStyle(
fontSize: 12,
color: Colors.black,
),
this.captionBold = const TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.black,
),
});
+1 -1
View File
@@ -34,7 +34,7 @@ class UnreadIndicator extends StatelessWidget {
'${snapshot.data}',
style: TextStyle(
fontSize: 11,
color: StreamChatTheme.of(context).colorTheme.white,
color: Colors.white,
),
),
),
+2
View File
@@ -74,6 +74,8 @@ class UserItem extends StatelessWidget {
),
trailing: selected
? CircleAvatar(
backgroundColor:
StreamChatTheme.of(context).colorTheme.accentBlue,
child: StreamSvgIcon.check(
size: 20,
color: StreamChatTheme.of(context).colorTheme.white,