diff --git a/README.md b/README.md index 9fb2bb5..3d1778d 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,10 @@ Contra flutter kit will be having screens developed in all the categories.(Curre +- Chat Screens + + + ## Mentions - Special thanks to [vijay verma](https://twitter.com/realvjy) for the awesome design kit. - Link to the wireframe official page [Contra wireframe kit](https://contrauikit.com/) diff --git a/assets/icons/arrow.svg b/assets/icons/arrow.svg deleted file mode 100644 index 6fc871f..0000000 --- a/assets/icons/arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/arrow_back.svg b/assets/icons/arrow_back.svg index 0d62795..6fc871f 100644 --- a/assets/icons/arrow_back.svg +++ b/assets/icons/arrow_back.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/assets/icons/arrow_forward.svg b/assets/icons/arrow_forward.svg new file mode 100644 index 0000000..0d62795 --- /dev/null +++ b/assets/icons/arrow_forward.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/ic_circle.svg b/assets/icons/ic_circle.svg new file mode 100644 index 0000000..d7428d8 --- /dev/null +++ b/assets/icons/ic_circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ic_circle_not_selected.svg b/assets/icons/ic_circle_not_selected.svg new file mode 100644 index 0000000..0d27043 --- /dev/null +++ b/assets/icons/ic_circle_not_selected.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ic_search.svg b/assets/icons/ic_search.svg new file mode 100644 index 0000000..840a2b7 --- /dev/null +++ b/assets/icons/ic_search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/ic_star.svg b/assets/icons/ic_star.svg new file mode 100644 index 0000000..e6c20e7 --- /dev/null +++ b/assets/icons/ic_star.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/peep_avatar.png b/assets/images/peep_avatar.png new file mode 100644 index 0000000..bbb7736 Binary files /dev/null and b/assets/images/peep_avatar.png differ diff --git a/assets/images/peep_avatar.svg b/assets/images/peep_avatar.svg new file mode 100644 index 0000000..d73da95 --- /dev/null +++ b/assets/images/peep_avatar.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/lib/chat/chat.dart b/lib/chat/chat.dart new file mode 100644 index 0000000..75f2a1f --- /dev/null +++ b/lib/chat/chat.dart @@ -0,0 +1,8 @@ +class Chat { + final String name; + final String message; + final String time; + final String count; + + const Chat({this.name, this.message, this.time, this.count}); +} diff --git a/lib/chat/chat_home_page.dart b/lib/chat/chat_home_page.dart new file mode 100644 index 0000000..34648d1 --- /dev/null +++ b/lib/chat/chat_home_page.dart @@ -0,0 +1,57 @@ +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import 'chat_list_page.dart'; + +class ChatHomePage extends StatefulWidget { + @override + _ChatHomePageState createState() => _ChatHomePageState(); +} + +class _ChatHomePageState extends State { + int _currentIndex = 0; + final List _childrenWidgets = [ + ChatListPage(), + ChatListPage(), + ChatListPage(), + ChatListPage() + ]; + + void _onItemTapped(int index) { + setState(() { + _currentIndex = index; + }); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: _childrenWidgets.elementAt(_currentIndex), + ), + bottomNavigationBar: BottomNavigationBar( + items: [ + BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")), + BottomNavigationBarItem( + icon: Icon(Icons.search), title: Text("Search")), + BottomNavigationBarItem( + icon: Icon(Icons.chat_bubble), title: Text("Chat")), + BottomNavigationBarItem(icon: Icon(Icons.info), title: Text("About")), + ], + currentIndex: _currentIndex, + onTap: _onItemTapped, + selectedItemColor: wood_smoke, + unselectedItemColor: trout, + showSelectedLabels: true, + showUnselectedLabels: true, + selectedIconTheme: IconThemeData(color: wood_smoke, opacity: 1), + unselectedIconTheme: IconThemeData(color: trout, opacity: 0.6), + selectedLabelStyle: TextStyle( + color: wood_smoke, fontSize: 12, fontWeight: FontWeight.w800), + unselectedLabelStyle: + TextStyle(color: trout, fontSize: 12, fontWeight: FontWeight.w800), + ), + ); + } +} diff --git a/lib/chat/chat_list_item.dart b/lib/chat/chat_list_item.dart new file mode 100644 index 0000000..2ae2fc8 --- /dev/null +++ b/lib/chat/chat_list_item.dart @@ -0,0 +1,93 @@ +import 'package:contraflutterkit/custom_widgets/badge_text.dart'; +import 'package:contraflutterkit/custom_widgets/image_round_text.dart'; +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import 'chat.dart'; + +class ChatListItemWidget extends StatelessWidget { + final Chat chat; + final VoidCallback callback; + + const ChatListItemWidget({this.chat, this.callback}); + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: callback, + child: Container( + padding: EdgeInsets.symmetric(vertical: 24), + child: Row( + children: [ + Expanded( + flex: 1, + child: RoundImageWithText( + size: 48, + text: chat.name.substring(0, 1), + color: dandelion, + borderColor: wood_smoke, + shadowColor: wood_smoke, + ), + ), + SizedBox( + width: 12, + ), + Expanded( + flex: 4, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + chat.name, + textAlign: TextAlign.start, + style: TextStyle( + fontSize: 21, + color: wood_smoke, + fontWeight: FontWeight.w800), + ), + SizedBox( + height: 6, + ), + Text( + chat.message, + textAlign: TextAlign.start, + style: TextStyle( + color: trout, + fontWeight: FontWeight.w500, + fontSize: 15), + ) + ], + ), + ), + Expanded( + flex: 1, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + chat.time, + style: TextStyle( + fontSize: 11, + color: santas_gray_10, + fontWeight: FontWeight.bold), + ), + SizedBox( + height: 10, + ), + chat.count.isNotEmpty + ? BadgeText( + text: chat.count, + color: flamingo, + ) + : SizedBox() + ], + ), + ) + ], + ), + ), + ); + } +} diff --git a/lib/chat/chat_list_page.dart b/lib/chat/chat_list_page.dart new file mode 100644 index 0000000..3041456 --- /dev/null +++ b/lib/chat/chat_list_page.dart @@ -0,0 +1,156 @@ +import 'package:contraflutterkit/chat/chat_messages_page.dart'; +import 'package:contraflutterkit/chat/chat_search_page.dart'; +import 'package:contraflutterkit/custom_widgets/custom_search_text.dart'; +import 'package:contraflutterkit/login/login_text.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import 'chat.dart'; +import 'chat_list_item.dart'; + +class ChatListPage extends StatefulWidget { + @override + _ChatListPageState createState() => _ChatListPageState(); +} + +class _ChatListPageState extends State { + List _items = List(); + TextEditingController _textEditingController = TextEditingController(); + + @override + void initState() { + super.initState(); + + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Chandran", + message: "Call me after 5", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Harray", + message: "No food left in the kitchen", + time: "3.30 AM", + count: "")); + _items.add(Chat( + name: "Leonard", + message: "Get groceries while coming", + time: "3.30 AM", + count: "")); + _items.add(Chat( + name: "Sheldon", + message: "Please have a look", + time: "3.30 AM", + count: "")); + _items.add(Chat( + name: "Chirag", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "4")); + _items.add(Chat( + name: "Karthick", + message: "Can we have coffe?", + time: "3.30 AM", + count: "4")); + _items.add(Chat( + name: "Murali", + message: "Lets meet tommorrow", + time: "3.30 AM", + count: "5")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + } + + @override + void dispose() { + _textEditingController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SingleChildScrollView( + child: Container( + padding: EdgeInsets.all(24), + child: Column( + children: [ + SizedBox( + height: 56, + ), + LoginText( + alignment: Alignment.centerLeft, + text: "Chat", + ), + SizedBox( + height: 24, + ), + CustomSearchText( + iconPath: "assets/icons/ic_search.svg", + text: "Search with love ...", + enable: false, + callback: () { + _launchSearchMessage(); + }, + controller: _textEditingController, + ), + ListView.builder( + shrinkWrap: true, + physics: NeverScrollableScrollPhysics(), + itemCount: _items.length, + itemBuilder: (BuildContext context, int index) { + return ChatListItemWidget( + chat: _items[index], + callback: () { + _launchChatMessage(_items[index]); + }, + ); + }) + ], + ), + ), + ), + ); + } + + _launchChatMessage(Chat item) { + Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) { + return ChatMessagesPage( + chat: item, + ); + })); + } + + _launchSearchMessage() { + Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) { + return ChatSearchPage(); + })); + } +} diff --git a/lib/chat/chat_message_item.dart b/lib/chat/chat_message_item.dart new file mode 100644 index 0000000..25ffc5f --- /dev/null +++ b/lib/chat/chat_message_item.dart @@ -0,0 +1,70 @@ +import 'package:contraflutterkit/chat/message.dart'; +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class ChatMessageItemWidget extends StatelessWidget { + final Message message; + final Color borderColor; + final Color textColor; + final Color color; + final bool isTimeStampSame; + + const ChatMessageItemWidget( + {this.message, + this.color, + this.isTimeStampSame, + this.borderColor, + this.textColor}); + + @override + Widget build(BuildContext context) { + print(isTimeStampSame); + return Container( + padding: isTimeStampSame + ? EdgeInsets.symmetric(vertical: 4) + : EdgeInsets.symmetric( + vertical: 16, + ), + child: Row( + mainAxisAlignment: + message.isUser ? MainAxisAlignment.end : MainAxisAlignment.start, + children: [ + !message.isUser + ? isTimeStampSame + ? SizedBox( + width: 48, + height: 48, + ) + : Image.asset( + "assets/images/peep_avatar.png", + width: 48, + height: 48, + ) + : SizedBox(), + SizedBox( + width: 12, + ), + Flexible( + child: Container( + padding: EdgeInsets.all(16), + decoration: ShapeDecoration( + color: message.isUser ? caribbean_color : color, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(16)), + side: BorderSide(color: borderColor, width: 2))), + child: Text( + message.message, + textAlign: TextAlign.start, + style: TextStyle( + color: textColor, + fontWeight: FontWeight.bold, + fontSize: 17), + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/chat/chat_messages_page.dart b/lib/chat/chat_messages_page.dart new file mode 100644 index 0000000..50ca59e --- /dev/null +++ b/lib/chat/chat_messages_page.dart @@ -0,0 +1,195 @@ +import 'package:contraflutterkit/chat/chat_message_item.dart'; +import 'package:contraflutterkit/chat/message.dart'; +import 'package:contraflutterkit/custom_widgets/button_round_with_shadow.dart'; +import 'package:contraflutterkit/custom_widgets/custom_app_bar.dart'; +import 'package:contraflutterkit/custom_widgets/custom_input_text.dart'; +import 'package:contraflutterkit/login/login_text.dart'; +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import 'chat.dart'; + +class ChatMessagesPage extends StatefulWidget { + final Chat chat; + + const ChatMessagesPage({this.chat}); + + @override + _ChatMessagesPageState createState() => _ChatMessagesPageState(); +} + +class _ChatMessagesPageState extends State { + List _items = List(); + + @override + void initState() { + super.initState(); + _items.add( + Message(name: "Charli", message: "Hi", time: "3.20 AM", isUser: false)); + _items.add(Message( + name: "Charli", + message: "How are you?", + time: "3.20 AM", + isUser: false)); + _items.add(Message( + name: "Charli", + message: "Its been long time", + time: "3.20 AM", + isUser: false)); + _items.add(Message( + name: "Charli", + message: "Please have a look", + time: "3.20 AM", + isUser: false)); + _items.add( + Message(name: "Charli", message: "Hey", time: "4.00 AM", isUser: true)); + _items.add(Message( + name: "Charli", + message: "Hi, I am good", + time: "4.00 AM", + isUser: true)); + _items.add(Message( + name: "Charli", + message: "I have completed the document", + time: "4.10 AM", + isUser: false)); + _items.add(Message( + name: "Charli", + message: "Will share with you", + time: "4.10 AM", + isUser: false)); + _items.add(Message( + name: "Charli", message: "Yes Please", time: "3.35 AM", isUser: true)); + _items.add(Message( + name: "Charli", + message: "Hello again", + time: "3.55 AM", + isUser: false)); + _items.add(Message( + name: "Charli", + message: "I have shared a file", + time: "3.55 AM", + isUser: false)); + _items.add(Message( + name: "Charli", + message: "Please take a look at it", + time: "3.55 AM", + isUser: false)); + _items.add(Message( + name: "Charli", message: "Sure", time: "3.35 AM", isUser: true)); + _items.add(Message( + name: "Charli", + message: "i will take a look at it", + time: "3.35 AM", + isUser: true)); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: white, + appBar: CustomAppBar( + height: 150, + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Expanded( + flex: 1, + child: Padding( + padding: const EdgeInsets.only(left: 24.0), + child: Align( + alignment: Alignment.bottomLeft, + child: ButtonRoundWithShadow( + size: 48, + borderColor: wood_smoke, + color: white, + callback: () { + Navigator.pop(context); + }, + shadowColor: wood_smoke, + iconPath: "assets/icons/arrow_back.svg"), + ), + ), + ), + Expanded( + flex: 1, + child: LoginText( + size: 27, + alignment: Alignment.bottomCenter, + text: widget.chat.name, + ), + ), + Expanded( + flex: 1, + child: SizedBox( + width: 20, + ), + ) + ], + ), + Container( + padding: EdgeInsets.only(top: 24), + alignment: Alignment.bottomCenter, + child: Divider( + color: wood_smoke, + thickness: 3, + height: 0, + ), + ) + ], + ), + ), + body: Container( + color: white, + child: Column( + children: [ + Flexible( + child: ListView.builder( + reverse: false, + itemCount: _items.length, + padding: EdgeInsets.all(24), + itemBuilder: (BuildContext context, int index) { + return ChatMessageItemWidget( + message: _items[index], + borderColor: wood_smoke, + textColor: wood_smoke, + color: lightening_yellow, + isTimeStampSame: isTimeStampSame(index), + ); + }), + ), + Container( + padding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + child: CustomInputText( + borderColor: wood_smoke, + color: white, + shadowColor: wood_smoke, + text: "Type your message", + callback: () {}, + ), + ) + ], + ), + ), + ); + } + + bool isTimeStampSame(int index) { + bool val = false; + if (index > 0) { + Message current = _items[index]; + Message previous = _items[index - 1] != null ? _items[index - 1] : null; + if (previous != null) { + if (previous.time == current.time) { + val = true; + } + } + } + return val; + } +} diff --git a/lib/chat/chat_search_item.dart b/lib/chat/chat_search_item.dart new file mode 100644 index 0000000..3165ce2 --- /dev/null +++ b/lib/chat/chat_search_item.dart @@ -0,0 +1,59 @@ +import 'package:contraflutterkit/custom_widgets/image_round_text.dart'; +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import 'chat.dart'; + +class ChatSearchItemWidget extends StatelessWidget { + final Chat chat; + final Color borderColor; + final Color textColor; + final Color color; + + const ChatSearchItemWidget( + {this.chat, this.color, this.borderColor, this.textColor}); + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.symmetric(vertical: 24), + child: Row( + children: [ + Expanded( + flex: 1, + child: RoundImageWithText( + size: 54, + text: chat.name.substring(0, 1), + color: dandelion, + borderColor: wood_smoke, + shadowColor: wood_smoke, + ), + ), + SizedBox( + width: 12, + ), + Expanded( + flex: 3, + child: Text( + chat.name, + textAlign: TextAlign.start, + style: TextStyle( + color: textColor, fontWeight: FontWeight.bold, fontSize: 17), + ), + ), + Expanded( + flex: 1, + child: Text( + chat.time, + style: TextStyle( + fontSize: 11, + color: santas_gray_10, + fontWeight: FontWeight.bold), + ), + ), + ], + ), + ); + } +} diff --git a/lib/chat/chat_search_page.dart b/lib/chat/chat_search_page.dart new file mode 100644 index 0000000..064ae1e --- /dev/null +++ b/lib/chat/chat_search_page.dart @@ -0,0 +1,178 @@ +import 'package:contraflutterkit/chat/chat_search_item.dart'; +import 'package:contraflutterkit/custom_widgets/button_round_with_shadow.dart'; +import 'package:contraflutterkit/custom_widgets/custom_app_bar.dart'; +import 'package:contraflutterkit/custom_widgets/custom_search_text.dart'; +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import 'chat.dart'; + +class ChatSearchPage extends StatefulWidget { + const ChatSearchPage(); + + @override + _ChatSearchPageState createState() => _ChatSearchPageState(); +} + +class _ChatSearchPageState extends State { + List _items = List(); + List _filtered = List(); + TextEditingController _textEditingController = TextEditingController(); + + @override + void initState() { + super.initState(); + _textEditingController.addListener(_searchTextValue); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Chandran", + message: "Call me after 5", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Harray", + message: "No food left in the kitchen", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Leonard", + message: "Get groceries while coming", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Sheldon", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Chirag", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Karthick", + message: "Can we have coffe?", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Murali", + message: "Lets meet tommorrow", + time: "3.30 AM", + count: "5")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _items.add(Chat( + name: "Charli", + message: "Please have a look", + time: "3.30 AM", + count: "2")); + _filtered = _items; + } + + @override + void dispose() { + _textEditingController.dispose(); + super.dispose(); + } + + _searchTextValue() { + print("search field: ${_textEditingController.text}"); + if (_textEditingController.text.isEmpty) { + setState(() { + _filtered = _items; + }); + return; + } + List tempList = new List(); + for (int i = 0; i < _filtered.length; i++) { + if (_filtered[i] + .name + .toLowerCase() + .contains(_textEditingController.text.toLowerCase())) { + tempList.add(_filtered[i]); + } + } + setState(() { + _filtered = tempList; + }); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: white, + appBar: CustomAppBar( + height: 140, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 24.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Expanded( + child: CustomSearchText( + iconPath: "assets/icons/ic_search.svg", + text: "Search with love ...", + enable: true, + callback: () {}, + controller: _textEditingController, + ), + ), + Padding( + padding: const EdgeInsets.only(left: 24.0, bottom: 8), + child: Align( + alignment: Alignment.bottomCenter, + child: ButtonRoundWithShadow( + size: 48, + borderColor: wood_smoke, + color: white, + callback: () { + Navigator.pop(context); + }, + shadowColor: wood_smoke, + iconPath: "assets/icons/close.svg"), + ), + ), + ], + ), + ), + ), + body: Container( + color: white, + child: ListView.builder( + itemCount: _filtered.length, + padding: EdgeInsets.all(24), + itemBuilder: (BuildContext context, int index) { + return ChatSearchItemWidget( + chat: _filtered[index], + borderColor: wood_smoke, + textColor: wood_smoke, + color: lightening_yellow, + ); + }), + ), + ); + } +} diff --git a/lib/chat/message.dart b/lib/chat/message.dart new file mode 100644 index 0000000..1ecab14 --- /dev/null +++ b/lib/chat/message.dart @@ -0,0 +1,8 @@ +class Message { + final String name; + final String message; + final String time; + final bool isUser; + + const Message({this.name, this.message, this.time, this.isUser}); +} diff --git a/lib/custom_widgets/badge_text.dart b/lib/custom_widgets/badge_text.dart new file mode 100644 index 0000000..470d327 --- /dev/null +++ b/lib/custom_widgets/badge_text.dart @@ -0,0 +1,32 @@ +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; + +class BadgeText extends StatelessWidget { + final Color color; + final String text; + final double size; + + const BadgeText({ + this.color, + this.text, + this.size, + }); + + @override + Widget build(BuildContext context) { + return Container( + height: 24, + width: 24, + decoration: ShapeDecoration( + color: color, + shape: CircleBorder(side: BorderSide(color: color, width: 2))), + child: Center( + child: Text( + text, + style: TextStyle( + color: white, fontWeight: FontWeight.bold, fontSize: 12), + ), + ), + ); + } +} diff --git a/lib/custom_widgets/button_round_with_shadow.dart b/lib/custom_widgets/button_round_with_shadow.dart index 47b6620..9856013 100644 --- a/lib/custom_widgets/button_round_with_shadow.dart +++ b/lib/custom_widgets/button_round_with_shadow.dart @@ -7,12 +7,14 @@ class ButtonRoundWithShadow extends StatelessWidget { final Color color; final String iconPath; final VoidCallback callback; + final double size; const ButtonRoundWithShadow( {this.borderColor, this.shadowColor, this.color, this.iconPath, + this.size, this.callback}); @override @@ -20,7 +22,9 @@ class ButtonRoundWithShadow extends StatelessWidget { return GestureDetector( onTap: callback, child: Container( - padding: EdgeInsets.all(16), + height: size == null ? null : size, + width: size == null ? null : size, + padding: EdgeInsets.all(size != null ? 8 : 16), decoration: ShapeDecoration( shadows: [ BoxShadow( diff --git a/lib/custom_widgets/custom_app_bar.dart b/lib/custom_widgets/custom_app_bar.dart new file mode 100644 index 0000000..e15099b --- /dev/null +++ b/lib/custom_widgets/custom_app_bar.dart @@ -0,0 +1,20 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CustomAppBar extends PreferredSize { + final double height; + final Widget child; + + CustomAppBar({@required this.height, this.child}); + + @override + Size get preferredSize => Size.fromHeight(height); + + @override + Widget build(BuildContext context) { + return Container( + height: preferredSize.height, + alignment: Alignment.bottomCenter, + child: child); + } +} diff --git a/lib/custom_widgets/custom_input_text.dart b/lib/custom_widgets/custom_input_text.dart new file mode 100644 index 0000000..bbfbf27 --- /dev/null +++ b/lib/custom_widgets/custom_input_text.dart @@ -0,0 +1,68 @@ +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class CustomInputText extends StatelessWidget { + final String text; + final Color borderColor; + final Color shadowColor; + final Color color; + final VoidCallback callback; + + + const CustomInputText( + {this.text, + this.borderColor, + this.color, + this.shadowColor, + this.callback}); + + @override + Widget build(BuildContext context) { + return Container( + decoration: ShapeDecoration( + color: color, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(60)), + side: BorderSide(color: borderColor, width: 2))), + child: Row( + children: [ + Expanded( + child: TextField( + decoration: InputDecoration( + hintText: text, + hintStyle: TextStyle( + fontSize: 17, + fontWeight: FontWeight.w500, + color: santas_gray), + contentPadding: EdgeInsets.all(16), + enabledBorder: OutlineInputBorder( + borderSide: BorderSide.none, + ), + disabledBorder: OutlineInputBorder( + borderSide: BorderSide.none, + ), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide.none, + ), + border: OutlineInputBorder( + borderSide: BorderSide.none, + ), + ), + ), + ), + IconButton( + color: wood_smoke, + icon: Icon(Icons.keyboard_voice), + onPressed: () {}, + ), + IconButton( + color: wood_smoke, + icon: Icon(Icons.send), + onPressed: callback, + ) + ], + ), + ); + } +} diff --git a/lib/custom_widgets/custom_search_text.dart b/lib/custom_widgets/custom_search_text.dart new file mode 100644 index 0000000..9bec351 --- /dev/null +++ b/lib/custom_widgets/custom_search_text.dart @@ -0,0 +1,68 @@ +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; + +class CustomSearchText extends StatelessWidget { + final String text; + final String iconPath; + final bool enable; + final VoidCallback callback; + final TextEditingController controller; + + const CustomSearchText( + {this.text, this.iconPath, this.enable, this.callback, this.controller}); + + @override + Widget build(BuildContext context) { + return Container( + decoration: ShapeDecoration( + shadows: [ + BoxShadow( + color: wood_smoke, + offset: Offset( + 0.0, // Move to right 10 horizontally + 2.0, // Move to bottom 5 Vertically + ), + ) + ], + color: white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(16)), + side: BorderSide(color: wood_smoke, width: 2))), + child: TextField( + onTap: callback, + readOnly: !enable, + enableInteractiveSelection: enable, + autofocus: false, + controller: controller, + enableSuggestions: enable, + decoration: InputDecoration( + hintText: text, + hintStyle: TextStyle( + fontSize: 21, fontWeight: FontWeight.w500, color: wood_smoke), + contentPadding: EdgeInsets.all(16), + enabledBorder: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.all(Radius.circular(16))), + disabledBorder: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.all(Radius.circular(16))), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.all(Radius.circular(16))), + border: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.all(Radius.circular(16))), + suffixIcon: Padding( + padding: const EdgeInsets.all(16.0), + child: SvgPicture.asset( + iconPath, + height: 24, + width: 24, + ), + )), + ), + ); + } +} diff --git a/lib/custom_widgets/image_round_text.dart b/lib/custom_widgets/image_round_text.dart new file mode 100644 index 0000000..c0f2482 --- /dev/null +++ b/lib/custom_widgets/image_round_text.dart @@ -0,0 +1,35 @@ +import 'package:contraflutterkit/utils/colors.dart'; +import 'package:flutter/cupertino.dart'; + +class RoundImageWithText extends StatelessWidget { + final Color borderColor; + final Color shadowColor; + final Color color; + final String text; + final double size; + + const RoundImageWithText({ + this.borderColor, + this.shadowColor, + this.color, + this.size, + this.text, + }); + + @override + Widget build(BuildContext context) { + return Container( + width: size, + height: size, + decoration: ShapeDecoration( + color: color, + shape: CircleBorder(side: BorderSide(color: borderColor, width: 2))), + child: Center( + child: Text( + text, + style: + TextStyle(fontSize: 24, fontWeight: FontWeight.w800, color: white), + )), + ); + } +} diff --git a/lib/login/login_text.dart b/lib/login/login_text.dart index 666bb2d..88ec11c 100644 --- a/lib/login/login_text.dart +++ b/lib/login/login_text.dart @@ -4,8 +4,9 @@ import 'package:flutter/cupertino.dart'; class LoginText extends StatelessWidget { final Alignment alignment; final String text; + final double size; - const LoginText({this.alignment, this.text}); + const LoginText({this.alignment, this.text, this.size}); @override Widget build(BuildContext context) { @@ -13,8 +14,11 @@ class LoginText extends StatelessWidget { alignment: alignment, child: Text( text, - style: - TextStyle(fontSize: 36, fontWeight: FontWeight.w800, color: black), + maxLines: 1, + style: TextStyle( + fontSize: size == null ? 36 : size, + fontWeight: FontWeight.w800, + color: black), ), ); } diff --git a/lib/login/verification_type.dart b/lib/login/verification_type.dart index 1b95e66..f87eed8 100644 --- a/lib/login/verification_type.dart +++ b/lib/login/verification_type.dart @@ -254,7 +254,7 @@ class VerificationType extends StatelessWidget { ButtonPlainWithIcon( color: wood_smoke, textColor: white, - iconPath: "assets/icons/arrow_back.svg", + iconPath: "assets/icons/arrow_forward.svg", isPrefix: false, isSuffix: false, text: "Verify", @@ -272,7 +272,7 @@ class VerificationType extends StatelessWidget { child: Row( children: [ ButtonRoundWithShadow( - iconPath: "assets/icons/arrow.svg", + iconPath: "assets/icons/arrow_forward.svg", borderColor: black, shadowColor: black, color: white, diff --git a/lib/main.dart b/lib/main.dart index c63123d..b2381e3 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,3 +1,6 @@ +import 'package:contraflutterkit/chat/chat_home_page.dart'; +import 'package:contraflutterkit/chat/chat_list_page.dart'; +import 'package:contraflutterkit/chat/chat_messages_page.dart'; import 'package:contraflutterkit/login/login_form_one.dart'; import 'package:contraflutterkit/login/login_form_two.dart'; import 'package:contraflutterkit/login/login_main.dart'; @@ -47,6 +50,9 @@ class MyApp extends StatelessWidget { '/signin_type_one': (context) => SignInFormTypeOne(), '/login__type_verification': (context) => VerificationType(), '/contact_us_form': (context) => ContactUsForm(), + '/chat_home': (context) => ChatHomePage(), + '/chat_screen_page': (context) => ChatListPage(), + '/chat_list_page': (context) => ChatMessagesPage(), }, ); } @@ -93,7 +99,7 @@ class _MyHomePageState extends State { trailing: Icon(Icons.navigate_next), title: Text("Chatting Screens"), onTap: () { - Navigator.pushNamed(context, "/empty_state"); + Navigator.pushNamed(context, "/chat_home"); }, ), Container( diff --git a/lib/onboarding/type2/pager.dart b/lib/onboarding/type2/pager.dart index 3d4c051..7994357 100644 --- a/lib/onboarding/type2/pager.dart +++ b/lib/onboarding/type2/pager.dart @@ -124,7 +124,7 @@ class _OnboardingPagerTypeTwoState extends State { color: lightening_yellow, shape: CircleBorder( side: BorderSide(color: wood_smoke, width: 2))), - child: SvgPicture.asset("assets/icons/arrow_back.svg"), + child: SvgPicture.asset("assets/icons/arrow_forward.svg"), ), ) ], diff --git a/lib/utils/colors.dart b/lib/utils/colors.dart index c96ff81..011814e 100644 --- a/lib/utils/colors.dart +++ b/lib/utils/colors.dart @@ -11,3 +11,6 @@ const trout = Color(0xFF474A57); const santas_gray = Color(0xFF969BAB); const selago = Color(0xFFE9E7FC); const carribean_green = Color(0xFF00C6AE); +const santas_gray_10 = Color(0xFF9FA4B4); +const dandelion = Color(0xFFFFD465); +const caribbean_color = Color(0xFF00C6AE); diff --git a/screenshots/chat_home_page.jpg b/screenshots/chat_home_page.jpg new file mode 100755 index 0000000..0f5063f Binary files /dev/null and b/screenshots/chat_home_page.jpg differ diff --git a/screenshots/chat_message_page.jpg b/screenshots/chat_message_page.jpg new file mode 100755 index 0000000..49b5a7d Binary files /dev/null and b/screenshots/chat_message_page.jpg differ diff --git a/screenshots/chat_search_page.jpg b/screenshots/chat_search_page.jpg new file mode 100755 index 0000000..294d3c0 Binary files /dev/null and b/screenshots/chat_search_page.jpg differ