add search user to support you guys when testing between two users

Author: duytq94

README.md

@@ -20,5 +20,5 @@
 * Run `flutter run` (remember open simulator or connect physical device, iOS auto run additional command `pod install`)
 
 ## Big update
-* Jun, 4th, 2021 — Migrating to Flutter 2 and using Dart sound null safety
+* Jun, 4th, 2021 - Migrating to Flutter 2 and using Dart sound null safety
 * Oct, 2th, 2021 - Apply provider & restructure

lib/constants/app_constants.dart

@@ -2,7 +2,6 @@ class AppConstants {
   static const appTitle = "Flutter Chat Demo";
   static const loginTitle = "Login";
   static const homeTitle = "Home";
-  static const chatTitle = "Chat";
   static const settingsTitle = "Settings";
   static const fullPhotoTitle = "Full Photo";
 }

lib/models/models.dart

@@ -1,2 +1,3 @@
 export 'message_chat.dart';
+export 'popup_choices.dart';
 export 'user_chat.dart';

lib/models/popup_choices.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+class PopupChoices {
+  String title;
+  IconData icon;
+
+  PopupChoices({required this.title, required this.icon});
+}

lib/pages/chat_page.dart

@@ -4,7 +4,6 @@ import 'dart:io';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:firebase_storage/firebase_storage.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_chat_demo/constants/app_constants.dart';
 import 'package:flutter_chat_demo/constants/color_constants.dart';
 import 'package:flutter_chat_demo/constants/constants.dart';
 import 'package:flutter_chat_demo/models/models.dart';
@@ -20,18 +19,24 @@ import 'pages.dart';
 class ChatPage extends StatefulWidget {
   final String peerId;
   final String peerAvatar;
+  final String peerNickname;
 
-  ChatPage({Key? key, required this.peerId, required this.peerAvatar}) : super(key: key);
+  ChatPage({Key? key, required this.peerId, required this.peerAvatar, required this.peerNickname}) : super(key: key);
 
   @override
-  State createState() => ChatPageState(peerId: peerId, peerAvatar: peerAvatar);
+  State createState() => ChatPageState(
+        peerId: this.peerId,
+        peerAvatar: this.peerAvatar,
+        peerNickname: this.peerNickname,
+      );
 }
 
 class ChatPageState extends State<ChatPage> {
-  ChatPageState({Key? key, required this.peerId, required this.peerAvatar});
+  ChatPageState({Key? key, required this.peerId, required this.peerAvatar, required this.peerNickname});
 
   String peerId;
   String peerAvatar;
+  String peerNickname;
   late String currentUserId;
 
   List<QueryDocumentSnapshot> listMessage = new List.from([]);
@@ -150,7 +155,7 @@ class ChatPageState extends State<ChatPage> {
       chatProvider.sendMessage(content, type, groupChatId, currentUserId, peerId);
       listScrollController.animateTo(0, duration: Duration(milliseconds: 300), curve: Curves.easeOut);
     } else {
-      Fluttertoast.showToast(msg: 'Nothing to send', backgroundColor: Colors.black, textColor: Colors.red);
+      Fluttertoast.showToast(msg: 'Nothing to send', backgroundColor: ColorConstants.greyColor);
     }
   }
 
