1. import 'package:flutter/material.dart';
2.  
3. void main() {
4.   runApp(const MaterialApp(home: Messenger()));
5. }
6.  
7. class Messenger extends StatefulWidget {
8.   const Messenger({super.key});
9.  
10.   @override
11.   State<Messenger> createState() => _MessengerState();
12. }
13.  
14. class _MessengerState extends State<Messenger> {
15.   List<UserProf> activeUsers = [
16.     UserProf("Hung", "assets/junimo.png"),
17.     UserProf("Babe", "assets/lake.jpg"),
18.     UserProf("Babe", "assets/wallpaper.jpg"),
19.     UserProf("Hung", "assets/junimo.png"),
20.     UserProf("Babe", "assets/lake.jpg"),
21.     UserProf("Babe", "assets/wallpaper.jpg"),
22.     UserProf("Hung", "assets/junimo.png"),
23.     UserProf("Babe", "assets/lake.jpg"),
24.     UserProf("Babe", "assets/wallpaper.jpg"),
25.   ];
26.   List<UserProf> users = [
27.     UserProf("Hung", "assets/junimo.png"),
28.     UserProf("Babe", "assets/lake.jpg"),
29.     UserProf("Babe", "assets/wallpaper.jpg"),
30.     UserProf("Hung", "assets/junimo.png"),
31.     UserProf("Babe", "assets/lake.jpg"),
32.     UserProf("Hung", "assets/junimo.png"),
33.     UserProf("Babe", "assets/lake.jpg"),
34.     UserProf("Babe", "assets/wallpaper.jpg"),
35.     UserProf("Hung", "assets/junimo.png"),
36.     UserProf("Babe", "assets/lake.jpg"),
37.     UserProf("Hung", "assets/junimo.png"),
38.     UserProf("Babe", "assets/lake.jpg"),
39.     UserProf("Babe", "assets/wallpaper.jpg"),
40.     UserProf("Hung", "assets/junimo.png"),
41.     UserProf("Babe", "assets/lake.jpg"),
42.     UserProf("Hung", "assets/junimo.png"),
43.     UserProf("Babe", "assets/lake.jpg"),
44.     UserProf("Babe", "assets/wallpaper.jpg"),
45.     UserProf("Hung", "assets/junimo.png"),
46.     UserProf("Babe", "assets/lake.jpg"),
47.     UserProf("Hung", "assets/junimo.png"),
48.     UserProf("Babe", "assets/lake.jpg"),
49.     UserProf("Babe", "assets/wallpaper.jpg"),
50.     UserProf("Hung", "assets/junimo.png"),
51.     UserProf("Babe", "assets/lake.jpg"),
52.     UserProf("Hung", "assets/junimo.png"),
53.     UserProf("Babe", "assets/lake.jpg"),
54.     UserProf("Babe", "assets/wallpaper.jpg"),
55.     UserProf("Hung", "assets/junimo.png"),
56.     UserProf("Babe", "assets/lake.jpg"),
57.     UserProf("Hung", "assets/junimo.png"),
58.     UserProf("Babe", "assets/lake.jpg"),
59.     UserProf("Babe", "assets/wallpaper.jpg"),
60.     UserProf("Hung", "assets/junimo.png"),
61.     UserProf("Babe", "assets/lake.jpg"),
62.     UserProf("Hung", "assets/junimo.png"),
63.     UserProf("Babe", "assets/lake.jpg"),
64.     UserProf("Babe", "assets/wallpaper.jpg"),
65.     UserProf("Hung", "assets/junimo.png"),
66.     UserProf("Babe", "assets/lake.jpg"),
67.   ];
68.   @override
69.   Widget build(BuildContext context) {
70.     return MaterialApp(
71.       debugShowCheckedModeBanner: false,
72.       home: Scaffold(
73.         appBar: AppBar(
74.           actions: [
75.             TextButton(
76.                 onPressed: () {
77.                   Navigator.pop(context);
78.                 },
79.                 child: const Icon(Icons.logout))
80.           ],
81.           centerTitle: true,
82.           backgroundColor: Colors.purple[200],
83.           title: const Text("Messenger"),
84.         ),
85.         body: Column(
86.           children: [
87.             const Padding(
88.               padding: EdgeInsets.only(left: 15, right: 15, top: 15),
89.               child: TextField(
90.                 decoration: InputDecoration(
91.                   prefixIcon: Icon(Icons.search),
92.                   border: OutlineInputBorder(
93.                       borderSide: BorderSide(
94.                     color: Colors.purple,
95.                   )),
96.                 ),
97.               ),
98.             ),
99.             Container(
100.               height: 100, // Set a fixed height here
101.               width: MediaQuery.of(context).size.width,
102.               child: ListView(
103.                 scrollDirection: Axis.horizontal,
104.                 children: activeUsers
105.                     .map(
106.                       (e) => Container(
107.                         margin: const EdgeInsets.all(8),
108.                         child: Column(
109.                           children: [
110.                             CircleAvatar(
111.                               radius: 30,
112.                               backgroundImage: AssetImage(e.avtUrl),
113.                             ),
114.                             Text(e.userName),
115.                           ],
116.                         ),
117.                       ),
118.                     )
119.                     .toList(),
120.               ),
121.             ),
122.             Expanded(
123.               child: ListView(
124.                 children: users
125.                     .map((e) => ListTile(
126.                           leading: CircleAvatar(
127.                               backgroundImage: AssetImage(e.avtUrl)),
128.                           title: Text(e.userName),
129.                           subtitle: const Text(
130.                             'Chào em anh đứng đây từ chiều',
131.                             style: TextStyle(fontFamily: 'Righteus'),
132.                           ),
133.                         ))
134.                     .toList(),
135.               ),
136.             ),
137.           ],
138.         ),
139.         floatingActionButton: FloatingActionButton(
140.           onPressed: () {
141.             setState(() {
142.               if (users.isNotEmpty) {
143.                 users.removeAt(users.length - 1);
144.               }
145.             });
146.           },
147.           child: const Icon(Icons.remove_circle_sharp),
148.         ),
149.         bottomNavigationBar: BottomNavigationBar(items: const [
150.           BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chats'),
151.           BottomNavigationBarItem(
152.               icon: Icon(Icons.api_rounded), label: 'Story'),
153.         ]),
154.       ),
155.     );
156.   }
157. }
158.  
159. class UserProf {
160.   final String userName;
161.   final String avtUrl;
162.  
163.   UserProf(this.userName, this.avtUrl);
164. }
165.