UI of message and firebase directing to chat created:

wq
xit
exit
wq:

lib/authorization/signupemail.dart

@@ -16,10 +16,11 @@ class SignUpMethods {
       required String userName,
       required BuildContext context}) async {
     try {
-      // ignore: use_build_context_synchronously
-      await sendEmailVerification(context);
       UserCredential userCredential = await _auth
           .createUserWithEmailAndPassword(email: email, password: password);
+      // ignore: use_build_context_synchronously
+      await sendEmailVerification(context);
+
 
       await _firestore.collection('users').doc(userCredential.user!.uid).set({
         'username': userName,

lib/pages/homepage.dart

@@ -1,7 +1,9 @@
 import 'package:chatapp/authorization/signupemail.dart';
+import 'package:chatapp/pages/messaging.dart';
 import 'package:chatapp/utils/color.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 class HomePage extends StatefulWidget {
@@ -72,24 +74,33 @@ class _HomePageState extends State<HomePage> {
               return const CircularProgressIndicator();
             }
             if (snapshot.hasData) {
+              // print("**************");
+              // print(snapshot.data!.docs[0].data());
+              // print(snapshot.data!.docs);
+              // print(snapshot.data);
+
+              // print("**************");
+
               return ListView.builder(
                   itemCount: snapshot.data!.docs.length,
                   itemBuilder: (context, index) {
                     // var userId = snapshot.data?.docs[index].id;
-                    var userData = snapshot.data?.docs[index].data();
+                    Map<String,dynamic> userData = snapshot.data?.docs[index].data() as Map<String,dynamic>;
+
                     return ListTile(
                       leading: CircleAvatar(
                         // You can use user image or initials here
                         // Example: backgroundImage: NetworkImage(userData['profileImage']),
-                        child: Text(userData?['username']
+                        child: Text(userData['username']
                             [0]), // Displaying the first letter of the username
                       ),
-                      title: Text(userData?['username']),
-                      subtitle: Text(userData?['email']),
+                      title: Text(userData['username']),
+                      subtitle: Text(userData['email']),
                       onTap: () {
-                        // Handle tapping on a user profile (if needed)
-                        // Example: Navigate to user profile screen
-                        // Navigator.push(context, MaterialPageRoute(builder: (context) => UserProfileScreen(userId)));
+                        Navigator.of(context).push(CupertinoPageRoute(
+                            builder: (context) => Messaging(
+                                otherPersonName: userData['username'],
+                                otherPersonId: userData['uid'])));
                       },
                     );
                   });

lib/pages/messaging.dart

@@ -0,0 +1,96 @@
+import 'package:chatapp/utils/color.dart';
+import 'package:chatapp/widget/chatwidget.dart';
+import 'package:flutter/material.dart';
+
+class Messaging extends StatefulWidget {
+  final String otherPersonName;
+  final String otherPersonId;
+
+  const Messaging(
+      {super.key, required this.otherPersonName, required this.otherPersonId});
+
+  @override
+  State<Messaging> createState() => _MessagingState();
+}
+
+class _MessagingState extends State<Messaging> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+    return SafeArea(
+        child: Scaffold(
+      resizeToAvoidBottomInset: true,
+      backgroundColor: backgroundColor,
+      appBar: AppBar(
+        title: Text(
+          widget.otherPersonName,
+          style: TextStyle(color: Colors.cyan.shade100, fontSize: 25),
+        ),
+        backgroundColor: darkBackgroundColor,
+      ),
+      body: Padding(
+        padding: const EdgeInsets.only(right: 8, left: 8),
+        child: ListView(children: [
+          Container(
+            height: size.height * 0.8,
+            width: double.infinity,
+            // ! child: ,  Column will come here to show chats
+            // color: Colors.deepPurple.shade200.withOpacity(0.2),
+            decoration: BoxDecoration(
+                gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                  Colors.deepPurple.withOpacity(0.2),
+                  Colors.deepPurpleAccent.withOpacity(0.2),
+                  const Color.fromARGB(255, 208, 5, 244).withOpacity(0.1),
+                  const Color.fromARGB(255, 210, 13, 228).withOpacity(0.1),
+                  Colors.pink.withOpacity(0.2),
+                ])),
+            child: Column(crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ChatWidget(size: size,isMyChat: false,chat: "Satyam is my name heres the first chat",),
+              ],
+            ),
+          ),
+          Expanded(
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: TextField(
+                onTapOutside: (event) =>
+                    FocusScope.of(context).requestFocus(FocusNode()),
+                style: const TextStyle(fontSize: 20),
+                canRequestFocus: true,
+                decoration: InputDecoration(
+                  suffixIcon: IconButton(
+                    icon: Icon(
+                      Icons.send,
+                      size: 40,
+                      color: Colors.blueGrey.shade900,
+                    ),
+                    onPressed: () {}, //! send chat
+                  ),
+                  border: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(30),
+                  ),
+                  fillColor: Colors.deepPurple,
+                  filled: true,
+                  hintText: "Yeah , why not..",
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(
+            height: 10,
+          )
+        ]),
+      ),
+    ));
+  }
+}
+

lib/widget/chatwidget.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+class ChatWidget extends StatefulWidget {
+ final bool isMyChat;
+  final String chat;
+
+  const ChatWidget({
+    super.key,
+    required this.size,
+    required this.chat,
+    required this.isMyChat,
+  });
+
+  final Size size;
+
+  @override
+  State<ChatWidget> createState() => _ChatWidgetState();
+}
+
+class _ChatWidgetState extends State<ChatWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: widget.size.width * 0.45,
+      decoration: BoxDecoration(
+        shape: BoxShape.rectangle,
+        borderRadius: BorderRadius.circular(30),
+        gradient: LinearGradient(
+            colors: widget.isMyChat
+                ? [
+                    const Color.fromARGB(255, 173, 58, 183).withOpacity(0.2),
+                    const Color.fromARGB(255, 221, 61, 215).withOpacity(0.2),
+                    const Color.fromARGB(255, 208, 5, 244).withOpacity(0.1),
+                    const Color.fromARGB(255, 210, 13, 228).withOpacity(0.1),
+                    Colors.pink.withOpacity(0.2),
+                  ]
+                : [
+                    const Color.fromARGB(255, 147, 227, 129).withOpacity(0.2),
+                    const Color.fromARGB(255, 71, 205, 87).withOpacity(0.2),
+                    const Color.fromARGB(255, 66, 199, 117).withOpacity(0.1),
+                    const Color.fromARGB(255, 21, 235, 85).withOpacity(0.2),
+                    const Color.fromARGB(255, 57, 194, 86).withOpacity(0.1),
+                  ]),
+      ),
+      child: Text(
+        widget.chat,
+        style: const TextStyle(fontSize: 20, color: Colors.white),
+      ),
+    );
+  }
+}