Stateless vs Stateful Widgets

7 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €128.82
You save:  €36.80
List Price:  £110.08
You save:  £31.45
List Price:  CA$190.82
You save:  CA$54.52
List Price:  A$209.88
You save:  A$59.97
List Price:  S$188.54
You save:  S$53.87
List Price:  HK$1,092.41
You save:  HK$312.14
CHF 90.94
List Price:  CHF 127.32
You save:  CHF 36.38
NOK kr1,066.52
List Price:  NOK kr1,493.17
You save:  NOK kr426.65
DKK kr686.58
List Price:  DKK kr961.24
You save:  DKK kr274.66
List Price:  NZ$229.42
You save:  NZ$65.55
List Price:  د.إ514.17
You save:  د.إ146.91
List Price:  ৳16,407.24
You save:  ৳4,688.11
List Price:  ₹11,662.65
You save:  ₹3,332.42
List Price:  RM656.90
You save:  RM187.70
List Price:  ₦210,447.11
You save:  ₦60,132.04
List Price:  ₨38,992.14
You save:  ₨11,141.40
List Price:  ฿5,082.79
You save:  ฿1,452.33
List Price:  ₺4,507.71
You save:  ₺1,288.01
List Price:  B$714.60
You save:  B$204.18
List Price:  R2,537.04
You save:  R724.92
List Price:  Лв251.91
You save:  Лв71.98
List Price:  ₩190,664.95
You save:  ₩54,479.59
List Price:  ₪514.40
You save:  ₪146.98
List Price:  ₱8,149.72
You save:  ₱2,328.66
List Price:  ¥21,869.30
You save:  ¥6,248.82
List Price:  MX$2,314.17
You save:  MX$661.24
List Price:  QR510.95
You save:  QR145.99
List Price:  P1,893.35
You save:  P540.99
List Price:  KSh18,443.68
You save:  KSh5,270
List Price:  E£6,531.96
You save:  E£1,866.40
List Price:  ብር8,048.47
You save:  ብር2,299.72
List Price:  Kz118,781.51
You save:  Kz33,940
List Price:  CLP$124,689.09
You save:  CLP$35,628
List Price:  CN¥992.06
You save:  CN¥283.46
List Price:  RD$8,197.17
You save:  RD$2,342.21
List Price:  DA18,818.91
You save:  DA5,377.21
List Price:  FJ$316.30
You save:  FJ$90.37
List Price:  Q1,088.58
You save:  Q311.04
List Price:  GY$29,312.64
You save:  GY$8,375.63
ISK kr13,829.61
List Price:  ISK kr19,362.01
You save:  ISK kr5,532.40
List Price:  DH1,388.28
You save:  DH396.68
List Price:  L2,468.10
You save:  L705.22
List Price:  ден7,927.89
You save:  ден2,265.27
List Price:  MOP$1,125.59
You save:  MOP$321.62
List Price:  N$2,551.60
You save:  N$729.08
List Price:  C$5,156.79
You save:  C$1,473.47
List Price:  रु18,671.39
You save:  रु5,335.06
List Price:  S/523.71
You save:  S/149.64
List Price:  K544.29
You save:  K155.52
List Price:  SAR525.03
You save:  SAR150.01
List Price:  ZK3,618.24
You save:  ZK1,033.85
List Price:  L640.63
You save:  L183.05
List Price:  Kč3,179.41
You save:  Kč908.46
List Price:  Ft49,588.32
You save:  Ft14,169.10
SEK kr1,065.66
List Price:  SEK kr1,491.97
You save:  SEK kr426.30
List Price:  ARS$124,416.25
You save:  ARS$35,550.04
List Price:  Bs968.19
You save:  Bs276.64
List Price:  COP$536,283.39
You save:  COP$153,234.77
List Price:  ₡71,712.40
You save:  ₡20,490.72
List Price:  L3,462.95
You save:  L989.48
List Price:  ₲1,048,881.93
You save:  ₲299,701.95
List Price:  $U5,391.37
You save:  $U1,540.50
List Price:  zł548.01
You save:  zł156.58
Already have an account? Log In


Hello, in this video, I'm going to show you the difference between a stateless and a stateful widget. So our second page is a stateless widget. Whereas if we go back to here, this is a stateless widget but this is the page that's been displayed. It is the my home page which is essentially page one. And they linked with the my homepage state which extends that they put a the stateful widget. What happens is because we pass in some data and that gets assigned to this, you know the title weapons if, you know while we're on this page, instead of saying on pressed PVC was exactly what I wanted.

Before. We ever know it was this, which you know, ledges Navigate back, instead of that, what if I wanted to do str equal because of the you know, default navigate button so we can override this one? Let's say for one they thought was too Restart that. Hot reload, sorry. And I clicked that this doesn't get updated. Okay, my thinking you need to call the second statement.

So let's do that. But if he doesn't appear, so let me literally get the format from here to make sure I'm talking clearly so set state cut it from here. Correct directly here. As effectively an error, the error is this does not exist. And it is because a stateless widget once it has been created, once you know the code have been built, it cannot change. That is that you can't do any changes within it.

You know, any variable changes to update the widgets, the columns, the, you know, the containers and that if you can't do that, so if you just want something simple, and maybe the information page and you can pass data into it the truth we can't really change it while it's one in each If you do want to do changes, you need to have a date widget like so. So let's make this into a stateful widget. So if we do stateful widget, we're going to get a few hours. So what we also need is we need this right here, copy the copy that put over here. And instead of underscore my homepage state, I'm gonna say underscore second page state. That can state copy down here.

This down in this deck, we are going to need this right here was sent in this format. And what we are going to do is we are going to say on a second page date, look up there that needs to be that second page classic I see go to my my thinking do we not need this, this is only required, you know, initially to basically get everything set up. You don't really need to do this again. Okay, so you can see the arrows have disappeared but we don't want this in here. We want this inside of this. So we'll basically cut this cut and we'll replace all of this and put it here.

Now we don't have this at all. Okay, str was here. Let's have a look at the best way to do this. We've got some data passed in we could literally just pass that through. So we can just say second pages state, second page state, we can say SPR Like so this will be second page and variable costs. So don't need the key.

So now if we will to hot reload matrices still working. Okay some guy around second page analysis type of type stateless widget, second page where this error actually in QB the first Pedram you're actually invoking Let's have a look in the current year to make sure to delete this hot reload occurs there are ways to do that don't work we find one do this now. So instead of navigate to push, new navigator, dot still doing the push with only two should just be as yet hot reload Okay, okay, that's working. Now they know why it wasn't working before, probably just needed a full App Review. Okay, so we've got a working only the Batman button was smaller don't really matter. So now if we was to do set state and do hot reload, then forget Superman.

Click Go back. I think the dashboard now have data for that. And you have another page that is a stateful widget, therefore you can update the content on the flight. An example of this would be if you're creating a social media page, we have a timeline for that could be your homepage, you click on one of the posts that takes you to the say, certainly not the post page. And then there's comments and maybe those comments after every say one second, two seconds. They are like dating.

You can't do that. Now. Status widget unless we go back to the home screen and go back to the post page, which you normally do. If you're doing that automatically, that's not going to be good user experience for stateful widget will allow you to essentially overcome that problem instead of using a stateless one. That's really the only difference. If you have any questions, feel free to shoot me a message.

And as usual, I look forward to seeing you in the next video.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.