From afd259b3c7b0d45a0da5fda2b591f264f2182ef4 Mon Sep 17 00:00:00 2001 From: Huzaifa Ahmed Date: Sat, 2 May 2020 00:47:50 +0500 Subject: [PATCH] DAY - 06 - make chat list screen with swipeable --- assets/images/doubletick.png | Bin 0 -> 1093 bytes lib/screens/TabScreens/ChatsListScreen.dart | 117 +++++++++++++++----- lib/widgets/BuilderMethodsWidgets.dart | 18 +++ lib/widgets/UserStoriesList.dart | 42 +++++++ pubspec.lock | 7 ++ pubspec.yaml | 2 + 6 files changed, 161 insertions(+), 25 deletions(-) create mode 100644 assets/images/doubletick.png create mode 100644 lib/widgets/UserStoriesList.dart diff --git a/assets/images/doubletick.png b/assets/images/doubletick.png new file mode 100644 index 0000000000000000000000000000000000000000..9432bf1deda6379e7213ea061e4bce204dfce6df GIT binary patch literal 1093 zcmV-L1iJf)P)9FGtPE8 zdC4TZolFdS+V_&Y&-=aielL$9{7){+cOL@iB!TZ>&^uAX`7lq@&5rjbNq!x`PbBD- zusf8H+U_YLdg*!{z8W?b_EjFOz$E2)BHA_# zWX7ve)A=Y3odox5h6Zk}G}>JDo-qu3rGtg&?nmQ|Uvy<@U}jv1n$8oIMVrfuPZ1ek z62ZD5!r-oC%*D-xH7(e8KOxYOL>cpsA@ien@z@`gL~kDKwFzisfmK=M(31vN4qXPg zQs}b4l|h#Yt^~Sl@YK=M08bSy+Dp$G;ML-JIA2=I+MZ4&W%a-$&k@MXz42(Z4C}zo z&+_Eqao-B1qc;n-@7lQn!tA(>$2f55!@COLQqffb_t9;4uMK(`z&%X#b<{Zeah@Sk zq>gBNvx0C|cTdcy#Z6~5QPyf1H*-i2KcB3&yG}$0H~z`I7B&}VilDOU3g4R%z&S0L z6$G+Cm6U?y%x(-xA?LO*&W$cmFkq$6MVZQCD-=AP$P=;YrQm(YE*Vw1UfP-w|;C zR^fdxP7@$(RYA?(MQ9F6M!c z&S7QNZRlgd^YOfMegL$6Pvz(2en1UrVI4yKwcm>j*&=n*KR5z!mmTvuhz@8Y-gI8j zEm~=4^^8HpGr<#>!}`@bt($@qx7#wh2+-Z5RTzAUK!k^((>U|+UzVoO-x^m=4x&K4jsf78K#@9J09Je<0|6a?*Z&jdyy_J ziH`T2!F)CoUNSg+A=Al%_jcRTysU#~<>5XYtD~Eh-Ycd6E{5(!ya&Gm;Lbt6jN5pq zdZOdb84>{z85{jMC2(=Hy5r1=JysN{^Q{LM_)`*&45y;B;cs`mIx|iYu!9*_B4N%< zGA(7z_k43&^8|bOgZn~L{*1cwPwoZf)AzUA+r&QgYk=JMOrYYwT`};3u^Y~T00000 LNkvXXu0mjfWElx# literal 0 HcmV?d00001 diff --git a/lib/screens/TabScreens/ChatsListScreen.dart b/lib/screens/TabScreens/ChatsListScreen.dart index 80d12d0..b4b7f07 100644 --- a/lib/screens/TabScreens/ChatsListScreen.dart +++ b/lib/screens/TabScreens/ChatsListScreen.dart @@ -1,45 +1,112 @@ import 'package:flutter/material.dart'; +import 'package:flutter_slidable/flutter_slidable.dart'; import 'package:flutter_whatsapp_redesign/utils/Users.dart'; +import '../../widgets/UserStoriesList.dart'; +import '../../widgets/BuilderMethodsWidgets.dart'; + class ChatsListScreen extends StatelessWidget { @override Widget build(BuildContext context) { + final customCircleAvatar = BuilderMethodsWidgets().customCircleAvatar; return Column( children: [ - SizedBox( - height: MediaQuery.of(context).size.height * 0.20, - child: ListView.builder( - scrollDirection: Axis.horizontal, + Expanded( + // height: MediaQuery.of(context).size.height * 0.20, + child: UserStoriesList(), + ), + Divider( + thickness: 1, + color: Color(0xffD0D2D3), + ), + Expanded( + flex: 4, + child: ListView.separated( + separatorBuilder: (_, __) => Divider( + thickness: 1, + color: Color(0xffD0D2D3), + ), + reverse: true, itemCount: DUMMY_CHATS_DATA.length, itemBuilder: (ctx, idx) { + final userName = DUMMY_CHATS_DATA[idx].name; final imageUrl = DUMMY_CHATS_DATA[idx].profileImage; - final userNAme = DUMMY_CHATS_DATA[idx].name; + final message = DUMMY_CHATS_DATA[idx].lastMessage; + final time = DUMMY_CHATS_DATA[idx].time; + final doubleTickIcon = 'assets/images/doubletick.png'; final placeholderImage = 'assets/images/placeholder.png'; - return Column( - children: [ - Padding( - padding: const EdgeInsets.all(20), - child: ClipRRect( - borderRadius: BorderRadius.circular(100), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(100), - border: Border.all(color: Colors.grey)), - height: 70, - width: 70, - child: FadeInImage.assetNetwork( - placeholder: placeholderImage, - image: imageUrl, - ), + + return Slidable( + actionExtentRatio: 0.20, + actionPane: SlidableDrawerActionPane(), + secondaryActions: [ + Container( + padding: const EdgeInsets.all(10), + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + color: Colors.grey, + )), + child: Icon(Icons.delete, color: Colors.red)), + Container( + padding: const EdgeInsets.all(10), + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + color: Colors.grey, + )), + child: Icon(Icons.videocam, color: Color(0xff06A88E))), + Container( + padding: const EdgeInsets.all(10), + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + color: Colors.grey, + )), + child: Icon(Icons.call, color: Color(0xff06A88E))), + ], + child: ListTile( + leading: customCircleAvatar( + avatarImage: imageUrl, + placeholderImage: placeholderImage, + height: 50.0, + width: 50.0, + ), //todo: put status indicator + + title: Text( + '$userName', + style: TextStyle( + color: Color(0xff222222), fontWeight: FontWeight.bold), + ), + subtitle: Row( + children: [ + Image.asset( + doubleTickIcon, + height: 15, + width: 15, ), - ), + Padding( + padding: const EdgeInsets.only(left: 10), + child: Text( + '$message', + style: TextStyle( + color: Color(0xffC0C0C0), + fontWeight: FontWeight.bold), + ), + ) + ], ), - Text(userNAme.split(' ')[0]) - ], + trailing: Text( + '$time', + style: TextStyle( + color: Color(0xffC0C0C0), fontWeight: FontWeight.bold), + ), + // subtitle: , + ), ); }, ), - ), + ) ], ); } diff --git a/lib/widgets/BuilderMethodsWidgets.dart b/lib/widgets/BuilderMethodsWidgets.dart index d2363b9..6bc3edc 100644 --- a/lib/widgets/BuilderMethodsWidgets.dart +++ b/lib/widgets/BuilderMethodsWidgets.dart @@ -38,4 +38,22 @@ class BuilderMethodsWidgets { ), ); } + + Widget customCircleAvatar({avatarImage, placeholderImage, height, width}) { + return ClipRRect( + borderRadius: BorderRadius.circular(100), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(100), + // border: Border.all(color: Colors.grey), + ), + height: height, + width: width, + child: FadeInImage.assetNetwork( + placeholder: placeholderImage, + image: avatarImage, + ), + ), + ); + } } diff --git a/lib/widgets/UserStoriesList.dart b/lib/widgets/UserStoriesList.dart new file mode 100644 index 0000000..36d8a76 --- /dev/null +++ b/lib/widgets/UserStoriesList.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; + +import '../utils/Users.dart'; +import './BuilderMethodsWidgets.dart'; + +class UserStoriesList extends StatelessWidget { + const UserStoriesList({ + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + final customCircleAvatar = BuilderMethodsWidgets().customCircleAvatar; + return ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: DUMMY_CHATS_DATA.length, + itemBuilder: (ctx, idx) { + final imageUrl = DUMMY_CHATS_DATA[idx].profileImage; + final userNAme = DUMMY_CHATS_DATA[idx].name; + final placeholderImage = 'assets/images/placeholder.png'; + return Column( + children: [ + Padding( + padding: const EdgeInsets.all(10), + child: customCircleAvatar( + avatarImage: imageUrl, + placeholderImage: placeholderImage, + height: 60.0, + width: 60.0, + ), + ), + Text( + userNAme.split(' ')[0], + style: TextStyle( + color: Color(0xff242424), fontWeight: FontWeight.bold), + ) + ], + ); + }, + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 8b24c68..7dd045a 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -69,6 +69,13 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_slidable: + dependency: "direct main" + description: + name: flutter_slidable + url: "https://pub.dartlang.org" + source: hosted + version: "0.5.4" flutter_svg: dependency: "direct main" description: diff --git a/pubspec.yaml b/pubspec.yaml index 3934b79..0795e0b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -20,6 +20,8 @@ dependencies: flutter: sdk: flutter flutter_svg: ^0.17.4 + flutter_slidable: ^0.5.4 + # The following adds the Cupertino Icons font to your application.