@@ -435,8 +440,8 @@ class ChatPageState extends State<ChatPage> {
     return Scaffold(
       appBar: AppBar(
         title: Text(
-          AppConstants.chatTitle,
-          style: TextStyle(color: ColorConstants.primaryColor, fontWeight: FontWeight.bold),
+          this.peerNickname,
+          style: TextStyle(color: ColorConstants.primaryColor),
         ),
         centerTitle: true,
       ),

lib/pages/full_photo_page.dart

@@ -14,7 +14,7 @@ class FullPhotoPage extends StatelessWidget {
       appBar: AppBar(
         title: Text(
           AppConstants.fullPhotoTitle,
-          style: TextStyle(color: ColorConstants.primaryColor, fontWeight: FontWeight.bold),
+          style: TextStyle(color: ColorConstants.primaryColor),
         ),
         centerTitle: true,
       ),

lib/pages/home_page.dart

@@ -8,6 +8,7 @@ import 'package:flutter_chat_demo/constants/app_constants.dart';
 import 'package:flutter_chat_demo/constants/color_constants.dart';
 import 'package:flutter_chat_demo/constants/constants.dart';
 import 'package:flutter_chat_demo/providers/providers.dart';
+import 'package:flutter_chat_demo/utils/utils.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:google_sign_in/google_sign_in.dart';
@@ -34,20 +35,27 @@ class HomePageState extends State<HomePage> {
 
   int _limit = 20;
   int _limitIncrement = 20;
+  String _textSearch = "";
   bool isLoading = false;
-  List<Choice> choices = const <Choice>[
-    const Choice(title: 'Settings', icon: Icons.settings),
-    const Choice(title: 'Log out', icon: Icons.exit_to_app),
-  ];
+
   late AuthProvider authProvider;
   late String currentUserId;
   late HomeProvider homeProvider;
+  Debouncer searchDebouncer = Debouncer(milliseconds: 300);
+  StreamController<bool> btnClearController = StreamController<bool>();
+  TextEditingController searchBarTec = TextEditingController();
+
+  List<PopupChoices> choices = <PopupChoices>[
+    PopupChoices(title: 'Settings', icon: Icons.settings),
+    PopupChoices(title: 'Log out', icon: Icons.exit_to_app),
+  ];
 
   @override
   void initState() {
     super.initState();
     authProvider = context.read<AuthProvider>();
     homeProvider = context.read<HomeProvider>();
+
     if (authProvider.getUserFirebaseId()?.isNotEmpty == true) {
       currentUserId = authProvider.getUserFirebaseId()!;
     } else {
@@ -61,6 +69,12 @@ class HomePageState extends State<HomePage> {
     listScrollController.addListener(scrollListener);
   }
 
+  @override
+  void dispose() {
+    super.dispose();
+    btnClearController.close();
+  }
+
   void registerNotification() {
     firebaseMessaging.requestPermission();
 
@@ -99,7 +113,7 @@ class HomePageState extends State<HomePage> {
     }
   }
 
-  void onItemMenuPress(Choice choice) {
+  void onItemMenuPress(PopupChoices choice) {
     if (choice.title == 'Log out') {
       handleSignOut();
     } else {
@@ -235,7 +249,7 @@ class HomePageState extends State<HomePage> {
       appBar: AppBar(
         title: Text(
           AppConstants.homeTitle,
-          style: TextStyle(color: ColorConstants.primaryColor, fontWeight: FontWeight.bold),
+          style: TextStyle(color: ColorConstants.primaryColor),
         ),
         centerTitle: true,
         actions: <Widget>[buildPopupMenu()],
@@ -244,26 +258,37 @@ class HomePageState extends State<HomePage> {
         child: Stack(
           children: <Widget>[
             // List
-            Container(
-              child: StreamBuilder<QuerySnapshot>(
-                stream: homeProvider.getStreamFireStore(FirestoreConstants.pathUserCollection, _limit),
-                builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
-                  if (snapshot.hasData) {
-                    return ListView.builder(
-                      padding: EdgeInsets.all(10),
-                      itemBuilder: (context, index) => buildItem(context, snapshot.data?.docs[index]),
-                      itemCount: snapshot.data?.docs.length,
-                      controller: listScrollController,
-                    );
-                  } else {
-                    return Center(
-                      child: CircularProgressIndicator(
-                        color: ColorConstants.themeColor,
-                      ),
-                    );
-                  }
-                },
-              ),
+            Column(
+              children: [
+                buildSearchBar(),
+                Expanded(
+                  child: StreamBuilder<QuerySnapshot>(
+                    stream: homeProvider.getStreamFireStore(FirestoreConstants.pathUserCollection, _limit, _textSearch),
+                    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
+                      if (snapshot.hasData) {
+                        if ((snapshot.data?.docs.length ?? 0) > 0) {
+                          return ListView.builder(
+                            padding: EdgeInsets.all(10),
+                            itemBuilder: (context, index) => buildItem(context, snapshot.data?.docs[index]),
+                            itemCount: snapshot.data?.docs.length,
+                            controller: listScrollController,
+                          );
+                        } else {
+                          return Center(
+                            child: Text("No users"),
+                          );
+                        }
+                      } else {
+                        return Center(
+                          child: CircularProgressIndicator(
+                            color: ColorConstants.themeColor,
+                          ),
+                        );
+                      }
+                    },
+                  ),
+                ),
+              ],
             ),
 
             // Loading
@@ -277,12 +302,72 @@ class HomePageState extends State<HomePage> {
     );
   }
 
+  Widget buildSearchBar() {
+    return Container(
+      height: 40,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Icon(Icons.search, color: ColorConstants.greyColor, size: 20),
+          SizedBox(width: 5),
+          Expanded(
+            child: TextFormField(
+              textInputAction: TextInputAction.search,
+              controller: searchBarTec,
+              onChanged: (value) {
+                searchDebouncer.run(() {
+                  if (value.isNotEmpty) {
+                    btnClearController.add(true);
+                    setState(() {
+                      _textSearch = value;
+                    });
+                  } else {
+                    btnClearController.add(false);
+                    setState(() {
+                      _textSearch = "";
+                    });
+                  }
+                });
+              },
+              decoration: InputDecoration.collapsed(
+                hintText: 'Search nickname (you have to type exactly string)',
+                hintStyle: TextStyle(fontSize: 13, color: ColorConstants.greyColor),
+              ),
+              style: TextStyle(fontSize: 13),
+            ),
+          ),
+          StreamBuilder<bool>(
+              stream: btnClearController.stream,
+              builder: (context, snapshot) {
+                return snapshot.data == true
+                    ? GestureDetector(
+                        onTap: () {
+                          searchBarTec.clear();
+                          btnClearController.add(false);
+                          setState(() {
+                            _textSearch = "";
+                          });
+                        },
+                        child: Icon(Icons.clear_rounded, color: ColorConstants.greyColor, size: 20))
+                    : SizedBox.shrink();
+              }),
+        ],
+      ),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: ColorConstants.greyColor2,
+      ),
+      padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
+      margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
+    );
+  }
+
   Widget buildPopupMenu() {
-    return PopupMenuButton<Choice>(
+    return PopupMenuButton<PopupChoices>(
       onSelected: onItemMenuPress,
       itemBuilder: (BuildContext context) {
-        return choices.map((Choice choice) {
-          return PopupMenuItem<Choice>(
+        return choices.map((PopupChoices choice) {
+          return PopupMenuItem<PopupChoices>(
               value: choice,
               child: Row(
                 children: <Widget>[
@@ -383,12 +468,16 @@ class HomePageState extends State<HomePage> {
               ],
             ),
             onPressed: () {
+              if (Utilities.isKeyboardShowing()) {
+                Utilities.closeKeyboard(context);
+              }
               Navigator.push(
                 context,
                 MaterialPageRoute(
                   builder: (context) => ChatPage(
                     peerId: userChat.id,
                     peerAvatar: userChat.photoUrl,
+                    peerNickname: userChat.nickname,
                   ),
                 ),
               );
@@ -410,10 +499,3 @@ class HomePageState extends State<HomePage> {
     }
   }
 }
-
-class Choice {
-  const Choice({required this.title, required this.icon});
-
-  final String title;
-  final IconData icon;
-}

lib/pages/login_page.dart

@@ -36,7 +36,7 @@ class LoginPageState extends State<LoginPage> {
         appBar: AppBar(
           title: Text(
             AppConstants.loginTitle,
-            style: TextStyle(color: ColorConstants.primaryColor, fontWeight: FontWeight.bold),
+            style: TextStyle(color: ColorConstants.primaryColor),
           ),
           centerTitle: true,
         ),

lib/pages/settings_page.dart

@@ -22,7 +22,7 @@ class SettingsPage extends StatelessWidget {
       appBar: AppBar(
         title: Text(
           AppConstants.settingsTitle,
-          style: TextStyle(color: ColorConstants.primaryColor, fontWeight: FontWeight.bold),
+          style: TextStyle(color: ColorConstants.primaryColor),
         ),
         centerTitle: true,
       ),

lib/providers/home_provider.dart

@@ -1,4 +1,5 @@
 import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:flutter_chat_demo/constants/firestore_constants.dart';
 
 class HomeProvider {
   final FirebaseFirestore firebaseFirestore;
@@ -9,7 +10,15 @@ class HomeProvider {
     return firebaseFirestore.collection(collectionPath).doc(path).update(dataNeedUpdate);
   }
 
-  Stream<QuerySnapshot> getStreamFireStore(String pathCollection, int limit) {
-    return firebaseFirestore.collection(pathCollection).limit(limit).snapshots();
+  Stream<QuerySnapshot> getStreamFireStore(String pathCollection, int limit, String? textSearch) {
+    if (textSearch?.isNotEmpty == true) {
+      return firebaseFirestore
+          .collection(pathCollection)
+          .limit(limit)
+          .where(FirestoreConstants.nickname, isEqualTo: textSearch)
+          .snapshots();
+    } else {
+      return firebaseFirestore.collection(pathCollection).limit(limit).snapshots();
+    }
   }
 }

lib/utils/debouncer.dart

@@ -0,0 +1,15 @@
+import 'dart:async';
+import 'dart:ui';
+
+class Debouncer {
+  final int milliseconds;
+  Timer? _timer;
+
+  Debouncer({required this.milliseconds});
+
+  run(VoidCallback action) {
+    _timer?.cancel();
+
+    _timer = Timer(Duration(milliseconds: milliseconds), action);
+  }
+}