🏊‍♂️Streams in Flutter in 1 Shot | Learn about StreamController and StreamBuilder in Flutter

welcome back to a new video and in this video we are again going to cover one more flatter concept that is streams right so let me put the topic of the day that is streams in flutter right so as the name defines so what comes in your mind when you hear the word streams so in my mind a river comes so let me draw a river so let's say this is a river right this is a river and now uh as you know that in a stream of river uh if you put anything if let's say you are putting a box over here you put a box over here so you know that after some time it is going to come and flow like this it's going to come here it will be visible over here it will be visible over here so I can say that in a very layman terms I'm trying to explain you so that your concept gets very clear let's say if I put one person over here and he's continuously watching this river right so he is going to get this box image right he is going to see the box coming right so I can see I can say that uh if this uh man I can call it as a subscriber and I can say that this subscriber has subscribed to this River so what happens in a subscription so if I have subscribed on a YouTube channel then whatever video uh the content character is going to make and put on the YouTube I'm going to get a notification I'm going to get a snapshot I'm going to get a uh like I I will get that uh content creator has uploaded some content right and I I can watch it so this means that a subscriber uh can listen to this River or listen to The Stream right so this is pretty much Clear till now so uh let me just clear everything I think that basic idea is clear now let's get into some technical stuff so this was all about non-tech stuff now you have got a very good idea now let's try to get into more technical terms so let's say uh this is my stream and this whole system is going to be called as a stream controller this is called as stream controller consider this as my river right now over here I am going to put my data in right so this is called sync and I can write in the bracket as input and you can consider this like a pi pause or a river also so whatever data you are going to get uh you're going to put inside this pipe it is going to come out also right and this will be my output and this is called stream right so it is continuously uh it is coming out so that's why it is called Stream So output is called stream input is called sync I think this much is clear now all let's say you have only one subscriber right so I'm going to put my subscriber over here who is going to listen to this stream controller and whatever data I put inside this stream it uh the person is going to listen to it person is going to get that data right so this is called single Stream So this whole system is called single stream now we have one more concept of broadcasting so this you also need to remember that one stream only one subscriber can listen so if this subscriber is listening to the stream then I cannot have a second subscriber listen to the same stream right so this you need to keep in mind so if this is my stream of data and this subscriber is listening to this stream then this subscriber the second subscriber cannot listen to the same Stream So This is a concept so in this if I want to have one more subscriber if I want to have one more subscriber then I have to have one more stream right so this is the second string and then this subscriber can listen to the second stream I hope this is clear right and if I want to have one more subscriber in the flutter widget you can consider subscribe as a flutter widget right this is a flatter widget these are the widgets which are listening to this continuously uh which are listening continuously to this data stream right so if I if I want to have one more widget listening to the stream then I have to have one more stream okay in the same stream controller you need to see that the same data will flow inside the streams but streams are different because one stream only one subscriber can listen but the data inside the stream is same right so if I want to have one more subscriber then I will have one more stream I have to create so I guess this was all about theoretical part of uh streams and flutter and uh just to revise everything uh so what is a stream so you can consider stream as a river let me just clear everything so just to revise this is my stream over here I will have input which is called sync so this is sync is nothing but a function right we are going to use this function to put data inside this stream this will be my output which will which is called as stream and you this is also again a function or you can say a data Stream So if you want to get the data you have to write like let's say stream controller dot stream and you are going to get the data inside this string right this complete stream controller and this whole system it is called as stream controller right and we have some widgets which can listen to this data stream and they are called as subscribers so this is a subscriber you can have multiple subscribers but if you have multiple subscribers then you have to have multiple streams flowing inside the stream controller so this was all about it let's go to the coding part so let's begin uh coding so first of all you can see that my web app is on and uh this is just a new brand new flutter application so I'm going to remove everything from over here in the main.dart and I'm going to have my own stateless widget that will be called my app it is going to return a scaffold right so in the scaffold I'm going to have an app bar and an app bar let's just save it and let's see what we get so let's refresh it and okay no media query widget access are found require media okay so what I did was I did a very silly mistake I need to Define I forgot that this is a new app so material app and in the material app I'm going to have a home in the home I'm going to have a let's say a scaffold in the scaffold I can have an app bar an app bar so let's just save it let's just refresh it let's see what we get we get a simple app bar and the material app I can just remove my banner and after this I can have my stuff so in the body I'm going to have a simple container with a child column in the column I'm going to Define main access alignment as main access alignment Dot Center also I'm going to wrap this thing with the center I'm going to just uh save it and in the column in the children I'm going to have uh two things so first one will be a simple text I'm going to keep it initial for now and then I can have some constant sized box with a height of 20 you will get it what I am doing right now and then I'm going to have a simple text field and then a simple elevated button which says done so I'm going to have child as text and this will say done right so you can say I am having uh these things and first for now just let me uh disable my lint so that it doesn't give me those blue warnings which I just want to ignore for now but usually you should enable it if you are making a good project right so let's just refresh it and let's see what we get so I'm getting a text over here and I'm getting a text field over here right so let's have the same constant size box over here and let me wrap this text field with a size box you can say with a size box with a width of with a width of let's say 200 and let me also give this thing as some Style as text Style font size let's say 30 and font weight dot bold so our UI is ready and let's just refresh it perfect and I'm getting my text over here my text field over here and a button over here now what I want to do is I want to wrap this text you can see this text widget initial I want to wrap this with a stream Builder why stream Builder because if you are building uh if you're use if you want to use a stream controller then in whatever widget you want to use the data from that stream build a stream controller you need to wrap that widget with a stream Builder so first of all let's keep it very simple first of all let me uh make it stateful and over here let me Define a stream controller you know as as per the theory there is a stream controller the complete system right so I'm creating one system over here so let's create a stress system and this system is going to return me string because I want to update this text data and this text data can be string and it can be integer then you can convert it to a string but let me let me keep its string so what I want to do is what my aim is whatever I'm going to write over here and click on done this should get updated using stream controller stream Builders using streams basically right so this will be continuously listening to that stream controller so what I want to do is as my data will be in the string format so this stream controller will always return me string right and let me call it as stream controller is equal to a stream controller stream controller and this will be of type string perfect so my stream controller is ready so my system is ready right now I want to put in data I want to extract data right so only two things are left so for that as you know that this is my text widget which should listen to The Stream controller which will be my subscriber right so we have got the right word subscriber so if you want to make this text as a subscriber then wrap this text with a stream Builder you can see I have wrapped my text with a stream Builder now this stream Builder has a stream and it has a builder right so what you can do is you can Define the stream as the stream controller dot stream so what I'm doing is I'm getting the output of that stream controller as I told data stream controller has two things input and output I'm extracting the output so output was called stream so I'm extracting that output right this is good perfect now my Builder has context and snapshot so in this snapshot what I can have the snapshot is very important so I can check if my Snapshot is it is basically this contains the uh snapshot what is the snapshot snapshot is an image so if I'm standing over here with a camera and I'm clicking your image that means I'm taking a snapshot of you at a particular instant so this snapshot can have data right so if snapshot dot has data I'm checking if my Snapshot has data then return this text with snapshot dot data so this snapshot if my Snapshot has data then uh return me that data right so let me just save it else what I can do is I can Define else if my Snapshot does not have any data then you can return the same text but you have to say no data so this will be like my initial thing till the time I do not get and yeah one more thing you can you have defined stream Builder over here and you know that your stream controller always returns a string so my stream Builder will always get a string right so this object will become string now you do not need to write dot to string over here so what it says it yeah so it can be null right so I can say that if it becomes null then you can say like this but yeah you can say so if it comes null if null data comes then you can show an empty string right or you can say null data received null data like this right all right I think this much is pretty much clear now what we can do is now we can start adding the data right so let me Define One controller text editing controller basically text editing controller text editing controller is equal to text editing controller right and I can give this text writing controller to my text field where is my text field uh yeah here's my text field I can give that like this and now what I can do is first of all let's just print the data let's just print text editingcontroller.txt as soon as I'm going to click on that button let's see if what we get right so let me just take it up yeah so let me just refresh it and let me write akshit done I'm getting akshit over here right so this means my controllers are working perfectly now what I want to do is I want whatever I have written I want to add that data to my controller that means I'm inputting the data so let's add the data so for adding the data we have an add function previously it was sync function right so let's write it uh so it will be my stream controller dot add and you can Define any string and my string will be nothing but my text editing controller dot text so let's just put a semicolon and we have written everything let's just refresh it and yes this is the case of single stream right we are not using broadcasting Stream So broadcasting stream means when you have multiple subscribers currently I am having only one subscriber you can see only one stream Builder is there so stream Builder is nothing but a subscriber so let's write akshat you can see akshit let's write uh let's write any name let's say Raj so Raj let's say India so it will become India that's that means my stream controller my subscriber is listening to this River this is a river right and this subscriber or this viewer is seeing this River so whatever data is going to get in the river this viewer can view it and here she can change it or the subscriber can change it right so this was a single string now let's have multiple streams that means a broadcasting stream right so for that what I'm going to do is I'm going to have and yes what I told was a one subscriber cannot uh or one stream cannot be listened by multiple subscribers right so let me show you the example let me just copy the stream Builder and let me just paste it over here let me just save it let me just refresh it yeah so I can see the error over here you can see this is the error and this error is the same that your already your stream has already been listened right so you can listen to it you can see what it says uh where yeah stream has already been listened to right so I need to Define one more stream so what I can do is I can Define uh you do not need to Define multiple stream controllers what you can Define is you can Define one stream late stream a stream or you can say data stream perfect so I've defined late stream data stream and I can have uh in its state and you can have init State function so in this initi state function I am going to uh uh Define my data stream as stream controller dot stream dot as broadcast Stream So this means multiple streams are created now multiple streams so as many subscribers you have those many streams will be created and you can use this same stream controller right let me just save it and what I can do is I can uh now this is my one thing so now you do not need to write streamcontroller.stream you can directly write data stream right so you you know that this takes a stream right and yeah data stream should be yeah so what you can do is over here stream you need to Define as of type string perfect so my data my error will be gone now so over here in the second subscriber also you can write data Stream So Perfect let's just refresh it and we can say we are having two widgets over here two subscribers so if I just write akshit you can see both of them are listening to my uh the same stream they are listening to the same stream controller right so this was it now you might have used already you might have already used stream builders in Firebase so if you have built any project using Firebase Cloud firestore where you were retrieving the data right so you must have used stream Builders to continuously listen to it but now you have understood what is this stream Builder what is this stream right this is just a river in which continuously flow data is Flowing right so this was it about uh if you are building a project where continuously you have to listen to the data incoming data then you can use stream Builders uh in the next part I'll try to cover a block pattern because uh most of you are uh like demanding for having a course on block pattern so I'll try to have a course on block so if you're really interested in learning block then write interest rate in the comment section I'll make that course as soon as possible right so I hope this was useful this was interesting so hit the like button subscribe to my channel till next and then keep coding keep on waiting and thanks a lot

Channel: Akshit Madan

Views: 13,832

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: tnYTHacU8Z0

Length: 19min 0sec (1140 seconds)

Published: Wed Dec 21 2022