From c384588d5b1533e41412a27e0831d326a4c5e06e Mon Sep 17 00:00:00 2001 From: xsahil03x Date: Fri, 20 Nov 2020 17:55:55 +0530 Subject: [PATCH] UI nit picks --- example/lib/chips_input_text_field.dart | 9 +-- example/lib/main.dart | 78 +++++++++++++++------- example/lib/neumorphic_button.dart | 38 ++++------- lib/src/user_list_view.dart | 88 +++++++++---------------- 4 files changed, 102 insertions(+), 111 deletions(-) diff --git a/example/lib/chips_input_text_field.dart b/example/lib/chips_input_text_field.dart index e3b0eae7..695783d9 100644 --- a/example/lib/chips_input_text_field.dart +++ b/example/lib/chips_input_text_field.dart @@ -34,10 +34,8 @@ class ChipInputTextFieldState extends State> { bool _pauseItemAddition = false; void addItem(T item) { - if (!_pauseItemAddition) { - setState(() => _chips.add(item)); - if (widget.onChipAdded != null) widget.onChipAdded(item); - } + setState(() => _chips.add(item)); + if (widget.onChipAdded != null) widget.onChipAdded(item); } void removeItem(T item) { @@ -108,6 +106,9 @@ class ChipInputTextFieldState extends State> { disabledBorder: InputBorder.none, contentPadding: const EdgeInsets.only(top: 4.0), hintText: widget.hint, + hintStyle: TextStyle( + color: Colors.black.withOpacity(0.5), + ), ), ), ] diff --git a/example/lib/main.dart b/example/lib/main.dart index f187ac05..9cce3cf3 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -309,6 +309,7 @@ class _NewChatScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( + backgroundColor: Color.fromRGBO(252, 252, 252, 1), appBar: AppBar( elevation: 0, backgroundColor: Colors.white, @@ -367,7 +368,6 @@ class _NewChatScreenState extends State { ), if (!_isSearchActive) Container( - color: Colors.white54, child: InkWell( onTap: () { Navigator.push( @@ -375,23 +375,26 @@ class _NewChatScreenState extends State { MaterialPageRoute(builder: (_) => NewGroupChatScreen()), ); }, - child: Row( - children: [ - NeumorphicButton( - child: Icon( - StreamIcons.group, - color: Colors.blue.shade700, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 8), + child: Row( + children: [ + NeumorphicButton( + child: Icon( + StreamIcons.group, + color: Color(0xFF006CFF), + ), ), - ), - SizedBox(width: 8), - Text( - 'Create a Group', - style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 18, + SizedBox(width: 8), + Text( + 'Create a Group', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16, + ), ), - ), - ], + ], + ), ), ), ), @@ -425,20 +428,33 @@ class _NewChatScreenState extends State { ), Expanded( child: UserListView( - filterByUserName: _userNameQuery, selectedUsers: _selectedUsers, groupAlphabetically: _isSearchActive ? false : true, onUserTap: (user, _) { + _controller.clear(); if (!_selectedUsers.contains(user)) { - _controller.clear(); _chipInputTextFieldState ..addItem(user) ..pauseItemAddition(); + } else { + _chipInputTextFieldState.removeItem(user); } }, pagination: PaginationParams( limit: 25, ), + filter: { + if (_userNameQuery.isNotEmpty) + 'name': { + r'$autocomplete': _userNameQuery, + } + }, + sort: [ + SortOption( + 'name', + direction: 1, + ), + ], emptyBuilder: (_) { return LayoutBuilder( builder: (context, viewportConstraints) { @@ -541,6 +557,7 @@ class _NewGroupChatScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( + backgroundColor: Color.fromRGBO(252, 252, 252, 1), appBar: AppBar( elevation: 1, backgroundColor: Colors.white, @@ -555,7 +572,7 @@ class _NewGroupChatScreenState extends State { IconButton( icon: Icon( StreamIcons.arrow_right, - color: Colors.blue.shade700, + color: Color(0xFF006CFF), ), onPressed: () { Navigator.push( @@ -576,6 +593,7 @@ class _NewGroupChatScreenState extends State { Container( height: 36, decoration: BoxDecoration( + color: Colors.white, border: Border.all( color: Colors.grey.shade300, ), @@ -593,8 +611,10 @@ class _NewGroupChatScreenState extends State { color: Colors.black, ), hintText: 'Search', + hintStyle: TextStyle( + color: Colors.black.withOpacity(0.5), + ), contentPadding: const EdgeInsets.all(0), - // isDense: true, border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(24), @@ -696,7 +716,6 @@ class _NewGroupChatScreenState extends State { ), Expanded( child: UserListView( - filterByUserName: _userNameQuery, selectedUsers: _selectedUsers, groupAlphabetically: _isSearchActive ? false : true, onUserTap: (user, _) { @@ -709,6 +728,18 @@ class _NewGroupChatScreenState extends State { pagination: PaginationParams( limit: 25, ), + filter: { + if (_userNameQuery.isNotEmpty) + 'name': { + r'$autocomplete': _userNameQuery, + } + }, + sort: [ + SortOption( + 'name', + direction: 1, + ), + ], emptyBuilder: (_) { return LayoutBuilder( builder: (context, viewportConstraints) { @@ -797,6 +828,7 @@ class _GroupChatDetailsScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( + backgroundColor: Color.fromRGBO(252, 252, 252, 1), appBar: AppBar( elevation: 1, backgroundColor: Colors.white, @@ -840,12 +872,10 @@ class _GroupChatDetailsScreenState extends State { ), actions: [ NeumorphicButton( - padding: const EdgeInsets.all(8), - margin: const EdgeInsets.symmetric(vertical: 8), child: IconButton( padding: const EdgeInsets.all(0), icon: Icon(StreamIcons.check), - color: Colors.blue.shade700, + color: Color(0xFF006CFF), onPressed: _isGroupNameEmpty ? null : () async { diff --git a/example/lib/neumorphic_button.dart b/example/lib/neumorphic_button.dart index c738cecd..69454fb2 100644 --- a/example/lib/neumorphic_button.dart +++ b/example/lib/neumorphic_button.dart @@ -1,50 +1,38 @@ import 'package:flutter/material.dart'; -extension ColorUtils on Color { - Color mix(Color another, double amount) { - return Color.lerp(this, another, amount); - } -} - class NeumorphicButton extends StatelessWidget { final Widget child; final Color backgroundColor; - final EdgeInsets margin; - final EdgeInsets padding; const NeumorphicButton({ Key key, @required this.child, this.backgroundColor = Colors.white, - this.margin = const EdgeInsets.all(8), - this.padding = const EdgeInsets.all(14), }) : super(key: key); @override Widget build(BuildContext context) { return Container( child: child, - margin: margin, - padding: padding, + margin: EdgeInsets.all(8.0), + height: 40, + width: 40, decoration: BoxDecoration( - shape: BoxShape.circle, color: backgroundColor, - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - backgroundColor.mix(Colors.white, 0.2), - backgroundColor.mix(Colors.black, 0.1), - ]), + shape: BoxShape.circle, boxShadow: [ BoxShadow( - blurRadius: 1, - color: backgroundColor.mix(Colors.white, 0.6), + color: Colors.grey[700], + offset: Offset(0, 1.0), + blurRadius: 0.5, + spreadRadius: 0, ), BoxShadow( - blurRadius: 1, - color: backgroundColor.mix(Colors.black, 0.3), - ) + color: Colors.white, + offset: Offset.zero, + blurRadius: 0.5, + spreadRadius: 0, + ), ], ), ); diff --git a/lib/src/user_list_view.dart b/lib/src/user_list_view.dart index b35c1c68..b21e8c7d 100644 --- a/lib/src/user_list_view.dart +++ b/lib/src/user_list_view.dart @@ -1,7 +1,6 @@ import 'dart:convert'; import 'package:flutter/material.dart'; -import 'package:rxdart/rxdart.dart'; import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat_flutter/src/users_bloc.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; @@ -66,13 +65,7 @@ class UserListView extends StatefulWidget { this.swipeToAction = false, this.pullToRefresh = true, this.groupAlphabetically = false, - this.filterByUserName = '', - this.filterByUserNameStream, - }) : assert( - filterByUserName == null || filterByUserNameStream == null, - 'Cannot provide both filterByUserName and filterByUserNameStream.', - ), - super(key: key); + }) : super(key: key); /// The builder that will be used in case of error final Widget Function(Error error) errorBuilder; @@ -137,12 +130,6 @@ class UserListView extends StatefulWidget { /// defaults to false final bool groupAlphabetically; - /// - final String filterByUserName; - - /// - final Stream filterByUserNameStream; - @override _UserListViewState createState() => _UserListViewState(); } @@ -154,8 +141,8 @@ class _UserListViewState extends State @override void initState() { super.initState(); - final channelsBloc = UsersBloc.of(context); - channelsBloc.queryUsers( + final usersBloc = UsersBloc.of(context); + usersBloc.queryUsers( filter: widget.filter, sort: widget.sort, pagination: widget.pagination, @@ -163,9 +150,9 @@ class _UserListViewState extends State ); _scrollController.addListener(() { - channelsBloc.queryUsersLoading.first.then((loading) { + usersBloc.queryUsersLoading.first.then((loading) { if (!loading) { - _listenUserPagination(channelsBloc); + _listenUserPagination(usersBloc); } }); }); @@ -192,42 +179,28 @@ class _UserListViewState extends State ); } - List _getFilteredItems(List users, String query) { - if (widget.groupAlphabetically) { - var temp = users..sort((curr, next) => curr.name.compareTo(next.name)); - temp = temp - .where((it) => it.name.toLowerCase().contains(query.toLowerCase())) - .toList(); - final groupedUsers = >{}; - for (var e in temp) { - final alphabet = e.name[0]; - groupedUsers[alphabet] = [...groupedUsers[alphabet] ?? [], e]; - } - final items = []; - for (var key in groupedUsers.keys) { - items.add(ListHeaderItem(key)); - items.addAll(groupedUsers[key].map((e) => ListUserItem(e))); - } - return items; - } - return users - .where((it) => it.name.toLowerCase().contains(query.toLowerCase())) - .map((e) => ListUserItem(e)) - .toList(); - } - Stream> _buildUserStream( UsersBlocState usersBlocState, ) { - if (widget.filterByUserNameStream == null) { - return usersBlocState.usersStream.map( - (users) => _getFilteredItems(users, widget.filterByUserName), - ); - } - return Rx.combineLatest2( - usersBlocState.usersStream, - widget.filterByUserNameStream, - _getFilteredItems, + return usersBlocState.usersStream.map( + (users) { + if (widget.groupAlphabetically) { + var temp = users + ..sort((curr, next) => curr.name.compareTo(next.name)); + final groupedUsers = >{}; + for (var e in temp) { + final alphabet = e.name[0]; + groupedUsers[alphabet] = [...groupedUsers[alphabet] ?? [], e]; + } + final items = []; + for (var key in groupedUsers.keys) { + items.add(ListHeaderItem(key)); + items.addAll(groupedUsers[key].map((e) => ListUserItem(e))); + } + return items; + } + return users.map((e) => ListUserItem(e)).toList(); + }, ); } @@ -378,14 +351,13 @@ class _UserListViewState extends State key: ValueKey('HEADER-$header'), color: Colors.black.withOpacity(0.05), child: Padding( - padding: const EdgeInsets.symmetric(horizontal:8.0,vertical: 6), + padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 6), child: Text( header, style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 12, - color:Colors.black.withOpacity(0.3) - ), + fontWeight: FontWeight.bold, + fontSize: 12, + color: Colors.black.withOpacity(0.3)), ), ), ); @@ -469,8 +441,8 @@ class _UserListViewState extends State widget.pagination?.toJson()?.toString() != oldWidget.pagination?.toJson()?.toString() || widget.options?.toString() != oldWidget.options?.toString()) { - final channelsBloc = UsersBloc.of(context); - channelsBloc.queryUsers( + final usersBloc = UsersBloc.of(context); + usersBloc.queryUsers( filter: widget.filter, sort: widget.sort, pagination: widget.pagination,