How to Create Stateless Widgets - Flutter Widgets 101 Ep. 1

In this first episode of Flutter Widgets 101, Martin Aguinis goes over what Flutter widgets are, how they combine to become interfaces, how to compose with stateless widgets, and more.
Get started with Flutter → bit.ly/2qu9EP2
Try a Flutter codelab → bit.ly/Flutter-...
Watch other episodes in the series → bit.ly/FlutterW...
Stay tuned and subscribe for latest releases → bit.ly/googledevs

[@dmg04158]

wandered through lots of articles and books to learn flutter, but this single instruction is just better than those.

[@KenPetri]

Good to see short, concise but technical explanations of Flutter. Please cover the semantics widgets (for accessibility) at some point in the series.

[@GlennLewis]

Great video! A quick suggestion... take advantage of the IDE's "wrap a widget" and "add padding" features (Cmd-.). This also works in VSCode, which makes editing the Flutter code so much easier! Keep up the great work! Looking forward to the series!

[@dilshoduskanov]

Hello everybody ! These videos are pretty awesome and explain the details perfectly. We want to have a lot of videos like this, thank you GOOGLE, thank you all !!!

[@franklinguerra7263]

These series will be really helpful, loving flutter more and more every day, good job!

[@peterfranz286]

10/ 10 good teaching - the reveal at the end had me shook

[@YasinIlhan61]

This series will be good :) Thanks.

[@TashingaPemhiwa]

5:07 should be StatelessElement

[@chickenbloodmachine]

It's worth mentioning at the end that the body of the build() method for DogName could be simplified to return a single Container widget with a Text child.

[@BO-nn9up]

Just can say 4 words for his explanations Simple, Quick, Useful, Exciting

[@nerellavenkatapathidattatr9005]

Really amazing brother. Glad to learn flutter from people like you. simply wounderful 🙌🙌❤❤❤❤❤❤

[@alexj1580]

Thank you so much for all of this flutter stuff. If y'all could, hurry it up so I can finish my school project faster. xD

[@themorbidhero2987]

Flutter is the Future!

[@polypus74]

Hope these come in faster than once a week. Thanks for the vid.

[@groveroq]

Been some time developing apps on Flutter. Sometimes I think how the hell could it be soo easy :). Good job Google.

[@GauravGandhi25]

This is really exciting. It seems very easy to build complex apps across platforms. I will try it out to justify this.

[@TechieChuks]

This tutorial series has helped me a lot to understand the differences between stateless widget and stateful widget but I have seen use cases where both are implemented at a time an example use case is where a stateless widget was created first with a home method that calls the stateful widget class. Please I would like to understand why are stateless widget used to call a stateful widget class and why are both used at the same time. This may be a dummy question but it has been a question I had searched on Google and got no answer

[@mohamedhussien4013]

Short and to the point. I hope I will be a member of any department in Google in the nearest future.

[@Smart-workers.VS.Hard-workers]

Nice presentation bro… Thanks a lot bro

[@matthewslaton1366]

why make a difference between stateful and stateless or why split i should say? join them together and then add a switch or boolean that you can set to stateful or stateless, seems like extra work coding wise for something that can just be specified with less code. but whatever, i am not on the flutter dev team. thanks for sharing.

[@keep]

Hey Flutter Team, from what I see soon you'll end up publishing hundreds of videos. please have your own channel and create playlists. It would be easy to keep track of videos. This is the right time to begin with!!

[@lone.wo1f]

Hope this series continues..

[@siegmeyer995]

Thank you for the helpful explanation

[@caduenglish421]

Flutter rocks, keep up with the good work!

[@jpkontreras]

Please release new videos daily or three times a week. Thx

[@user-dx4iv4qu7u]

Thank you! 😊 I watched it today.

[@TheT2day]

Awesome series

[@umagadhvi5842]

Flutter is going to be future ❤️

[@PatInCreating]

I am a fan of flutter in China. Can I translate this series of videos and upload them to the Chinese website (purely sharing, no profit)？ For some well-known reasons, it is difficult for Chinese developers to see these excellent official flutter videos.

