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

[Choose User, Advanced Options] QA fixes, theme changes

Browse Source 
Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
2021-01-06 18:23:39 +05:30
parent b55d8bd2a8
commit 14a35205cf
5 changed files with 231 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/advanced_options_page.dart
+22 -62
View File
@@ -60,15 +60,11 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
body: Builder( body: Builder(
builder: (context) { builder: (context) {
return Padding( return Padding(
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
16,
16,
16,
0,
),
child: Form( child: Form(
key: _formKey, key: _formKey,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
TextFormField( TextFormField(
controller: _apiKeyController, controller: _apiKeyController,
@@ -93,16 +89,13 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
color: StreamChatTheme.of(context).colorTheme.black, color: StreamChatTheme.of(context).colorTheme.black,
), ),
decoration: InputDecoration( decoration: InputDecoration(
errorStyle: TextStyle(fontSize: 0), errorStyle: TextStyle(height: 0, fontSize: 0),
labelStyle: TextStyle( labelStyle: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _apiKeyError != null color: _apiKeyError != null
? StreamChatTheme.of(context).colorTheme.accentRed ? StreamChatTheme.of(context).colorTheme.accentRed
: StreamChatTheme.of(context) : StreamChatTheme.of(context).colorTheme.grey,
.colorTheme
.black
.withOpacity(.5),
), ),
border: UnderlineInputBorder( border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
@@ -116,9 +109,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
), ),
textInputAction: TextInputAction.next, textInputAction: TextInputAction.next,
), ),
Padding( SizedBox(height: 8),
padding: const EdgeInsets.only(top: 8.0), TextFormField(
child: TextFormField(
controller: _userIdController, controller: _userIdController,
onChanged: (_) { onChanged: (_) {
if (_userIdError != null) { if (_userIdError != null) {
@@ -142,16 +134,13 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
), ),
textInputAction: TextInputAction.next, textInputAction: TextInputAction.next,
decoration: InputDecoration( decoration: InputDecoration(
errorStyle: TextStyle(fontSize: 0), errorStyle: TextStyle(height: 0, fontSize: 0),
labelStyle: TextStyle( labelStyle: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 14, fontSize: 14,
color: _userIdError != null color: _userIdError != null
? StreamChatTheme.of(context).colorTheme.accentRed ? StreamChatTheme.of(context).colorTheme.accentRed
: StreamChatTheme.of(context) : StreamChatTheme.of(context).colorTheme.grey,
.colorTheme
.black
.withOpacity(.5),
), ),
border: UnderlineInputBorder( border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
@@ -164,10 +153,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
'User ID ${_userIdError != null ? ': $_userIdError' : ''}', 'User ID ${_userIdError != null ? ': $_userIdError' : ''}',
), ),
), ),
), SizedBox(height: 8),
Padding( TextFormField(
padding: const EdgeInsets.only(top: 8.0),
child: TextFormField(
onChanged: (_) { onChanged: (_) {
if (_userTokenError != null) { if (_userTokenError != null) {
setState(() { setState(() {
@@ -191,16 +178,13 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
), ),
textInputAction: TextInputAction.next, textInputAction: TextInputAction.next,
decoration: InputDecoration( decoration: InputDecoration(
errorStyle: TextStyle(fontSize: 0), errorStyle: TextStyle(height: 0, fontSize: 0),
labelStyle: TextStyle( labelStyle: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 14, fontSize: 14,
color: _userTokenError != null color: _userTokenError != null
? StreamChatTheme.of(context).colorTheme.accentRed ? StreamChatTheme.of(context).colorTheme.accentRed
: StreamChatTheme.of(context) : StreamChatTheme.of(context).colorTheme.grey,
.colorTheme
.black
.withOpacity(.5),
), ),
border: UnderlineInputBorder( border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
@@ -213,20 +197,15 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
'User Token ${_userTokenError != null ? ': $_userTokenError' : ''}', 'User Token ${_userTokenError != null ? ': $_userTokenError' : ''}',
), ),
), ),
), SizedBox(height: 8),
Padding( TextFormField(
padding: const EdgeInsets.only(top: 8.0),
child: TextFormField(
controller: _usernameController, controller: _usernameController,
textInputAction: TextInputAction.done, textInputAction: TextInputAction.done,
decoration: InputDecoration( decoration: InputDecoration(
labelStyle: TextStyle( labelStyle: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: StreamChatTheme.of(context) color: StreamChatTheme.of(context).colorTheme.grey,
.colorTheme
.black
.withOpacity(.5),
), ),
border: UnderlineInputBorder( border: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
@@ -238,25 +217,10 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
labelText: 'Username (optional)', labelText: 'Username (optional)',
), ),
), ),
), Spacer(),
Expanded( RaisedButton(
child: Align( elevation: 0,
alignment: Alignment.bottomCenter, child: Text('Login', style: TextStyle(fontSize: 16)),
child: FlatButton(
color:
StreamChatTheme.of(context).colorTheme.accentBlue,
minWidth: double.infinity,
height: 48,
child: Text(
'Login',
style: TextStyle(
color: StreamChatTheme.of(context).colorTheme.white,
fontSize: 16,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(26),
),
onPressed: () async { onPressed: () async {
if (loading) { if (loading) {
return; return;
@@ -271,9 +235,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
showDialog( showDialog(
barrierDismissible: false, barrierDismissible: false,
context: context, context: context,
barrierColor: StreamChatTheme.of(context) barrierColor:
.colorTheme StreamChatTheme.of(context).colorTheme.overlay,
.overlay,
builder: (context) => Center( builder: (context) => Center(
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
@@ -294,8 +257,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
final client = Client( final client = Client(
apiKey, apiKey,
logLevel: Level.INFO, logLevel: Level.INFO,
showLocalNotification: showLocalNotification: (!kIsWeb && Platform.isAndroid)
(!kIsWeb && Platform.isAndroid)
? showLocalNotification ? showLocalNotification
: null, : null,
persistenceEnabled: true, persistenceEnabled: true,
@@ -369,8 +331,6 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
} }
}, },
), ),
),
),
StreamVersion(), StreamVersion(),
], ],
), ),
example/lib/choose_user_page.dart
+6 -6
View File
@@ -72,6 +72,7 @@ class ChooseUserPage extends StatelessWidget {
child: SvgPicture.asset( child: SvgPicture.asset(
'assets/logo.svg', 'assets/logo.svg',
height: 40, height: 40,
color: StreamChatTheme.of(context).colorTheme.accentBlue,
), ),
), ),
), ),
@@ -92,9 +93,8 @@ class ChooseUserPage extends StatelessWidget {
child: ListView.separated( child: ListView.separated(
separatorBuilder: (context, i) { separatorBuilder: (context, i) {
return Container( return Container(
width: double.infinity,
color: Colors.black12,
height: 1, height: 1,
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
); );
}, },
itemCount: users.length + 1, itemCount: users.length + 1,
@@ -180,10 +180,10 @@ class ChooseUserPage extends StatelessWidget {
.grey, .grey,
), ),
), ),
trailing: SvgPicture.asset( trailing: StreamSvgIcon.arrow_right(
'assets/icon_arrow_right.svg', color: StreamChatTheme.of(context)
height: 24, .colorTheme
width: 24, .accentBlue,
), ),
); );
}), }),
example/lib/stream_version.dart
+2 -3
View File
@@ -28,9 +28,8 @@ class StreamVersion extends StatelessWidget {
return Text( return Text(
'Stream SDK v ${streamChatDep}', 'Stream SDK v ${streamChatDep}',
style: TextStyle( style: TextStyle(
fontSize: 14.5, fontSize: 14,
color: color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
StreamChatTheme.of(context).colorTheme.black.withOpacity(.13),
), ),
); );
}, },
lib/src/stream_chat.dart
+1
View File
@@ -78,6 +78,7 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
primaryIconTheme: streamTheme.primaryIconTheme, primaryIconTheme: streamTheme.primaryIconTheme,
accentColor: streamTheme.colorTheme.accentBlue, accentColor: streamTheme.colorTheme.accentBlue,
scaffoldBackgroundColor: streamTheme.colorTheme.white, scaffoldBackgroundColor: streamTheme.colorTheme.white,
buttonTheme: streamTheme.buttonTheme,
), ),
child: widget.child, child: widget.child,
); );
lib/src/stream_chat_theme.dart
+19 -1
View File
@@ -45,6 +45,9 @@ class StreamChatThemeData {
/// The text themes used in the widgets /// The text themes used in the widgets
final TextTheme textTheme; final TextTheme textTheme;
/// The button themes used in the widgets
final ButtonThemeData buttonTheme;
/// The text themes used in the widgets /// The text themes used in the widgets
final ColorTheme colorTheme; final ColorTheme colorTheme;
@@ -75,6 +78,7 @@ class StreamChatThemeData {
/// Create a theme from scratch /// Create a theme from scratch
const StreamChatThemeData({ const StreamChatThemeData({
this.textTheme, this.textTheme,
this.buttonTheme,
this.colorTheme, this.colorTheme,
this.channelPreviewTheme, this.channelPreviewTheme,
this.channelTheme, this.channelTheme,
@@ -106,6 +110,7 @@ class StreamChatThemeData {
/// Creates a copy of [StreamChatThemeData] with specified attributes overridden. /// Creates a copy of [StreamChatThemeData] with specified attributes overridden.
StreamChatThemeData copyWith({ StreamChatThemeData copyWith({
TextTheme textTheme, TextTheme textTheme,
ButtonThemeData buttonTheme,
ColorTheme colorTheme, ColorTheme colorTheme,
ChannelPreviewTheme channelPreviewTheme, ChannelPreviewTheme channelPreviewTheme,
ChannelTheme channelTheme, ChannelTheme channelTheme,
@@ -118,6 +123,7 @@ class StreamChatThemeData {
}) => }) =>
StreamChatThemeData( StreamChatThemeData(
textTheme: textTheme ?? this.textTheme, textTheme: textTheme ?? this.textTheme,
buttonTheme: buttonTheme ?? this.buttonTheme,
colorTheme: colorTheme ?? this.colorTheme, colorTheme: colorTheme ?? this.colorTheme,
primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme, primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme,
defaultChannelImage: defaultChannelImage ?? this.defaultChannelImage, defaultChannelImage: defaultChannelImage ?? this.defaultChannelImage,
@@ -133,6 +139,7 @@ class StreamChatThemeData {
if (other == null) return this; if (other == null) return this;
return copyWith( return copyWith(
textTheme: textTheme?.merge(other.textTheme) ?? other.textTheme, textTheme: textTheme?.merge(other.textTheme) ?? other.textTheme,
buttonTheme: other.buttonTheme,
colorTheme: colorTheme?.merge(other.colorTheme) ?? other.colorTheme, colorTheme: colorTheme?.merge(other.colorTheme) ?? other.colorTheme,
primaryIconTheme: other.primaryIconTheme, primaryIconTheme: other.primaryIconTheme,
defaultChannelImage: other.defaultChannelImage, defaultChannelImage: other.defaultChannelImage,
@@ -159,6 +166,17 @@ class StreamChatThemeData {
return StreamChatThemeData( return StreamChatThemeData(
textTheme: textTheme, textTheme: textTheme,
colorTheme: colorTheme, colorTheme: colorTheme,
buttonTheme: ButtonThemeData(
height: 48.0,
buttonColor: isDark ? Color(0xffffffff) : Color(0xff006aff),
textTheme: ButtonTextTheme.accent,
colorScheme: theme.colorScheme.copyWith(
secondary: isDark ? Color(0xff005eff) : Color(0xffffffff),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(26),
),
),
primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)), primaryIconTheme: IconThemeData(color: colorTheme.black.withOpacity(.5)),
defaultChannelImage: (context, channel) => SizedBox(), defaultChannelImage: (context, channel) => SizedBox(),
defaultUserImage: (context, user) => Center( defaultUserImage: (context, user) => Center(
@@ -475,7 +493,7 @@ class ColorTheme {
this.white = const Color(0xffffffff), this.white = const Color(0xffffffff),
this.blueAlice = const Color(0xffe9f2ff), this.blueAlice = const Color(0xffe9f2ff),
this.accentBlue = const Color(0xff005FFF), this.accentBlue = const Color(0xff005FFF),
this.accentRed = const Color(0xffFF3742), this.accentRed = const Color(0xffFF3842),
this.accentGreen = const Color(0xff20E070), this.accentGreen = const Color(0xff20E070),
this.highlight = const Color(0xfffbf4dd), this.highlight = const Color(0xfffbf4dd),
this.overlay = const Color.fromRGBO(0, 0, 0, 0.2), this.overlay = const Color.fromRGBO(0, 0, 0, 0.2),