Build a Flutter Chat App: 01 - Design/UI

[@achievementtop]

Bro thank you! Best tutorial on YT! Clean instruction, perfect speed. THANK YOU!

[@markuskankare2911]

I'm never see flutter videos with so clean instructions, your videos are so easy to follow and can’t wait for more videos to come! THANK YOU! :)

[@streamdevelopers]

Thanks you! We really appreciate this comment. Good news! The new Flutter video is out! Showing how to Code Your Own Instagram Clone With Flutter and Feeds kzbin.info/www/bejne/nHm1c2mBfNSUjJI

[@obviousabsurdity3181]

I dont comment often on videos but I must say that you do an amazing tutorial. The speed at which you conduct your video is great. I've learned a few tips as well along the way. Good job man

[@streamdevelopers]

Thank you, that's really nice to here. Striking a balance between too fast and too slow is hard, and comments like this help a lot 🙂. We appreciate any feedback. We also just published a new video that's in a similar style. Slightly faster pace, but with a companion blog post that provides all the code and steps: kzbin.info/www/bejne/nHm1c2mBfNSUjJI

[@SoftBuyProjects]

Sir Your videos are so clear and instructive for me, that I cant explain. Thnaks Sir

[@sydneykibanga6520]

From Tanzania...nice work

[@farruxxamidullayev1523]

i have been watching this vedio and i am following steps... now everythis is great.. bro thanks ;)

[@streamdevelopers]

Awesome! 💙

[@ghulammurtaza7959]

hi, this is a great series, but I was hoping you could add more series to your channel and develop more apps like this one.

[@sumitkumar-jn8he]

Nice Tutorial ,,,, waiting for the next part of this tutorial like with firebase and using bloc pattern.

[@streamdevelopers]

Glad you liked it! We're also working on blog posts for Firebase and Bloc! Videos for this will also come at some point!

[@cyjanschannel8059]

That's the best flutter tutorial I've ever seen, good job with it!

[@streamdevelopers]

Thanks for this feedback ❤. It's great to hear that people enjoy it.

[@humayunrashidchowdhury4865]

Thanks For a fantastic video tutorial. I completed 1st part successfully and dive into next part. I really enjoy the tutorial.

[@streamdevelopers]

That is great to hear, thank you for the feedback. We are releasing a new video soon, showing how to create a full application from scratch (in a single video, using our Feed SDK). If you like this one, then you'll REALLY like the next! Stay tuned

[@korovkin]

Please post more you are the best

[@alial-nuaimi2695]

I really love this guy 😂😂😂 my dude is stealing 😅😅😅 . GOD bless u bro🌹

[@uttamrohilla4793]

Amazing tutorial, i hope your channel grows fast, thank you for this tutorial🙏👍👍

[@streamdevelopers]

Thank you so much for the kind words. We’ll continue to make high quality videos 💪🏻

[@dev.faizan]

good suggestion from yt 💕

[@streamdevelopers]

Good KZbin

[@davidodartey2340]

clean video bro keep it coming

[@matomestr1970]

this video is so useful ❤️ Thanks

[@streamdevelopers]

Glad it's helpful

[@Gesh187]

Hi there I'm currently at 48:00 of the video where you added the ValuListenableBuilder widget and it gives me the error "The argument type 'Type' can't be assigned to the parameter type 'Widget Function(BuildContext, int, Widget?)'." when I try to type "builder:(BuildContext context)" Please I need help🙏🙏

[@minbhonepaing3833]

Nice Tutorial. Thanks sir

[@streamdevelopers]

You are very welcome! Hope you like part 2 :)

[@t_tek760]

Wow! Beautiful… kindly zoom in or increase your font sizes cos some of us use our mobile phones to watch your tutorials and it’s kind of hard to see what’s on the screen 🙏

[@streamdevelopers]

Will do!

[@roninspect4357]

Very clean and concise Video. Keep it up!

[@streamdevelopers]

Will do!

[@siddhantarawal2366]

hey at 1:32:13 my customscrollview is not wroking.it did the same as shown in video but it is not scrolling in mobile device? my code is return CustomScrollView( slivers: [ SliverToBoxAdapter(child: _Stories()), ], );

[@faheemahmadofficial7701]

Please upload more flutter videos and make it simpler yet powerful

[@streamdevelopers]

New video coming soon!

[@fiten9852]

finalmente um cara normal fazendo um chat no flutter sem ser aqueles esquisito indiano

[@victordziedzorm]

This is soo awesome, please am just curious. How long did it take you to get this good at flutter?

[@streamdevelopers]

Glad you like the tutorial🙂. I've been developing in Flutter for a few years now. But you can become proficient in a few months - depending on your previous development experience it may take more effort. Keep going 🚀

[@victordziedzorm]

@@streamdevelopers Thank you.

[@niloymehta7337]

Very helpful tutorial!!!

[@streamdevelopers]