[@nageshfultambkar5665]

Nicely explained !

[@leonardoventocilla3275]

Flutter is great... I can't wait for the new videos ...

[@jaggyjut]

beautifully explained.

[@dilshan3372]

Element tree doesn't show 'what actually on screen' , it only have reference/location to that current build widget. RenderObject Tree is the actual representation of the screen. RenderObject is created by using configuration details from widget and reference details from element. (RenderObject = widget(configuration details) + Element(location details)). This how I understood about flutter framework, But after watching this video i'm get confused. (Am I right or wrong?)

[@DevFox]

Thanks. Flutter is an interesting framework

[@LawZist]

Keep there videos coming!!!

[@omzer97]

Great! can't wait for the Statefull widget vid :D

[@suleimanazhari585]

Defining a const constructor doesn't make every instance of the class a constant, you need to to actually initialise it with the "const" keyword, e.g "const DogName('Nico')"

[@ha1lyeah]

Excellent video

[@elmeroranchero]

Why are they always using sizedbox in these tutorials, isn't there MainAxisAlignment.spaceEvenly for this?

[@karimovitche]

Perfect, really very nice, thanks alot.

[@Akua-hx3rb]

So I have been working on Flutter soon 2 years but I still don't understand. So you made a parent that it is a Stateless but then you have children widgets that they are mixed with Stateless and Stateful. So you say that if I wanna get data and re-render a widget I should call Stateful.. but my parents is in Stateless. I wish that Flutter can make Stateless and Stateful in to *one* because this give me so much headache and helps us to code better.

[@natanaelbara3294]

Perfect. I got it. Thank you!

[@artemmakohon212]

Great job!

[@peet91pop]

when the next video will be published , is it like the widget series each week ?

[@ucmeytsc7302]

New to this, totally lost, will it get easier?

[@etodemerzel1011]

This content is great but i was searching for a long time to find them maybe a new desing in the order in your channel could be help ;)

[@ehsanhasin8092]

good job

[@RolandPogonyi]

It's very confusing to call a widget "stateless". It has a state. The one it was created with. It should've been called ImmutableWidget or something more accurate.

[@advitiayanand5974]

This is a late response but all Widgets (Stateless / Stateful) are actually immutable. You cannot modify Widget objects once initialised. That's why the build method exists: To rebuild the Widget when a change is made. State here is a class that stores properties of the Widget that can change. Stateful Widgets store an instance of this State class. Again, Stateful Widgets are immutable, so they hold onto that same State object, but State is mutable. That State object is where all the modification happens. Essentially the properties inside the State object are the current "state" of a Widget.

[@jahbless4ever]

Great Video. Thks

[@plutterpluttery3256]

*'adding a padding widget'* He is rhyming...

[@heshansandeepa9471]

Very nice

[@ucmeytsc7302]

How can I learn flutter/dart in a simplified manner?

[@bibibobs]

Can't wait to use Flutter

[@AceixSmart]

u're late man

[@user-or7ji5hv8y]

Stateless, Stateful, Element, etc. Can anyone provide a link that can explain this for dummies. Hard to get my head around such abstract concepts.

[@josephcadiao5751]

abstract? stateless means things doesn't change inside that widget, stateful means you would want to listen to when the values inside that state changes.

[@TectonicPlate-gu9bs]

On 5:08 it is said "stateful element then says, hey, I" why stateful? I thought we were seeing stateless widgets and elements!

[@ScaryStories84]

Hey there! 🎶 In that particular moment, the mention of "stateful" refers to a concept in music production and not related to widgets or elements. 🎵 If you have any more questions or need recommendations, feel free to ask! 😊

[@zhigangji6713]

讲的太好了，虽然我一句也听不懂

[@adityaagarwal1650]

