Here is what we're going to be building next.
It's going to be a very simple quiz application here.
So in this case here notice we have a nice image here of a flag.
And then we have a question.
So this is some sort of a true or false situation here so there is a text the US Declaration of Independence
was adopted in 1776.
So if I say true because it's true it says here correctly saw real quick there and says correct there
it's real good.
If I say false he's going to say that's incorrect and we'll go next.
And I can say true.
And that's correct.
We can keep going next.
Well let me just say false for a second season correct.
So there is this next button here which keeps iterating through our array or list containing all of
these questions here.
They do here is that you can take this app and make your own so you can build any kind or any type of
quizzes out there.
So this is the starting point for you.
So this is why we're gonna be building and making improvements as we go.
OK let's go ahead.
Back to our project that we've been using.
I'm going to grade another class here and this case is going to be a state full widget again.
So let's say s like that we want to state full I'm going to call this quiz.
And in our container we are going to pass a scaffold.
This time I'm going to use an app.
Baa baa baa.
I'm going to add a title.
The text is going to say something like true citizen such and I also want to make sure that this is
center title to be true like this.
And while we're here we're going to make a background to say colors.
I'm going to say blue gray and outside of our app bar for our body.
It's gonna be a container and this container here will have a child which will then have a column like
this column.
Very good.
And I want to actually add a overall background here for our entire view to have the same color as some
say colors blue grass actually going to save this.
Let's go ahead and give it a run or if you want.
You can always also run on ice only if you have mac and you have excluding salt as we discussed before.
It might take a few seconds and just like that you can see we have the true citizen and nice background
and we have our bar before we move forward here.
We're gonna need to add if you assets in fact just one asset to start with which is an image to add
image to our application.
It's very simple and flatter.
So what do we need to do of course is to add the actual image folder.
Now we need to pay close attention where are we adding this folder or these directory.
So far we've been adding everything instead of our lib as you see here we have a UI you tail and our
main da da That's where we have our main Dart.
But for our image file what we actually have to go in the root of our project and add that file or directory
is when it's a right click.
This is very important because a new one new directory and lists named these images.
Now we have our image of the site and you can see it gives us this very nice icon of an image to signify
that it knows that we talk about images.
Now we need to add an image already have the image.
So I'm gonna go ahead and copy it and bring it all in here and the beauty can actually copy the image
from your file or folder in your computer and paste it all in and just say OK and in the second you
should see that we have this flag that image if you double click it should show the image.
Once we have that we need to actually connect to this images folder because we can have more than one
image to our framework so that if plotter knows that this image is registered in these applications
so we can actually use it in this project.
To do that we actually have to look at a file that we never really talked about much notice down here.
There's a lot of different files.
The important one here is the prospect Jamar.
So if you double click here you see that there is a lot of things going on.
Let's go through real quick.
Most of the stuff here is very self-explanatory but I'd like to explain you real quickly what's going
on here as you see at the top.
It says Name in this is the first flatter name the first flatter app I should say so.
This is where we added When we created this project.
So the name of the project is for flatter app and you notice it is indeed what we have here at the top.
And we have a description because we didn't put anything it just gave this generic and you flatter app
of course you can change from here or when you start creating your application.
And it tells us here the following defines the version and build number of the application and there's
lot of information here.
So this was actually generated when we first created our project.
So there's the version and there's the environment.
OK.
The SDK and so forth.
And there are dependencies dependencies I think of them as libraries that our project depends on for
us to run.
Obviously the main dependencies flatter which has the SDK named flatter.
OK.
And we can also add either items for Iowa styling and many mean other things.
In this case Cupertino icons and there's the version here so that means we are using as a dependency
in our project Cupertino icon Cupertino is the Iowa side of things.
And we have the dev dependencies here we have the fighter test which we haven't looked at and down here.
It says the following section is specific to flatter.
So now are saying that one of the main dependencies that these must used the material design to true
this is true.
Because that means it uses material design and most importantly at the bottom here we have these assets
area that's common it out but notice also says images flag that PMG.
This is actually what I've changed earlier.
White usually has a different name something like eight at him j peg like this.
I actually changed it to flag.
So this is where we set up our assets assets.
In this case being images you can also add audio and so many other types of assets but in this case
we're talking about images.
So in order for us to tell our project that it indeed has access to our images folder we have to uncommon
to this here.
So let's go and comment all of that and voila we have it.
Now one of the things you will realize is that the Yemen file the pub spec file here is very sensitive
meaning that you have to have things correctly situated invented for in order for things to work.
In this case here we have assets and there's these dash space images.
And then for a slash flag that pin GS has to be the same name as we have here for our image for obvious
reasons.
If we had it on the image of course we'll do the same thing here which is uncommon this and keep adding
more and more.
And once we added image I'm going to save this but we have to get it.
So we're going to the packages that get just click here and let's see if that works and things worked
fine.
Now to invoke our image we can go to our main actually our home here and I can come down here and just
say image.
Actually I have say children.
I mean site of a column.
And let's go ahead and say invoke an image that asset.
So there's different ways to get image we've seen before but the wonder we're going to be using right
now is the image that assets makes sense because this is an asset we've added.
So that's what we need.
And for that we have to pass the path where the image is.
So in this case here is going to be images forward slash flag that PMG and we can pass a few properties
and say width of the image is going to be 250 in height is going to be let's say 180.
Let's save those and see if it's going to work.
Now you can see the images showing there.
Like I said the pop spectre Yemen can be a little bit tricky sometimes.
Make sure that everything is set up in one ways to know that everything is good in terms of the code
it's written here.
It's make sure that the assets actually lined up with the uses material design like that they have to
be lined up if I move this a little bit to the right.
If I save these and say pops get I may end up having issues as you see it says assets are expected to
keep passing block mapping.
So there is a problem there.
So you have to make sure that everything is aligned otherwise are going to run into issues as you very
well saw here.
So I'm gonna put that back like this save.
Always remember to say PAB packages get to make sure that everything is correct and you can see there
it is.
We still see our image very good.
So very easy to add images into our project.
So next week we're gonna continue adding more things into our app.