Glad it was helpful! Episode 3 in the series is coming out soon.

[@analyticswithjaspreet]

Absolutely amazing , learning a lot !!!!!!

[@streamdevelopers]

Awesome 😎. Glad to hear that

[@MrKratosYT]

Bro at 1:38:08 where you have added Message Date: date i am getting a error at that point i have added final date = Helpers.randomDate(); Then Also it shows the error can you tell me how to remove it and whats the cause of the error as android studio doesnot show what kind of error is it

[@streamdevelopers]

Hi! Not knowing what the error message is makes it a bit hard to help. Have you created the Helpers class? Maybe you still need to import that class. You could also have multiple Helper classes? Maybe you're importing the wrong one, or it's using the wrong one. Alternatively, you can download the final source code from Github and see if that works for you. Best of luck!

[@yassinekhazzan4659]

great job man

[@streamdevelopers]

Thank you 😎

[@amhimeltech]

need your help in android light theme appbar text does not shown.but in dark theme appbar text show as white.

[@HaiJieBoy]

i am having the same issue as well :(

[@atifnawaz6909]

@@HaiJieBoy did you solve it?

[@HaiJieBoy]

@@atifnawaz6909 unfortunately no :/

[@rakshitsharma8657]

Hey, the Jiffy package is not working even after installing and importing it. What to do?

[@Raven-gs9oy]

im up to 1:40:00 and everything is great, but when I switched the theme to light the title in the app bar is white and cannot be seen. how to fix it?

[@AlperenTopcu-n1t]

Hey bro did you use flutter on VScode ?

[@talkbiz1]

It's a nice tutorial, but can you please explain how to use unreadChannels for Chat tab badges.

[@edwarddeveloper6088]

Brother thanks video tutorial

[@streamdevelopers]

You're very welcome. We're releasing a new Flutter video soon, which you will enjoy if you liked this one 🤩

[@mashilheiba1nm720]

Very neat, thanks a lot

[@streamdevelopers]

You're welcome

[@DerpyBurps]

Hi, does anyone know how to completely remove the labels for the BottomNavigationBar and only display the icons which are formatted in the center of the BottomNavigationBar. I tried selectedLabelStyle: TextStyle(fontSize: 0), unselectedLabelStyle: TextStyle(fontSize: 0), but it doesn't work. And I'm not referring to making the Lable: '' an empty string. I would really appreciate any help, thank you :)

[@anweral_sanabani725]

amazing dude could make a full stack chat app to similar or better than what's app ?

[@streamdevelopers]

👀We're actually creating an example showing how to create a Whatsapp clone in Android/Kotlin

[@sahilmehta1098]

can you guys please make more flutter getstream tutorials as so many of your widgets are deprecated n replaces like streamchannelllistcontroller. I have been searching a lot but couldnt find any recent video.

[@dimadivan7641]

Thank man! keep doing! hello from Lviv Ukrain)

[@streamdevelopers]

Thanks! If you keep watching we'll keep making 😊

[@omaralakeel3833]

That’s amazing 😍😍👏🏻

[@streamdevelopers]

😍🥰

[@mashilheiba1nm720]

01:43:18 does any know how to make the text in appbar black when themeMode is light?

[@mashilheiba1nm720]

Okay, for now, I wrapped the text widget with a card and made transparent bg, and 0 elevation, But, I don't this this is the right way, if anyone knows how to do it without wrapping with a card widget, please let me know

[@xandrexgaming]

sorry, can you explain how to make project in Android Studio? I created flutter project but it dont look nothing like yours.

[@iosgod07]

you ar the legend if you dont understand me my english is bad hahahaa thanks for you please contnue

[@streamdevelopers]

😎

[@AioriaPoderoso]

Amazing content new suscriber

[@streamdevelopers]

Thanks for subbing 💙

[@muro12345muro]

Is this MVC pattern or MVVM? What structures were used in this tutorial and is it the best approach of building an app in flutter? I need everyones opinion not only the author. Thanks in advance.

[@raghavjoshi4738]

It was perfect!

[@streamdevelopers]

😊

[@brodekt]

Can I build such an application through Windows? Android app

[@streamdevelopers]

Yes, you can! 👍

[@arslanriaz882]

Thank you

[@streamdevelopers]

You're welcome

[@AlexGreen.e]

Hello! could your tutorial be used with android emulator.

[@alihabibi-ew9ue]

how for voice message or what about sending audio or video or photo ...

[@streamdevelopers]

Hi! You can also use our complete chat package that provides everything out of the box: kzbin.info/www/bejne/poDCfoKAh9aMos0 Tutorial: getstream.io/chat/flutter/tutorial/ Send voice notes guide: getstream.io/blog/instantly-send-audio-messages-with-stream-chat-and-flutter/

[@manivannankumar1017]

chat app using xmpp is possible in flutter

[@ishaqsaeed]

Thank you so much