not able to visualize the tree structures :( pls include more animation .

[@dmitriyobidin6049]

Sized Box seems more like a hack, rather a good design principle. Can we achieve this without Sized Box?

[@andrewbrogdon558]

There are several ways to space things out in a column, including the use of a Padding widget. I recommend having a look at the catalog of layout-related widgets on flutter.io, which has a bunch of options: flutter.io/docs/reference/widgets/layout

[@SwiftDeveloperWorld]

Why we don't use native code like Swift? I'm a developer in IOS for 4 years, I can do everything, This kind of framework create less required of the customer.

[@mhasnainadil2875]

Thanks !

[@jack_mc8]

What's about performance? We have a lot of StatelessWidgets inside each other and this number of nesting elements will increase .

[@andrewbrogdon558]

In most cases, an app can be pretty smart about only rebuilding the widgets it has to when data changes, so most updates only produce a few new widgets. Because Stateless widgets are constants, you can also do things like reuse them at multiple places in the Element tree or cache them for repeated use. The team just added some new features to the IntelliJ/Android Studio plugins that report on performance stats, if you're curious about how well one of your apps is performing: groups.google.com/forum/?linkId=52478434#!topic/flutter-dev/oJ55FjL5Izc

[@USDAselect]

A visual of the finished product would help

[@emreonay4939]

omg please blink...

[@blktux]

he did it in 3:04

[@bfjohnmark]

very useful

[@marxman1010]

So put stateless widgets inside a stateful widget is one way of handling rebuilding stateless widgets.

[@gabrielmayer8625]

How u emulate an iphone on Android Studio bro?

[@alexr.4409]

It's flutter

[@TashingaPemhiwa]

Using Flutter Inspector, you would select 'Toggle Platform' to switch between Android and iOS emulation

[@mokhefiabdelkrim3815]

I found this really complicated for this simple interface

[@devithuotkeo]

Practice and exploring will make that complication goes away ;)

[@TheVictorotciV]

I think it's pretty simple compared to an arcaic XML file...

[@Nullscr1pt]

sometimes its better to compare it to HTML. first you have to make a bunch of divs, or say UL, LI LI LI, then you have to go set a class, make a new CSS file, link it into your HTML doc, then make a class and share it with the 3 elements, then make CSS code for that class that has the padding and color and etc.. so you could argue that its complicated in everything if you know nothing, but those that know what to do see it as simple. it only becomes simple with memorization and memorization happens with practice.

[@Alex-vi6fr]

@@TheVictorotciV XML is far easier than this in my opinion

[@Bli_de]

please create chanel Google devloper indonesia. indonesia lugage

[@ElGuapoSalsero]

So I kind of get why Flutter is popular and look past the overtly complicated syntax, but man the documentation is terrible to navigate. I cannot easily find all of the different declarations and how they should interact let alone the different options to use for styling for example. I should be able to read the documentation without watching videos. For example. How do I know that SizedBox() exists, or that mainAxisAlignment is an attribute for Column() and what alignment options are available? The Flutter documentation do not easily provide these. I have to bounce between different pages within the Flutter documentation to finally find it AND it just lists a few options for Column() which are the most popular. Good documentation is how W3 schools made it available.

[@ElGuapoSalsero]

OK Apologies. I just saw you call it the Flutter API reference documentation where all of the packages are listed with every single option in there. It was tough to find but I can finally get everything I need.

[@josephcadiao5751]

Composition > Configuration.. wow google is really several steps ahead of MS.

[@alexherrera4763]

this is so confusing compared to making an app traditionally in Java (understanding how it works, what does what, and how things are related) 🙄😂

[@jasongoossens]

Spend some time following tutorials and you'll be set!

[@EpicGamingFantasy3]

thanks dude . i just newbie. how i'll be master.

[@JanAno98]

Nice video :) think about putting music in the parts where you dont speak so there won't be any awkward pauses xD cheers

[@ArturKlesun-zq7ns]

this stare scares me...

[@davidalvarez5150]

In this video, the speed at which you write the code is too slow. You should make it so fast that our eyes can't follow it. Do you really think a beginner can follow this video at that speed?

[@ittae]

Please, I need subtitles in Korean.

[@MCiekurs]

Pog!

[@asutoshsamantaray7663]

Nyc google

[@AlbertoMarun]

El que no apunte aprender Flutter que se dedique hacer Galletas...