All language subtitles for 024 Creating a New, Custom Widget_en

A few lectures ago, I mentioned the strange input data.

Now what do I mean by input data?

Let me explain this

and at the same time let's also improve our look of this app, at least a little bit

and for that, we'll actually create a new widget, a widget which should wrap this question text here.

Now to create such a new widget, we can simply add a new class.

Now we can do this in the same file we previously worked in but a good convention rule is to only have

one widget per file.

There are rare exceptions to that rule, for example if you have two widgets that really only work together

and you don't really plan on reusing a widget in other files but generally, you want to have one widget

per file and therefore here, I'll add a new file next to the main.dart file and I'll name it

question.dart

and this should hold my question widget.

Now you should actually, thanks to the Flutter extension which you installed, have a little helper here

if you type st, you should normally get some suggestions to automatically create some widget, so a little

shortcut, a little code snippet which was added by the Flutter extension in Visual Studio Code and in

Android Studio.

If you get that, you can select a Flutter stateless widget option here and hit enter and you automatically

get a new stateless widget created for you,

all you have to do here is add a name for that widget, which in my case would be question here.

Now this is in the end a class extending stateless widget and you already get that build method with

the override annotation and it's the exact same widget setup we manually created at the beginning of

this module.

Now here, we're using stateless widget and that is provided by the material file, from the Flutter package,

just like widget and build context and this container thing which we haven't used before and therefore,

we have to add an import at the top of the file which points at a package and there at the Flutter package

with /material.dart,

so at that material.dart file. Now this is a valid widget and there, let's get rid of container and let's

add text here and here, I want to output the question text.

The problem just is

I'm managing my questions here in main.dart.

Now of course, we could move that questions list or array as you could also call it, array and list, these

are interchangeable terms,

you could move that list into the question widget.

However then, you would have your list of strings in there

but the logic for changing the index resides in the main.dart file.

Now you could move that into the question widget as well but we'll later also need it for our answer buttons

and actually already the answer buttons are in the main.dart file.

We could move them into the question.dart file as well but then we effectively would have moved basically

everything from the main.dart file into the question.dart file and that's not the idea behind splitting

our app into widgets.

So instead what I want to do is, I want to come back to that idea of getting some input data in a widget

and if you recall earlier lectures of this module, then you know that when you create a class, you can

have a constructor which can take some data to initialize data inside of that class

and here the idea could be that we simply have our question text or whatever you want to name it

and since I don't initialize it with a default value here, I'll set this to type string to be clear

about which type of data it will hold

and that question text should be passed into that widget, kind of from outside,

so from inside the place where we later use that question widget. For that, we can add a question constructor

using the same syntax I showed you earlier, where you repeat the name of the class and then add parentheses

and then you can either use the long form with the curly braces where you accept your arguments and

then you store your arguments in properties of this class or you use the short form where you add a

semicolon after the constructor and then you use this question text and now the first argument which

is passed to the question constructor will be stored in the question text property. Please note that

I'm saying the first argument because since I didn't wrap this here in curly braces in my argument list,

this is not a named argument but a positional argument,

only if I would wrap this in curly braces it would be turned into a named argument.

However here since I only need one argument, I'll go with a positional argument because identifying it

shouldn't be too hard,

it's the only one, right.

So this is my positional argument which is required which will be stored in the question text variable

or property here and now down there in the text widget which expects a text, I can simply refer to question

text,

so to this property, I can refer to it down there.

Now how do we use this widget then? Let's go back to the main.dart file, where we at the moment have our

text widget here and now I want to forward my selected question which I select in the same way I did

before, not to the text widget but to my question widget instead. To do that, we first of all need to import

our question widget from the question file, so we add a new import statement at the top and the convention

here is to first of all have a block of all the imports that point at packages and then a block of imports

that point at your own files.

Here you add quotes, single quotes or double quotes, doesn't matter,

just be consistent

once you made your choice and there, you now add a relative import path, which means you add dot slash,

which means look in the same folder as the main.dart file is and then the name of the file from which

you want to import,

which in this case is question.dart.

So now we're importing from question.dart and that means everything that's in this file is now available

in the main.dart file as well, unless you name it with an underscore in front of the name.

However question doesn't have an underscore and it shouldn't because we want to be able to use the

question widget in the main.dart file.

So here, we now can use question instead of text and since question, its constructor, expects to get a

value for the question text, we still need to pass a value to this question constructor,

so this is already correct here in the main.dart file.

Now of course you might wonder, what's the benefit of this?

Previously, we used text,

now we use our own widget but in there, we also just use text.

Of course for the simple restructuring, it's not useful, nonetheless

it is a good idea to split your widgets or your app into smaller custom widgets that can help with performance

because it can make your rebuilds more efficient

and it also makes it easier for you to manage your code.

Of course, not that much if all we had here was a single text widget

but the more complex of a widget structure you had here, the leaner your main.dart file gets as soon

as you move that into a separate widget.

Again, not that useful for the single text widget but we'll see the benefits more and more as we progress

throughout the course.

Now that here is the stateless widget, that's important

and this now receives some input data because it gets some data in its constructor.

Now if we save that and we have a look at our app, it looks the same way as before and conveniently if

we press Answer 1, it also behaves the same way as before and the text changes once we press that

button.

Now this has one important implication,

it means that what I mentioned on this slide is true. On the left side,

on the stateless widget, it gets re-rendered when the input data changes.

Now that's exactly what's happening here.

Here in main.dart, when we change the question index with set state, the build method gets called here

and therefore Flutter and Dart go through our widget tree and in the end, they find out that for question

here, we are changing the text right because questions, question index changed because the index changed,

so we select the second question in our list of questions now.

So the input data to question changes and therefore Flutter automatically calls build in the question

widget here.

Now technically, it calls build for every widget here but then the widget basically checks

did I change and most widgets didn't change but for the question widget, it now did change because it

received a new text and since it received a new text and was rebuilt with that new text, it also updates

on the screen.

So that is what Flutter does for us,

we rebuild the stateless widget not because it changed internally,

it can't,

it's stateless but because the data from outside

changed when the build method in main ran again. So that's what's happening here.

Now one syntax improvement which we should do here because I'm already getting a warning here,

this here is a property of the question widget, which like this could be changed internally.

Now of course, that wouldn't be reflected on the user interface as you learned because it's stateless

but technically inside of the class, you could change this because there's a difference between the Dart

features and there in any class, you can change data and how Flutter uses that class

and that's what that warning tells us.

This class is marked as immutable,

that happens inside of the stateless widget in the end

and yet we have an instance field which in the end is just a property which is not final, which means it

could be changed,

you could change that string from inside that class and therefore, it's a good convention and recommended

that you add final in front of this property definition here.

This tells Dart that this value will never change after its initialization here in the constructor.

So this change doesn't count,

that is OK,

so when data is received here in the constructor that will be stored in question text because in the

end, that all happens when this object gets created based on the class, the constructor

remember gets called when the object is created. At this point of time, the data we receive in the constructor

is stored in that property,

so that is OK but thereafter, once this object and therefore this widget is live

so to say, we can't reassign this, we can't assign a new value to question text.

We didn't do that but now we would get an error if we tried to and that only makes sense because since

it's a stateless widget, changing this wouldn't have any effect and now we're really writing code that

makes this super clear.

So adding final here is a common thing you will see throughout this course and something you should add here.

Now with that, we have the same behavior as before

but in our own widget and our custom widgets will become more and more important the more complex our

widget logic gets.

We can already make this a bit more complex by adding our first little styling to this text.

Thus far we haven't really styled anything,

well now we can do at least a little bit of styling here for our question text.