diff --git a/example/lib/chips_input_text_field.dart b/example/lib/chips_input_text_field.dart index e62773f7..e3b0eae7 100644 --- a/example/lib/chips_input_text_field.dart +++ b/example/lib/chips_input_text_field.dart @@ -64,24 +64,20 @@ class ChipInputTextFieldState extends State> { @override Widget build(BuildContext context) { return Material( - elevation: 4, + elevation: 1, color: Colors.white, child: Container( child: Padding( - padding: const EdgeInsets.symmetric( - vertical: 16.0, - horizontal: 16.0, - ), + padding: const EdgeInsets.fromLTRB(16, 16, 16, 16), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( - padding: const EdgeInsets.symmetric(vertical: 10.0), + padding: const EdgeInsets.symmetric(vertical: 4.0), child: Text( 'TO:', style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, + color: Colors.black.withOpacity(0.5), ), ), ), @@ -92,46 +88,48 @@ class ChipInputTextFieldState extends State> { mainAxisSize: MainAxisSize.min, children: [ Wrap( - spacing: 4.0, + spacing: 8.0, runSpacing: 4.0, children: _chips.map((item) { return widget.chipBuilder(context, item); }).toList(), ), if (!_pauseItemAddition) ...[ - if (_chips.isNotEmpty) SizedBox(height: 4), TextField( controller: widget.controller, onChanged: widget.onInputChanged, focusNode: widget.focusNode, - style: TextStyle(fontSize: 18), decoration: InputDecoration( - isDense: true, - border: InputBorder.none, - focusedBorder: InputBorder.none, - enabledBorder: InputBorder.none, - errorBorder: InputBorder.none, - disabledBorder: InputBorder.none, - contentPadding: const EdgeInsets.symmetric( - vertical: 8, - ), - hintText: widget.hint, - hintStyle: TextStyle(fontSize: 18)), + isDense: true, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + errorBorder: InputBorder.none, + disabledBorder: InputBorder.none, + contentPadding: const EdgeInsets.only(top: 4.0), + hintText: widget.hint, + ), ), ] ], ), ), - SizedBox(width: 12), IconButton( icon: Icon( _chips.isEmpty ? StreamIcons.user : StreamIcons.user_add, + color: Colors.black.withOpacity(0.5), ), onPressed: () { resumeItemAddition(); }, + alignment: Alignment.topRight, visualDensity: VisualDensity.compact, padding: const EdgeInsets.all(0), + splashRadius: 24, + constraints: BoxConstraints.tightFor( + height: 24, + width: 24, + ), ), ], ), diff --git a/example/lib/main.dart b/example/lib/main.dart index baddd1ee..f187ac05 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -312,10 +312,12 @@ class _NewChatScreenState extends State { appBar: AppBar( elevation: 0, backgroundColor: Colors.white, + leading: const StreamBackButton(), title: Text( 'New Chat', style: TextStyle(color: Colors.black), ), + centerTitle: true, ), body: StreamChannel( showLoading: false, @@ -329,17 +331,31 @@ class _NewChatScreenState extends State { controller: _controller, focusNode: FocusNode(), chipBuilder: (context, user) { - return InputChip( - key: ObjectKey(user), - label: Text( - user.name, - style: TextStyle(color: Colors.black), - ), - avatar: UserAvatar( - user: user, - ), - onDeleted: () => _chipInputTextFieldState.removeItem(user), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + return Stack( + alignment: AlignmentDirectional.centerStart, + children: [ + Container( + decoration: BoxDecoration( + color: Colors.black.withOpacity(0.05), + borderRadius: BorderRadius.circular(12), + ), + padding: const EdgeInsets.only(left: 24), + child: Padding( + padding: const EdgeInsets.fromLTRB(8, 4, 12, 4), + child: Text( + user.name, + style: TextStyle(color: Colors.black), + ), + ), + ), + UserAvatar( + user: user, + constraints: BoxConstraints.tightFor( + height: 24, + width: 24, + ), + ), + ], ); }, onChipAdded: (user) { @@ -381,7 +397,17 @@ class _NewChatScreenState extends State { ), Container( width: double.maxFinite, - color: Colors.grey.shade50, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [ + Colors.black.withOpacity(0.02), + Colors.white.withOpacity(0.05), + ], + stops: [0, 1], + ), + ), child: Padding( padding: const EdgeInsets.symmetric( vertical: 8, @@ -392,7 +418,7 @@ class _NewChatScreenState extends State { ? "Matches for \"$_userNameQuery\"" : 'On the platform', style: TextStyle( - fontWeight: FontWeight.w500, + color: Colors.black.withOpacity(0.5), ), ), ), @@ -516,12 +542,14 @@ class _NewGroupChatScreenState extends State { Widget build(BuildContext context) { return Scaffold( appBar: AppBar( - elevation: 2, + elevation: 1, backgroundColor: Colors.white, + leading: const StreamBackButton(), title: Text( 'Add Group Members', style: TextStyle(color: Colors.black), ), + centerTitle: true, actions: [ if (_selectedUsers.isNotEmpty) IconButton( @@ -546,6 +574,7 @@ class _NewGroupChatScreenState extends State { child: Column( children: [ Container( + height: 36, decoration: BoxDecoration( border: Border.all( color: Colors.grey.shade300, @@ -559,9 +588,13 @@ class _NewGroupChatScreenState extends State { child: TextField( controller: _controller, decoration: InputDecoration( - prefixIcon: Icon(StreamIcons.search), + prefixIcon: Icon( + StreamIcons.search, + color: Colors.black, + ), hintText: 'Search', - contentPadding: const EdgeInsets.all(8), + contentPadding: const EdgeInsets.all(0), + // isDense: true, border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(24), @@ -571,7 +604,7 @@ class _NewGroupChatScreenState extends State { ), if (_selectedUsers.isNotEmpty) Container( - height: 120, + height: 104, child: ListView.separated( scrollDirection: Axis.horizontal, itemCount: _selectedUsers.length, @@ -586,10 +619,10 @@ class _NewGroupChatScreenState extends State { UserAvatar( user: user, showOnlineStatus: true, - borderRadius: BorderRadius.circular(40), + borderRadius: BorderRadius.circular(32), constraints: BoxConstraints.tightFor( - height: 80, - width: 80, + height: 64, + width: 64, ), ), Positioned( @@ -609,10 +642,10 @@ class _NewGroupChatScreenState extends State { Border.all(color: Colors.grey.shade100), ), child: Padding( - padding: const EdgeInsets.all(4.0), + padding: const EdgeInsets.all(2.0), child: Icon( Icons.clear_rounded, - size: 16, + size: 14, ), ), ), @@ -624,8 +657,8 @@ class _NewGroupChatScreenState extends State { Text( user.name.split(' ')[0], style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 16, + fontWeight: FontWeight.bold, + fontSize: 12, ), ), ], @@ -635,7 +668,17 @@ class _NewGroupChatScreenState extends State { ), Container( width: double.maxFinite, - color: Colors.grey.shade50, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [ + Colors.black.withOpacity(0.02), + Colors.white.withOpacity(0.05), + ], + stops: [0, 1], + ), + ), child: Padding( padding: const EdgeInsets.symmetric( vertical: 8, @@ -646,7 +689,7 @@ class _NewGroupChatScreenState extends State { ? 'Matches for \"$_userNameQuery\"' : 'On the platform', style: TextStyle( - fontWeight: FontWeight.w500, + color: Colors.black.withOpacity(0.5), ), ), ), @@ -755,42 +798,40 @@ class _GroupChatDetailsScreenState extends State { Widget build(BuildContext context) { return Scaffold( appBar: AppBar( - elevation: 2, + elevation: 1, backgroundColor: Colors.white, + leading: const StreamBackButton(), title: Text( 'Name of Group Chat', style: TextStyle(color: Colors.black), ), + centerTitle: true, bottom: PreferredSize( preferredSize: Size.fromHeight(kToolbarHeight), child: Padding( - padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16), + padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 16), child: Row( children: [ Text( 'NAME', style: TextStyle( - fontWeight: FontWeight.w500, - fontSize: 16, + color: Colors.black.withOpacity(0.5), ), ), SizedBox(width: 16), Expanded( child: TextField( controller: _groupNameController, - style: TextStyle(fontSize: 18), decoration: InputDecoration( - isDense: true, - border: InputBorder.none, - focusedBorder: InputBorder.none, - enabledBorder: InputBorder.none, - errorBorder: InputBorder.none, - disabledBorder: InputBorder.none, - contentPadding: const EdgeInsets.symmetric( - vertical: 8, - ), - hintText: 'Choose a group chat name', - hintStyle: TextStyle(fontSize: 18)), + isDense: true, + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + errorBorder: InputBorder.none, + disabledBorder: InputBorder.none, + contentPadding: const EdgeInsets.all(0), + hintText: 'Choose a group chat name', + ), ), ), ], diff --git a/lib/src/user_item.dart b/lib/src/user_item.dart index d4331cf8..0c320b7c 100644 --- a/lib/src/user_item.dart +++ b/lib/src/user_item.dart @@ -59,13 +59,18 @@ class UserItem extends StatelessWidget { } }, leading: UserAvatar( - user: user, - showOnlineStatus: true, - onTap: (user) { - if (onImageTap != null) { - onImageTap(user); - } - }), + user: user, + showOnlineStatus: true, + onTap: (user) { + if (onImageTap != null) { + onImageTap(user); + } + }, + constraints: BoxConstraints.tightFor( + height: 40, + width: 40, + ), + ), trailing: selected ? CircleAvatar( child: Icon( @@ -75,7 +80,7 @@ class UserItem extends StatelessWidget { radius: 10, ) : null, - title: Text(user.name), + title: Text(user.name,style: TextStyle(fontWeight: FontWeight.bold),), subtitle: showLastSeen ? _buildLastActive(context) : null, ); } diff --git a/lib/src/user_list_view.dart b/lib/src/user_list_view.dart index 4a3ae96c..b35c1c68 100644 --- a/lib/src/user_list_view.dart +++ b/lib/src/user_list_view.dart @@ -376,12 +376,16 @@ class _UserListViewState extends State headerItem: (header) { return Container( key: ValueKey('HEADER-$header'), - color: Colors.grey.shade100, + color: Colors.black.withOpacity(0.05), child: Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.symmetric(horizontal:8.0,vertical: 6), child: Text( header, - style: TextStyle(fontWeight: FontWeight.w500), + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 12, + color:Colors.black.withOpacity(0.3) + ), ), ), );