diff --git a/example/lib/chips_input_text_field.dart b/example/lib/chips_input_text_field.dart index e62773f7..ef8229c8 100644 --- a/example/lib/chips_input_text_field.dart +++ b/example/lib/chips_input_text_field.dart @@ -64,7 +64,7 @@ class ChipInputTextFieldState extends State> { @override Widget build(BuildContext context) { return Material( - elevation: 4, + elevation: 2, color: Colors.white, child: Container( child: Padding( diff --git a/example/lib/main.dart b/example/lib/main.dart index 0be01886..f681129d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -9,6 +9,7 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'chips_input_text_field.dart'; import 'notifications_service.dart'; +import 'neumorphic_button.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); @@ -487,9 +488,34 @@ class _NewChatScreenState extends State { setState(() => _selectedUsers.remove(user)); }, ), + if (!_isSearchActive) + Container( + color: Colors.white54, + child: InkWell( + onTap: () {}, + child: Row( + children: [ + NeumorphicButton( + child: Icon( + StreamIcons.group, + color: Colors.blue.shade700, + ), + ), + SizedBox(width: 8), + Text( + 'Create a Group', + style: TextStyle( + fontWeight: FontWeight.w500, + fontSize: 18, + ), + ), + ], + ), + ), + ), Container( width: double.maxFinite, - color: Colors.white54, + color: Colors.grey.shade50, child: Padding( padding: const EdgeInsets.symmetric( vertical: 8, diff --git a/example/lib/neumorphic_button.dart b/example/lib/neumorphic_button.dart new file mode 100644 index 00000000..c738cecd --- /dev/null +++ b/example/lib/neumorphic_button.dart @@ -0,0 +1,52 @@ +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, + 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), + ]), + boxShadow: [ + BoxShadow( + blurRadius: 1, + color: backgroundColor.mix(Colors.white, 0.6), + ), + BoxShadow( + blurRadius: 1, + color: backgroundColor.mix(Colors.black, 0.3), + ) + ], + ), + ); + } +}