💬📱 Minimal Chat App • Flutter x Firebase Tutorial
Vložit
- čas přidán 9. 07. 2024
- 💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatA...
📱 Flutter Courses • mitchkoko.app/
👨🏽💻 I'm coding a startup.. / mitchkoko
/ createdbykoko
/ createdbykoko
/ createdbykoko
💰 Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
~ ;
A sleek minimal chat messenger app made with Flutter x Firebase database. Light & Dark mode.
✏️ Whiteboard app I use: app.eraser.io/
~ ;
⌚️ TIMESTAMPS
0:00 Intro
2:22 Light mode
3:22 Login & Register page
15:23 Connect Firebase
18:28 Authentication
26:10 Menu drawer
30:16 Display users
40:55 Send & Receive messages
50:05 Decorate UI
54:53 Dark mode
1:00:50 Scroll fix
~ ;
🔗 CONNECT WITH ME
📺 / createdbykoko
🐦 / createdbykoko
📱 / createdbykoko
💻 GITHUB • github.com/mitchkoko/
🖥 WEBSITE • mitchkoko.app/ - Věda a technologie
💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatAppMasterclass
📱 Flutter Masterclass • mitchkoko.app/
🔥 I'm coding a startup.. www.patreon.com/mitchkoko
Another great tutorial, thanks Mitch! This is the 5th mini app I create following a tutorial, I kinda know what I'm doing now, thanks to you! Keep up the good work!
Thank you so much for your hard work!
So fun to watch this. Awesome video buddy. Subscribed!
The intro part was awesome !! with 00:01 working app demo and 00:21 the usage flow of user. Please keep this continue in every tutorial. As a beginner it really helps to see in visualization that what we are going to do 😅
incredible video! thanks mitch
Thank you so much for this tutorial! It served as my Dart/flutter bootcamp!
Thanks learned so many things.
As someone getting into Flutter this is really cool!
Your videos are of great help in my flutter journey dude. I like the fact that you not only demonstrate but also explain why you do specific things. Also, can you make a video on how to set up the emulator you use? I want to configure one just like that. Well appreciated!
Thanks buddy, very helpful!
buddy you are life saver, your content is amazing, short videos and easy to understand, thanks again buddy
terrific tutorial - your one hour took me seven hours to follow but I was able to follow the entire tutorial.
great job! it took me much longer than one hour to code it up and make this video haha. it took me maybe 1 week all together. But in the end you get this condensed 1 hour tutorial ❤❤
Your in-depth insights are beneficial! 🔥🔥
Could you make a video that delves into planning complex apps? It would be great for beginners like me to see:
1. Steps to plan an app effectively
2. Common workflows (like login, settings, etc.)
3. Do you have any other helpful tips you can share?
Starting out in app development can be overwhelming, especially with planning and database design. I often find myself eager to design the screens but need help in the earlier stages.
Your guidance would be a game-changer!
What a great tutorial bro, Hope u will keep it up
"Wow, this tutorial is a gem! 🌟 Your clear explanations and step-by-step guide made it so easy for me to grasp Flutter x Firebase integration. The minimal chat app looks fantastic! 👏
Thank you, for sharing your expertise and making complex concepts so accessible. Your teaching style is superb! 🚀 The way you handle each detail showcases your passion and commitment to quality content. 🙌 I appreciate the time and effort you put into creating such valuable tutorials. Can't wait to explore more from your channel! 🌈 #Flutter #Firebase #CodingSimplified"
Great tutorial!!!!👏
Thank you Mitch for adding a great starting explanation of the workflow of this app design.
Loved your new idea of explaining apps. ❤
man you deserve millions of subscribers
Man! this is awesome!,😇
Another great tutorial! apart from the styling and dark mode is this app any different form the previous messaging app you made?
Thank a lot for this 😇
Thats so cool dude
Congratulations for your 100k sub 😊
Thank you so much for this tutorial. Hope you will do more 😻
more to come! what app do u wana see me build
just paid the 25 usd registration fee as developer in google because I'm sure i will create good stuff thanks to your tutorials
Thanks for all of your great tutorials ❤
My pleasure. How’s flutter going for you these days?
@@createdbykoko Going well actually! Thanks to you, many of my tasks were done easily
Thanks!
As a newbiew in the world of coding, people told me that building projects is the best way to learn mob dev and other related stuff, and you make it easier and soo much fun, glad I found your videos😌
Haha amazing! How did u find me?
@@createdbykoko idk him but i find u searching login pages in flutter and this video od minimun chat appears
yo, I love this kind of videos, and I really would like to see an app building with dependencies injection and clean code together
glad you like it! what do you mean exactly by 'clean code'? I try to make my code as clean as possible. Any feedback is welcome
Well I have just completed the tutorial and I have been able to create the app successfully, Thank you Mitch. It has taken me 8hrs to follow up with some errors to solve obviously but it was worth it🤗
is it with backend or just design
@@noureddineaharbach1674 Yes with Backend
Thanks my teacher. ❤
Your videos makes me motivated about learning flutter thank you. I want to see an azure authentication in flutter application
How would you make the app to send your phone popup notifications? So you know you got a new notification if your phone is off
Thanks a LOT, You are one of the best mentor, I will can not explain in word that how much you help us, Big Big Thanks, Thank you so much and please continue teach us free like this, Thanks a Lot Dear ❤
TAKE LOT OF BIG LOVE ❤
my pleasure ❤❤❤❤
Thank you ❤
hey mitch i had a quest how hard to add notifications for chat bcs no body did it before i hope u got a clue to make it easy for us to understand
sos un capo
hey , great tutorial , as always ! I have a question , why use a container instead of one of the button widgets ?
thanks so mutch)from Kazakhstan
How user can get to know of new messages without going to the conversation?
They should be indicated if any conversation holds new unread messages from the homepage.
16:18 onwards important to get it to work if programming from different machines!
Thank you, to make these graphs like UML what software do you use?
Thank you for the nice video.
When I watch your videos, I get a lot of suggestions. Are you using any additional plugins?
For example, if you type stf, the outline of the Stateful Widget will appear...
thankyou🖤
if u want to put logout (which was in drawer) to go bottom , u can user spacer() and give safe area to that column so that u don't have to add bottom padding. also thanks for this videos
Hey thanks for that! That is an amazing solution that I will now use ❤️❤️❤️
hy mitch!
can u tell how to show last msg of firestore on chat view screen
thank you too much. i wrote my own chat app with you :)
You singlehandedly make me want to learn flutter. I am a react dev.
Come to the dark side
@@createdbykoko 😂😂
I don't can install Firebase on flutter, but the Firebase CLI is installed.
Amazing video. Thank you 🤩
Even though the video last only a bit over an hour. It took me a whole day to play it through and understand it.
I loved your custom made button and created my own custom made text.
I do not understand why flutter is making everything so complicated. Now I can deal with it, as I hide the complexity of calling style: TextStyle(color: simply in my custom made text to an optional attribute fontColor:
I hope with the knowledge learned here I can use your chess app and make it into an app I can play with another user.
Similary I would love to see a battleship app with nice ships to move around and see them explode.
PS: How to you invite someone to chat/play with you?
You can also use theme: as a background color in the main.dart and don't need to provide the background color in the entire app.Also i started flutter by watching your amazing videos.
Hey Mitch ! Thanks for the tuto. Do you have another solution in case npm -g install firebase-tools doesn't work ? In my cas npm is not even recognized.
hello koko how to make the chat page for multiple users not only between 2 users but anyone who wants to join
how did you make that rotational app animation at beginning - 00:01 ? 🤔
how to add new user for chat?
Which tool are you using to draw app diagrams?
Qestion,
what if we have 1 000 000 messages,
and each time we open the chat it fetches all the mesages from firestore,
Is there simple optimised way to handle with existing flutter widgets?
or we have to create our own logic for pagination?
I don't can install Firebase on flutter, but the Firebase CLI is installed? Can someone help me?
When closing the application, the theme settings are undone, how do I fix this?
hey mitch can you make the tutorial on awosome notification package
if i want to show only those users which i just text not all users then which query we will use.
How to get the count of new messages
Mitch what if you create a full road map flutter course with various projects and then upload to Udemy academy
How do you delete created account? I mean from the UI? I can delete the account from firebase, but it still shows the created account in the message receivers?
how do you create that app intro its dope i want to know
Thank Youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
This video is great. I'm a bit stuck at the moment (I'm very new to this stuff). I can't get npm or firebase commands to work in my Android Studio terminal (like you are doing around 16:30), only in an external terminal. They aren't talking to each other then. How did you get firebase to work in your terminal? Do you have the setup in another one of your videos?
I figured out how to do this on my computer. If anyone else is stuck with this (on Windows), you need to open the command prompt, navigate to your project folder on your computer (cd) then run the firebase cli from that location. You should then be able to do all of the commands that Mitch is doing from the command prompt instead of the terminal within your IDE.
What app did you use to make the flowchart in the intro? Great video btw, as always!
Same question
at 21.00 when i try to login throwing error as Exception: [firebase_auth/invalid-email] The email address is badly formatted. i gone cross checked but everything looks fine
can u share this git repositoy link plz share it fast
can You gave us the code
can you please make videos on getx state management
hello friend. nice to see you here again. you are mso missed.
Is your flutter project possible only with ios?
What is your operating system?
Is it possible to operate a window operating system?
now I'd like to see you doing smthng more challenging....make something new and a level up! Appreciate ur work!
Are there project files on Github please?
Hello, I have a question
Is this app perfect?
Does it mean that person A and B install the app on their mobile phones and chat with each other?
Or is this training course only user interface?
yes
Can you please make a video on how to make chats end to end encrypted please. Request from India❤
Have someone coded this app?
Hi mitch i am having difficulties Fetching the messages from firebase for each chatroom, how ever i did everything you did and explored AI for help but i failed.
I need help.
you got the solution?
Sir, Is there any tutorial you uploaded to get a push notification for a new message ??
Working on it haha
@@createdbykoko please upload it soon, waiting for it..
please what software you used for Video editing ?
I started using Davinci Resolve
Hi Mitch, Ive been making this app but I was wondering how can I implement a search filtering for displaying user...Please help!
Everyones suggestion is appreciated....
Remove this code .orderBy("timestamp", descending: false)
ddualingo app firebase????
Good afternoon! Please tell me, the message is not displayed in the chat page. I can't find the error and it doesn't show in the console. Thank you
Remove this .orderBy("timestamp", descending: false)
💜
Please sir how can i connect my existing php website to my flutter app..
Thank you..
Step by step please I'm a beginner
create ApiService for that and make a base url for your endpoint. call the getRequest, postRequest, deleteRequest depends on your requirements.
I get error from authentication as "channel-error" from Exception. How should I solve this?
Bro do you found solution for that?
No, I again started coding from start and now it works. I don't know why I got that error.
@@gokulg400 oh my god so i need to do this code again??🥺
everything is fine,but i can't get messages from firestore database into my individual chat page,plz tell me whats the reason?😮💨
I am having same issue, did u fix it?
did you have any tutorial for firebase
czcams.com/video/iQOvD0y-xnw/video.htmlsi=P1kBFWCqdk7TpcIo
Hey Mitch, your tutorial is awesome but I just noticed a problem. Since we don't save the 'Dark Mode' status locally, every time we relaunch the app it pops up in light mode. I will really appreciate your help on this. Thanks tho!💕
you should get to know 'shared preferences' for flutter 👍🏻
thanks @@thisisAcidic
What's the java version installed in your computer ??
What's the required java version needed to be installed?
Hello ! when i press teh send buton using send fucntion the message is getting stored in firebase but iam noty able to display. but when i comment orderby in getmessages iam able to display message .. what is the issue?
Remove this code .orderBy("timestamp", descending: false)
@@DreamyLofiHaven i have removed that and it still doesn't work
Сделай урок про такое же приложение только с использованием flutter_bloc
my drawer is not coming when write drawer: Drawer() the doest show up why is that?
It should work. Do you have an app bar as well?
yes I have app bar but I am using getx maybe this is a problem and I also have controller file of Home Screen@@createdbykoko
❤
❤️🔥🔥
my messages is not showing on user's chat page
am stuckk here!!!!
did you resolve it?
@@akshithjadhav7576 no.
how to lrean flutter???
📱 FULL Flutter Beginner Course czcams.com/video/HQ_ytw58tC4/video.html
@@createdbykoko bro i know this bro... but i want know the technic to lern flutter from this effictively...
all the code is correct. but the chats are not displaying in the ui . but the messages are displaying in console. how to fix this?
Firstly then make sure the firestore part has been followed correctly. Sometimes it can be easy to miss steps. Did you make sure to update the read/write rules in the console?
49:20 is where my UI is not displaying the text. But in firebase console, The sent texts are displaying. How to fix it?
@@createdbykoko i'm stuck here too, read/write is true in console and write-usage is also showing on console. Please help I have checked code 3 times
@@shivaksh17 You got any solution bro?
@@udaykale5017 no I am facing the same issue.