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

feat: Added color theme implementations

Browse Source
This commit is contained in:
Deven Joshi
2020-12-29 23:10:41 +05:30
parent 08d2b32eff
commit 7fd8a1ed57
43 changed files with 504 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/ios/Flutter/.last_build_id
+1 -1
View File
@@ -1 +1 @@
13a41b8138c4868054e44b5158f3bdd6
209b1a40522bc1cb0ea3596a28cded5e
example/ios/Podfile.lock
+1 -1
View File
@@ -296,4 +296,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: eb001256612a59f8f9e4d083ad8b9671e69dd184
COCOAPODS: 1.10.0
COCOAPODS: 1.8.3
example/lib/advanced_options_page.dart
+25 -11
View File
@@ -45,11 +45,11 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
style: StreamChatTheme.of(context)
.textTheme
.headlineBold
.copyWith(color: Colors.black),
.copyWith(color: StreamChatTheme.of(context).colorTheme.black),
),
leading: IconButton(
icon: StreamSvgIcon.left(
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
),
onPressed: () {
Navigator.pop(context);
@@ -89,7 +89,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
},
style: TextStyle(
fontSize: 14,
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
),
decoration: InputDecoration(
errorStyle: TextStyle(fontSize: 0),
@@ -98,7 +98,10 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
fontWeight: FontWeight.bold,
color: _apiKeyError != null
? Color(0xffff3742)
: Colors.black.withOpacity(.5),
: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8),
@@ -133,7 +136,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
},
style: TextStyle(
fontSize: 14,
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
),
textInputAction: TextInputAction.next,
decoration: InputDecoration(
@@ -143,7 +146,10 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
fontSize: 14,
color: _userIdError != null
? Color(0xffff3742)
: Colors.black.withOpacity(.5),
: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8),
@@ -178,7 +184,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
},
style: TextStyle(
fontSize: 14,
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
),
textInputAction: TextInputAction.next,
decoration: InputDecoration(
@@ -188,7 +194,10 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
fontSize: 14,
color: _userTokenError != null
? Color(0xffff3742)
: Colors.black.withOpacity(.5),
: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8),
@@ -210,7 +219,10 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
labelStyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.black.withOpacity(.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8),
@@ -232,7 +244,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
color: StreamChatTheme.of(context).colorTheme.white,
fontSize: 16,
),
),
@@ -257,7 +269,9 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.white,
color: StreamChatTheme.of(context)
.colorTheme
.white,
),
height: 100,
width: 100,
example/lib/chips_input_text_field.dart
+18 -5
View File
@@ -66,7 +66,7 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
onTap: _pauseItemAddition ? resumeItemAddition : null,
child: Material(
elevation: 1,
color: Colors.white,
color: StreamChatTheme.of(context).colorTheme.white,
child: Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
@@ -81,7 +81,11 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
style: StreamChatTheme.of(context)
.textTheme
.footnote
.copyWith(color: Colors.black.withOpacity(.5)),
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5)),
),
),
SizedBox(width: 12),
@@ -115,7 +119,10 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
.textTheme
.body
.copyWith(
color: Colors.black.withOpacity(.5)),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5)),
),
),
],
@@ -127,11 +134,17 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
child: IconButton(
icon: _chips.isEmpty
? StreamSvgIcon.user(
color: Colors.black.withOpacity(0.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
size: 24,
)
: StreamSvgIcon.userAdd(
color: Colors.black.withOpacity(0.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
size: 24,
),
onPressed: resumeItemAddition,
example/lib/choose_user_page.dart
+4 -2
View File
@@ -113,7 +113,9 @@ class ChooseUserPage extends StatelessWidget {
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.white,
color: StreamChatTheme.of(context)
.colorTheme
.white,
),
height: 100,
width: 100,
@@ -189,7 +191,7 @@ class ChooseUserPage extends StatelessWidget {
},
leading: CircleAvatar(
child: StreamSvgIcon.settings(
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
),
backgroundColor:
StreamChatTheme.of(context).secondaryColor,
example/lib/custom_theme.dart
+3 -2
View File
@@ -50,9 +50,10 @@ class MyApp extends StatelessWidget {
client: client,
streamChatThemeData: StreamChatThemeData.fromTheme(theme).copyWith(
ownMessageTheme: MessageTheme(
messageBackgroundColor: Colors.black,
messageBackgroundColor:
StreamChatTheme.of(context).colorTheme.black,
messageText: TextStyle(
color: Colors.white,
color: StreamChatTheme.of(context).colorTheme.white,
),
avatarTheme: AvatarTheme(
borderRadius: BorderRadius.circular(8),
example/lib/customize_channel_preview.dart
+4 -1
View File
@@ -87,7 +87,10 @@ class ChannelListPage extends StatelessWidget {
channel: channel,
textStyle:
StreamChatTheme.of(context).channelPreviewTheme.title.copyWith(
color: Colors.black.withOpacity(opacity),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(opacity),
),
),
subtitle: Text(subtitle),
example/lib/group_chat_details_screen.dart
+28 -9
View File
@@ -62,12 +62,12 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
backgroundColor: Color.fromRGBO(252, 252, 252, 1),
appBar: AppBar(
elevation: 1,
backgroundColor: Colors.white,
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
leading: const StreamBackButton(),
title: Text(
'Name of Group Chat',
style: TextStyle(
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
fontSize: 16,
),
),
@@ -82,7 +82,10 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
'NAME',
style: TextStyle(
fontSize: 12,
color: Colors.black.withOpacity(0.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
),
SizedBox(width: 16),
@@ -99,7 +102,11 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
contentPadding: const EdgeInsets.all(0),
hintText: 'Choose a group chat name',
hintStyle: TextStyle(
fontSize: 14, color: Colors.black.withOpacity(.5)),
fontSize: 14,
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5)),
),
),
),
@@ -167,16 +174,28 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
separatorBuilder: (_, __) => Container(
height: 1,
color: Theme.of(context).brightness == Brightness.dark
? Colors.white.withOpacity(0.1)
: Colors.black.withOpacity(0.1),
? StreamChatTheme.of(context)
.colorTheme
.white
.withOpacity(0.1)
: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.1),
),
itemBuilder: (_, index) {
if (index == _selectedUsers.length) {
return Container(
height: 1,
color: Theme.of(context).brightness == Brightness.dark
? Colors.white.withOpacity(0.1)
: Colors.black.withOpacity(0.1),
? StreamChatTheme.of(context)
.colorTheme
.white
.withOpacity(0.1)
: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.1),
);
}
final user = _selectedUsers[index];
@@ -200,7 +219,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
trailing: IconButton(
icon: Icon(
Icons.clear_rounded,
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
),
padding: const EdgeInsets.all(0),
splashRadius: 24,
example/lib/main.dart
+21 -8
View File
@@ -55,10 +55,10 @@ class MyApp extends StatelessWidget {
client: client,
child: MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
theme: ThemeData.dark(),
darkTheme: ThemeData.dark(),
//TODO change to system once dark theme is implemented
themeMode: ThemeMode.light,
themeMode: ThemeMode.dark,
onGenerateRoute: AppRoutes.generateRoute,
initialRoute:
client.state.user == null ? Routes.CHOOSE_USER : Routes.HOME,
@@ -84,7 +84,9 @@ class _HomePageState extends State<HomePage> {
overflow: Overflow.visible,
children: [
StreamSvgIcon.message(
color: _isSelected(0) ? Colors.black : Colors.grey,
color: _isSelected(0)
? StreamChatTheme.of(context).colorTheme.black
: Colors.grey,
),
Positioned(
top: -3,
@@ -100,7 +102,9 @@ class _HomePageState extends State<HomePage> {
overflow: Overflow.visible,
children: [
StreamSvgIcon.mentions(
color: _isSelected(1) ? Colors.black : Colors.grey,
color: _isSelected(1)
? StreamChatTheme.of(context).colorTheme.black
: Colors.grey,
),
],
),
@@ -127,7 +131,7 @@ class _HomePageState extends State<HomePage> {
unselectedLabelStyle:
StreamChatTheme.of(context).textTheme.footnoteBold,
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.black,
selectedItemColor: StreamChatTheme.of(context).colorTheme.black,
unselectedItemColor: Colors.grey,
onTap: (index) {
setState(() => _currentIndex = index);
@@ -179,7 +183,10 @@ class _HomePageState extends State<HomePage> {
),
ListTile(
leading: StreamSvgIcon.penWrite(
color: Colors.black.withOpacity(.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
onTap: () {
Navigator.popAndPushNamed(
@@ -196,7 +203,10 @@ class _HomePageState extends State<HomePage> {
),
ListTile(
leading: StreamSvgIcon.contacts(
color: Colors.black.withOpacity(.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
onTap: () {
Navigator.popAndPushNamed(
@@ -231,7 +241,10 @@ class _HomePageState extends State<HomePage> {
);
},
leading: StreamSvgIcon.user(
color: Colors.black.withOpacity(.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
title: Text(
'Sign out',
example/lib/new_chat_screen.dart
+32 -10
View File
@@ -125,14 +125,14 @@ class _NewChatScreenState extends State<NewChatScreen> {
backgroundColor: Color.fromRGBO(252, 252, 252, 1),
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
leading: const StreamBackButton(),
title: Text(
'New Chat',
style: StreamChatTheme.of(context)
.textTheme
.headlineBold
.copyWith(color: Colors.black),
.copyWith(color: StreamChatTheme.of(context).colorTheme.black),
),
centerTitle: true,
),
@@ -157,7 +157,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
children: [
Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.05),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.only(left: 24),
@@ -165,7 +168,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
padding: const EdgeInsets.fromLTRB(8, 4, 12, 4),
child: Text(
user.name,
style: TextStyle(color: Colors.black),
style: TextStyle(
color: StreamChatTheme.of(context)
.colorTheme
.black),
),
),
),
@@ -182,7 +188,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
),
Positioned(
child: StreamSvgIcon.close(
color: Colors.white,
color: StreamChatTheme.of(context).colorTheme.white,
),
),
],
@@ -235,8 +241,14 @@ class _NewChatScreenState extends State<NewChatScreen> {
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.black.withOpacity(0.02),
Colors.white.withOpacity(0.05),
StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.02),
StreamChatTheme.of(context)
.colorTheme
.white
.withOpacity(0.05),
],
stops: [0, 1],
),
@@ -253,7 +265,11 @@ class _NewChatScreenState extends State<NewChatScreen> {
style: StreamChatTheme.of(context)
.textTheme
.footnote
.copyWith(color: Colors.black.withOpacity(.5))),
.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5))),
),
),
Expanded(
@@ -318,7 +334,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
.textTheme
.footnote
.copyWith(
color: Colors.black
color: StreamChatTheme.of(
context)
.colorTheme
.black
.withOpacity(.5)),
),
],
@@ -344,7 +363,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
'No chats here yet...',
style: TextStyle(
fontSize: 12,
color: Colors.black.withOpacity(.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5),
),
),
);
example/lib/new_group_chat_screen.dart
+25 -9
View File
@@ -62,12 +62,12 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
pinned: true,
forceElevated: true,
elevation: 1,
backgroundColor: Colors.white,
backgroundColor: StreamChatTheme.of(context).colorTheme.white,
leading: const StreamBackButton(),
title: Text(
'Add Group Members',
style: TextStyle(
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
fontSize: 16,
),
),
@@ -137,7 +137,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
color: StreamChatTheme.of(context)
.colorTheme
.white,
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey.shade100,
@@ -146,7 +148,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
child: Padding(
padding: const EdgeInsets.all(0.0),
child: StreamSvgIcon.close(
color: Colors.black,
color: StreamChatTheme.of(context)
.colorTheme
.black,
size: 24,
),
),
@@ -180,8 +184,14 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.black.withOpacity(0.02),
Colors.white.withOpacity(0.05),
StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.02),
StreamChatTheme.of(context)
.colorTheme
.white
.withOpacity(0.05),
],
stops: [0, 1],
),
@@ -196,7 +206,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
? 'Matches for \"$_userNameQuery\"'
: 'On the platform',
style: TextStyle(
color: Colors.black.withOpacity(0.5),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(0.5),
),
),
),
@@ -267,7 +280,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
.textTheme
.footnote
.copyWith(
color: Colors.black.withOpacity(.5)),
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5)),
),
],
),
@@ -299,7 +315,7 @@ class _HeaderDelegate extends SliverPersistentHeaderDelegate {
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: Colors.white,
color: StreamChatTheme.of(context).colorTheme.white,
child: child,
);
}
example/lib/search_text_field.dart
+7 -6
View File
@@ -22,7 +22,7 @@ class SearchTextField extends StatelessWidget {
return Container(
height: 36,
decoration: BoxDecoration(
color: Colors.white,
color: StreamChatTheme.of(context).colorTheme.white,
border: Border.all(
color: Colors.grey.shade300,
),
@@ -48,15 +48,16 @@ class SearchTextField extends StatelessWidget {
right: 8,
),
child: StreamSvgIcon.search(
color: Colors.black,
color: StreamChatTheme.of(context).colorTheme.black,
size: 24,
),
),
hintText: hintText,
hintStyle: StreamChatTheme.of(context)
.textTheme
.body
.copyWith(color: Colors.black.withOpacity(.5)),
hintStyle: StreamChatTheme.of(context).textTheme.body.copyWith(
color: StreamChatTheme.of(context)
.colorTheme
.black
.withOpacity(.5)),
contentPadding: const EdgeInsets.all(0),
border: OutlineInputBorder(
borderSide: BorderSide.none,
example/lib/stream_version.dart
+3 -1
View File
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yaml/yaml.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
class StreamVersion extends StatelessWidget {
const StreamVersion({
@@ -28,7 +29,8 @@ class StreamVersion extends StatelessWidget {
'Stream SDK v ${streamChatDep}',
style: TextStyle(
fontSize: 14.5,
color: Colors.black.withOpacity(.13),
color:
StreamChatTheme.of(context).colorTheme.black.withOpacity(.13),
),
);
},