Flutter Chat UI - Game Changer Package for flutter developers

hello developers few days ago this package flutter chat UI was published on pub.dev and this is game changer package for building chat UI in flutter because with the help of this package you can build this type of powerful and beautiful chat UI in flutter so in this video we are going to see how we can build chat UI like this in just few lines of code with the help of this flutter jet UI package so let's get started so I am going to create a new flutter project and uh it will be type of application and I need to select the path so this is the path and name it flutter chat flutter create running and it's done I think yes and in Menda Dart let's remove everything and write from scratch so void Main and run it and punched my egg and for run app we need to import the material.org and let's create a stateless widget called my app and here remove the container and write material and inside the home of material app use the chat page and for that we need to create the chat page so let's create a file called chat page dot Dart and it will be stateful widget called chat page and remove these two necessary import and import the material.orges and import chat page here on Menda dot as well and write a const here yes and debug so checked mode Banner Falls and now let's add this package that we are going to implement flutter chat UI so open Pub spec.tml and here after pubertino icons add and run flutter pubgate or you can click on this icon if you are in vs code once it's done go and chat page and remove the container and use scaffold and inside the body of scaffold just we need to write chat and done three things is required so we can use that so let's create a new variable called messages for that I'm going to take help from this documentation I will not write everything so I will copy these two lines of code one for messages and one for user and paste it here and here types that message is also defined in this package so for that I think I need to import some Library foreign types yes this line so add that line here and this is the underscore messages and this is the underscore user and on send test we need to create so I will not create because it will take more time so I am going to copy that from here on centrest I think that here on the last yes on Center place and it is taking ID as uuid and here you can see uh because this is also uid so if you are if you want it to be like just a normal ID I instead of using a YouTube ID we can give it some ID for instance so let's see some ID for example and add messages so we need to write that as well so let's copy that also from here add messages and paste it here and on send test instead of Onsen pressed let's copy and use this on handle send test and that's it we have successfully developed the chat UI and now we can run it and check it how it will look like so let's run it I'm going to run it on Linux okay so now it's running you can see here on my Linux machine and you can see the beautiful UI like right the typing box for messages hello subscribe subscribe and you can see also timing this beautiful UI that is all done just in few lines of code here you can see this is the power of this flutter jet UI package and if you want some Advanced version of it like here media files option as well that was like shown here in this example media files then you can take a look at this example section of this package and you will get a better idea like how you can Implement all those files and images in this package but this was the minimalistic version of this flutter chat UI like how you can implement it in your application I hope you understood it and it will help you in your next flutter projects if you found this video helpful make sure to like And subscribe

Channel: TDevelopers

Views: 13,685

Keywords: flutter app development, flutter tutorial, ui design, flutter, chat ui, flutter chat screen design, dark chat ui flutter, beautiful chat ui flutter, flutter chat app design, android development, game changer package for flutter chat ui, new flutter tutorial, flutter chat ui tutorial, flutter chat ui with attachments

Id: wkYNpJF_Hms

Length: 6min 13sec (373 seconds)

Published: Sun Oct 30 2022