Skip to content

Commit ae9ca52

Browse files
dhyash-simformaditya-css
dhyash-simform
authored and
aditya-css
committed
feat: ✨ Implement chat list UI components including app bar, controller, and example page
1 parent 6991895 commit ae9ca52

28 files changed

+896
-690
lines changed

‎example/lib/chat_view_list_screen.dart‎

Lines changed: 74 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:chatview/chatview.dart';
22
import 'package:flutter/material.dart';
33

4+
import 'data.dart';
45
import 'main.dart';
56

67
class ChatViewListScreen extends StatefulWidget {
@@ -11,144 +12,92 @@ class ChatViewListScreen extends StatefulWidget {
1112
}
1213

1314
class _ChatViewListScreenState extends State<ChatViewListScreen> {
14-
late final ChatViewListController controller;
15+
final _searchController = TextEditingController();
1516

16-
@override
17-
void initState() {
18-
final now = DateTime.now().toUtc();
19-
final fiveMinAgo = now.subtract(const Duration(minutes: 5));
20-
final today = DateTime(now.year, now.month, now.day);
21-
final yesterday = DateTime(now.year, now.month, now.day - 1);
22-
final lastMessageTime = DateTime.parse('2025-06-06T13:58:00.000Z');
23-
var initialUsersList = [
24-
ChatViewListModel(
25-
id: '1',
26-
name: 'Breaking Bad',
27-
lastMessage: Message(
28-
message:
29-
'I am not in danger, Skyler. I am the danger. A guy opens his door and gets shot and you think that of me? No. I am the one who knocks!',
30-
createdAt: now,
31-
sentBy: '2',
32-
id: '1',
33-
status: MessageStatus.read,
34-
),
35-
unreadCount: 1,
36-
imageUrl:
37-
'https://m.media-amazon.com/images/M/MV5BMzU5ZGYzNmQtMTdhYy00OGRiLTg0NmQtYjVjNzliZTg1ZGE4XkEyXkFqcGc@._V1_.jpg',
38-
chatType: ChatType.group,
39-
),
40-
ChatViewListModel(
41-
id: '2',
42-
name: 'Heisenberg',
43-
lastMessage: Message(
44-
message: 'Say my name!!',
45-
createdAt: fiveMinAgo,
46-
sentBy: '3',
47-
id: '2',
48-
status: MessageStatus.read,
49-
),
50-
imageUrl:
51-
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzc87OtZ7mZe-kca89Mfi4o1--95dQI7Ne-w&s',
52-
unreadCount: 2,
53-
userActiveStatus: UserActiveStatus.online,
54-
),
55-
ChatViewListModel(
56-
id: '3',
57-
name: 'Jessie Pinkman',
58-
lastMessage: Message(
59-
message: 'Yeah....!!!!',
60-
createdAt: today,
61-
sentBy: '4',
62-
id: '3',
63-
status: MessageStatus.read,
64-
),
65-
imageUrl: 'https://i.insider.com/5d9f454ee94e865e924818da?width=700',
66-
),
67-
ChatViewListModel(
68-
id: '4',
69-
name: 'Walter White',
70-
lastMessage: Message(
71-
message: 'Whats up?',
72-
createdAt: yesterday,
73-
sentBy: '4',
74-
id: '4',
75-
status: MessageStatus.read,
76-
),
77-
imageUrl:
78-
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1Efw6_noLe4BzEsbgsfHIhvZNqWKaDtckdQ&s',
79-
),
80-
ChatViewListModel(
81-
id: '5',
82-
name: 'Hank Schrader',
83-
lastMessage: Message(
84-
message: 'Hello',
85-
createdAt: lastMessageTime,
86-
sentBy: '6',
87-
id: '5',
88-
status: MessageStatus.read,
89-
),
90-
imageUrl:
91-
'https://upload.wikimedia.org/wikipedia/en/d/db/Hank_Schrader_S5B.png',
92-
),
93-
];
17+
ChatViewListController? _chatListController;
9418

95-
controller = ChatViewListController(
96-
initialUsersList: initialUsersList,
97-
scrollController: ScrollController(),
98-
);
99-
super.initState();
100-
}
19+
ScrollController? _scrollController;
10120

21+
// Assign the controller in didChangeDependencies
22+
// to ensure PrimaryScrollController is available.
10223
@override
103-
void dispose() {
104-
controller.dispose();
105-
super.dispose();
24+
void didChangeDependencies() {
25+
super.didChangeDependencies();
26+
_scrollController = PrimaryScrollController.of(context);
27+
_chatListController ??= ChatViewListController(
28+
initialChatList: Data.chatList,
29+
scrollController: _scrollController!,
30+
disposeOtherResources: false,
31+
);
10632
}
10733

10834
@override
10935
Widget build(BuildContext context) {
11036
return Scaffold(
111-
body: ChatViewList(
112-
controller: controller,
113-
appbar: const ChatViewListAppBar(
114-
title: 'Breaking Bad',
115-
),
116-
config: ChatViewListConfig(
117-
chatViewListTileConfig: ChatViewListTileConfig(
118-
backgroundColor: Colors.blue,
119-
onTap: (user) {
120-
Navigator.of(context).push(
121-
MaterialPageRoute(
122-
builder: (context) => ChatScreen(
123-
user: user,
37+
body: _chatListController == null
38+
? const Center(child: CircularProgressIndicator())
39+
: ChatViewList(
40+
controller: _chatListController!,
41+
appbar: ChatViewListAppBar(
42+
titleText: 'ChatView',
43+
centerTitle: false,
44+
scrolledUnderElevation: 0,
45+
actions: [
46+
IconButton(
47+
icon: const Icon(Icons.search),
48+
onPressed: () {
49+
// Handle search action
50+
},
51+
),
52+
],
53+
),
54+
config: ChatViewListConfig(
55+
tileConfig: ListTileConfig(
56+
unreadCountConfig: const UnreadCountConfig(
57+
style: UnreadCountStyle.ninetyNinePlus,
12458
),
59+
userAvatarConfig: UserAvatarConfig(
60+
backgroundColor: Colors.red.shade100,
61+
),
62+
onTap: (chat) {
63+
Navigator.of(context).push(
64+
MaterialPageRoute(
65+
builder: (context) => ChatScreen(
66+
chat: chat,
67+
),
68+
),
69+
);
70+
},
71+
onLongPress: (chat) {
72+
debugPrint('Long pressed on chat: ${chat.name}');
73+
},
74+
),
75+
searchConfig: SearchConfig(
76+
textEditingController: _searchController,
77+
border: const OutlineInputBorder(
78+
borderRadius: BorderRadius.all(Radius.circular(10)),
79+
),
80+
onSearch: (value) async {
81+
if (value.isEmpty) {
82+
return null;
83+
}
84+
final list = _chatListController?.initialChatList
85+
.where((chat) => chat.name
86+
.toLowerCase()
87+
.contains(value.toLowerCase()))
88+
.toList();
89+
return list;
90+
},
12591
),
126-
);
127-
},
128-
onLongPress: (user) {
129-
debugPrint('Long pressed on user: ${user.name}');
130-
},
131-
),
132-
searchConfig: SearchConfig(
133-
textEditingController: TextEditingController(),
134-
onSearch: (value) async {
135-
if (value.isEmpty) {
136-
return null;
137-
}
138-
final list = controller.initialUsersList
139-
.where((user) =>
140-
user.name.toLowerCase().contains(value.toLowerCase()))
141-
.toList();
142-
return list;
143-
},
144-
border: const OutlineInputBorder(
145-
borderRadius: BorderRadius.all(
146-
Radius.circular(10),
14792
),
14893
),
149-
),
150-
),
151-
),
15294
);
15395
}
96+
97+
@override
98+
void dispose() {
99+
_chatListController?.dispose();
100+
_searchController.dispose();
101+
super.dispose();
102+
}
154103
}

‎example/lib/data.dart‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,36 @@ import 'package:chatview/chatview.dart';
33
class Data {
44
static const profileImage =
55
"https://github.com/SimformSolutionsPvtLtd/chatview/blob/main/example/assets/images/simform.png?raw=true";
6+
7+
static final chatList = [
8+
ChatViewListItem(
9+
id: '2',
10+
name: 'Simform',
11+
unreadCount: 2,
12+
imageUrl: Data.profileImage,
13+
lastMessage: Message(
14+
id: '12',
15+
sentBy: '2',
16+
message: "🤩🤩",
17+
createdAt: DateTime.now().toUtc(),
18+
status: MessageStatus.delivered,
19+
),
20+
),
21+
const ChatViewListItem(
22+
id: '1',
23+
name: 'Flutter',
24+
imageUrl: Data.profileImage,
25+
userActiveStatus: UserActiveStatus.online,
26+
),
27+
];
28+
629
static final messageList = [
730
Message(
831
id: '1',
932
message: "Hi!",
1033
createdAt: DateTime.now(),
11-
sentBy: '1', // userId of who sends the message
34+
// userId of who sends the message
35+
sentBy: '1',
1236
status: MessageStatus.read,
1337
),
1438
Message(

‎example/lib/main.dart‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,9 @@ class Example extends StatelessWidget {
2727
}
2828

2929
class ChatScreen extends StatefulWidget {
30-
const ChatScreen({
31-
super.key,
32-
required this.user,
33-
});
30+
const ChatScreen({required this.chat, super.key});
3431

35-
final ChatViewListModel user;
32+
final ChatViewListItem chat;
3633

3734
@override
3835
State<ChatScreen> createState() => _ChatScreenState();
@@ -144,17 +141,17 @@ class _ChatScreenState extends State<ChatScreen> {
144141
appBar: ChatViewAppBar(
145142
elevation: theme.elevation,
146143
backGroundColor: theme.appBarColor,
147-
profilePicture: widget.user.imageUrl,
144+
profilePicture: widget.chat.imageUrl,
148145
backArrowColor: theme.backArrowColor,
149-
chatTitle: widget.user.name,
146+
chatTitle: widget.chat.name,
150147
chatTitleTextStyle: TextStyle(
151148
color: theme.appBarTitleTextStyle,
152149
fontWeight: FontWeight.bold,
153150
fontSize: 18,
154151
letterSpacing: 0.25,
155152
),
156153
userStatus:
157-
widget.user.userActiveStatus.isOnline ? 'Online' : 'Offline',
154+
widget.chat.userActiveStatus.isOnline ? 'Online' : 'Offline',
158155
userStatusTextStyle: const TextStyle(color: Colors.grey),
159156
actions: [
160157
IconButton(

‎lib/chatview.dart‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,21 @@ library chatview;
2424

2525
export 'package:audio_waveforms/audio_waveforms.dart'
2626
show
27-
WaveStyle,
28-
PlayerWaveStyle,
2927
AndroidEncoder,
28+
AndroidOutputFormat,
3029
IosEncoder,
31-
AndroidOutputFormat;
30+
PlayerWaveStyle,
31+
WaveStyle;
3232
export 'package:chatview_utils/chatview_utils.dart';
3333
export 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
3434

35-
export 'src/chat_list_view_controller.dart';
35+
export 'src/controller/chat_list_view_controller.dart';
3636
export 'src/extensions/extensions.dart' show MessageTypes;
37-
export 'src/models/config_models/chat_view_list_config.dart';
38-
export 'src/models/config_models/chat_view_list_time_config.dart';
39-
export 'src/models/config_models/chat_view_list_user_config.dart';
40-
export 'src/models/config_models/load_more_widget_config.dart';
41-
export 'src/models/config_models/receipts_widget_config.dart';
42-
export 'src/models/config_models/search_config.dart';
43-
export 'src/models/config_models/unread_widget_config.dart';
4437
export 'src/models/models.dart';
4538
export 'src/utils/chat_view_locale.dart';
4639
export 'src/utils/package_strings.dart';
4740
export 'src/values/enumeration.dart';
4841
export 'src/values/typedefs.dart';
4942
export 'src/widgets/chat_view.dart';
5043
export 'src/widgets/chat_view_appbar.dart';
51-
export 'src/widgets/chat_view_list.dart';
52-
export 'src/widgets/chat_view_list_appbar.dart';
44+
export 'src/widgets/chat_view_list/chatview_list.dart';

0 commit comments

Comments
 (0)