Hello, in this video, we are going to start off our first application. So we are going to create a calculator, the calculator is going to be based on a tab bar system can have four tabs, addition, tab, motely, multiplication tab, subtraction tab and division tab. In those tabs, we will have two elements, I mean that you know, will have two text fields button, and then a dislike text that label widget that just displays the result. And obviously, you can modify this as much as you want. The reason I show the tab system compared to a conventional thorough calculator is that you know, I can show you how to implement a tab bar in the real world. I thought that would be pretty cool.

Okay, so this is just the default application that gets generated with your flutter application. So in here, we can leave the rest of this as it is in here. My homepage state we're going to get rid of this We are actually going to get rid of the floating action button. And in this video, we're just gonna be setting up the tab bar. That's all we're going to be doing not implementing any of the functionality for the calculation. And we can get rid of actually the entire scaffold, because a for a tab bar, we need to put a material app.

And then in here, we need to have home default tab controller will set all of this momentarily, so we need to have a lamp This is how many tabs there are going to be. There are going to be four tabs for the for operation. Then we're going to have a child and this is going to be a scuffle. Inside of here, we're gonna have a bar bar Inside there, we're gonna say bottom. Tom ball. We'll be adding very soon.

If any of this feels unfamiliar to you, feel free to take a look at the tab bar video for more information, so we're going to say, indicator color. So this is just the color when you know, it's, you know, you know, highlighted, and I'm gonna say, dot white. You know, like that bar underneath to say you know what tab you want. Then we'll say tabs. And for this tab, and you can specify icon as well. I honestly couldn't find icons that were built in.

I wish I could add my own, but they were built in for all four operations. So you can add your own icon but I'm just gonna just leave you to edition Addition Firstly, the next one I'm going to do is scratch. Then multiplayer. I've got the wrong per million multiplication, multiplication, division. And now what we can do is start a scuffle, we're going to part title, title. Okay.

Now we got this title, the authority changes to delete. A should be fine. shouldn't need that title. And next, we are going to put a body in the scaffold so that will go Hear body in the tab bar view children and for now I was gonna put this just to get this working families working and then we'll implement different states for each Cuba, three and four. So if we start that there we go. Okay so we got different no different pieces of information on each one.

I do need that text because we're using a material app and the scaffold in the default tab controls the color and the title isn't being you know, we're not gaining from it, so we need to set it manually. We can change the color later on if you want to on Monday on put the title and click title. Go to goes with text and I'm going to say tell us calc you name. So I'm saying, I'll calculate you later, calculator, hot restart. There we go. Okay, instead of this, what we are going to do is create our own separate file for each tab.

And that is going to be really, really useful because we can, you know, separate instead of having, you know, all of the code in the main Dart file, wherever your tab of you is, we can separate we can have a lot of complexity, that can be you know, importing other files as well. So to do that, I'm gonna go to new dot file, and we're going to have four new dot files going to have one called addition tab. We're gonna have a novel. Cool, I think you can get some more action Then I have another one called no key boys about that, right? It looks right to multiplication. And let me refactoring I don't want to rename it to multiplication tab and you got file tab as well.

Okay, so in the addition tab, what we are going to say, import package letter material. Loosely just soaking up some of the least, you know, feature class addition tab. It's going to extend the state for widget. And what we are going to be doing here I'm going to creating a class is gonna be very similar to what we've done here. And what we've done here. So he says I'm gonna I'm gonna have a stateful widget, then we're gonna have a state as well.

So in here, we're gonna say we're gonna override override school edition. State, VA. They create state is going to simply call the constructor of our addition state which we haven't created yet. But we are going to white now black nation state. Then they edition. Thinking all we need left in here is to do Overall widget and there we go.

So in here, we are going to return to a container which we are not going to build in this video. We are going to go with that in the next video. So I need to copy this particular subtraction tab. But I'm going to change support addition to subtraction. Correct actually, and I just do a search so for doing issue where is the final place? That will be a lot quicker trying to get that edited edit, find replace children What Will that do?

Now Georgia guess I'll just do it manually then. None of these seem to be where I want. No, actually what I could do, if I utilize so blind pasted into here, Command F. But in addition, find all of them gain you to subtraction. So basically we're creating a subtraction state. This is just a faster way of doing it, doing it. That's subtraction done.

Now we need to change the subtraction to multiplication, so more tea. More teeth occasionally, like to me, paste that here. And now finally is the dividend tab. So no tea. Find all Divi There we go. So the last thing that we need to do is import the file.

So import addition tab import, it doesn't really matter the origin for multiplication term, import subtraction to find the import. And now, instead of having these, what we are going to do is right here create instances of the dish intelligence on the addition term equals the addition to constructor All this manually typed out subtraction term, subtraction, subtraction, we need one for multiplication term equals t placation. So division, division tab equals tab. And here instead of these because these are just regular widgets we can have any widget we want here. And technically the container is a widget which has been returned. We are going to put addition tab and next I believe you will subtractions obviously made for the you know, in line with what's the subtraction, multiplication and division.

Now if I was to hot restart, hopefully no arrows On the compilation or on the screen side of things, and there we go, we have our four tabs. So what we are going to do in the next video is actually implement each one of these tabs. If you have any questions, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.