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

UI nit picks

Browse Source
This commit is contained in:
xsahil03x
2020-11-20 17:55:55 +05:30
parent 389656a477
commit c384588d5b
4 changed files with 102 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/chips_input_text_field.dart
+5 -4
View File
@@ -34,10 +34,8 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
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<T> extends State<ChipsInputTextField<T>> {
disabledBorder: InputBorder.none,
contentPadding: const EdgeInsets.only(top: 4.0),
hintText: widget.hint,
hintStyle: TextStyle(
color: Colors.black.withOpacity(0.5),
),
),
),
]
example/lib/main.dart
+54 -24
View File
@@ -309,6 +309,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
@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<NewChatScreen> {
),
if (!_isSearchActive)
Container(
color: Colors.white54,
child: InkWell(
onTap: () {
Navigator.push(
@@ -375,23 +375,26 @@ class _NewChatScreenState extends State<NewChatScreen> {
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<NewChatScreen> {
),
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<NewGroupChatScreen> {
@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<NewGroupChatScreen> {
IconButton(
icon: Icon(
StreamIcons.arrow_right,
color: Colors.blue.shade700,
color: Color(0xFF006CFF),
),
onPressed: () {
Navigator.push(
@@ -576,6 +593,7 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
Container(
height: 36,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.grey.shade300,
),
@@ -593,8 +611,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
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<NewGroupChatScreen> {
),
Expanded(
child: UserListView(
filterByUserName: _userNameQuery,
selectedUsers: _selectedUsers,
groupAlphabetically: _isSearchActive ? false : true,
onUserTap: (user, _) {
@@ -709,6 +728,18 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
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<GroupChatDetailsScreen> {
@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<GroupChatDetailsScreen> {
),
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 {
example/lib/neumorphic_button.dart
+13 -25
View File
@@ -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,
),
],
),
);