[@ڪشِٰاخ-ط8و]

Hello my friend . What version of flutter are you working on?

[@streamdevelopers]

Hi! Sorry, I do not remember what version I was using in this video, however, I recommend always using the latest.

[@ڪشِٰاخ-ط8و]

@@streamdevelopers thank you my friend 🥰

[@nataliagwenzi9762]

Hey bro can we have the application,, like the real. App we can install and use in our phones?

[@roopaish]

Very detailed tutorial. I love it. May be consider increasing the font-size a bit next time. Cause most of the time viewers like me will just binge watch on phone.

[@streamdevelopers]

Can do! Maybe slightly bigger, otherwise it also doesn't look good on a big screen. Tricky balance to strike. Glad you enjoyed the tutorial. Episode 3 will be uploaded soon!

[@roopaish]

@@streamdevelopers I was thinking of something like academind does in his videos. It's so easy on the eyes.

[@streamdevelopers]

@@roopaish Thanks for the suggestion, will check it out :)

[@GhDnFghDt177]

Why didn't you use Device_Preview library to suitable any type of Device?!

[@streamdevelopers]

That's a good idea, something we'll keep in mind for the future.

[@developerhan]

Confusion on the Messages page? Confusion arises when writing chat notification codes. There are codes that are not in the video while passing

[@streamdevelopers]

Are you using the correct branch for this video 🙂? Each video has a dedicated before and after branch. If anything is unclear please reach out.

[@spotnuru83]

Really nice tutorial and helpful too, I have one problem right now, i am at the part of CachedNetworkImageProvider, i am not getting the image in CircleAvatar, the url generated is fine but not showing in the app :( any help on this issue pleasE?

[@spotnuru83]

if i use NetworkImage it is working but not working with the cachednetworkimageprovider :(

[@streamdevelopers]

Hi 👋🏻, what platform are you targeting? If you're still running into this issue, let's open a discussion on Github.

[@chekhanimlhadj4608]

is this this ui free to use

[@MWStudiooo]

Waiting for next video 😭

[@streamdevelopers]

It’s coming soon😋

[@MWStudiooo]

@@streamdevelopers ❤️

[@streamdevelopers]

Anddd it’s here 🥳🙌 kzbin.info/www/bejne/Y6SYmohveZpgd6s

[@MWStudiooo]

@@streamdevelopers Thank you ❤️

[@streamdevelopers]

@@MWStudiooo It is out :)

[@cristianosantos3370]

while the tuturial overall is usefull, the ammount of times i need to delete and redo because you say its no longer a const or its not needed, is very frustating. im sorry but this is not exactly ideal to code along.

[@streamdevelopers]

Thanks so much for the feedback. The next Flutter tutorial should be easier to follow along 🙌, and we will keep this in mind for future videos

[@cristianosantos3370]

@@streamdevelopers i apologize for this negative feedback, but I am still learning to code and one of my lecturers does the same thing where in a tutorial video they keep writting and then deleting because they changed their mind. This makes it harder at least for me to code along. Since its a recording, avoiding this shouldnt be impossible and it would make it easier to follow.

[@streamdevelopers]

@@cristianosantos3370 We think you'll enjoy the next code along a lot more. Video should release on Monday or Tuesday. For that one there is a companion Blog post, that will make the code along easier, as you can copy over large chunks of code directly from the article.

[@obviousabsurdity3181]

I've been taking a flutter course for the past few months in my spare time and from what I've learned about flutter is there is ALWAYS refactoring constantly cause I asked the same thing as you to the instructor becuase he too kepts doing a few sections then would go back and redo or extract a widget or pull a method lol. Just the way the development works with this framework. Trust me after a bit you get used to it.

[@zacharykim8060]

Can I do this on Xcode 12.4?

[@streamdevelopers]

Shouldn't be an issue as long as Flutter runs fine 👍🏼

[@darkodebeljak3531]

I don't think that copy/paste most of the code is very useful when learning any programming language.

[@alseddekabolsaien3782]

Add group chats. Anybody can serch for room and enter like telegram

[@miro1588]

1:09:00

[@streamdevelopers]

👀

[@nash9785]

First 😄

[@streamdevelopers]

Cool profile pic

[@sahilkumar2953]

@@streamdevelopers cooler than mine?

[@streamdevelopers]

No, you win😂

[@TemiCodes]

Second 😄

[@streamdevelopers]

🙃

[@AnoopMasterCoder]

@@streamdevelopers Is it free??🤔

[@streamdevelopers]

@@AnoopMasterCoder Good question. There is a free trial for easy sign up and experimentation, or you can sign up for a maker account: getstream.io/maker-account/ which is free if your company meets certain criteria.

[@AnoopMasterCoder]

@@streamdevelopers Ok Thanks.😊👍

[@trustsage158]

I just came across this video and its so nice and comprehensive....please i would like to meet you on any social media, wanna have a conversation with you.