Creating your first Android and iOS app in Flutter | Karthik Nooli | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Creating your first Android and iOS app in Flutter

teacher avatar Karthik Nooli

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (55m)
    • 1. Hi there!

    • 2. Installing Flutter

    • 3. Why Flutter?

    • 4. Basics of Dart

    • 5. Stateful vs Stateless with examples

    • 6. Hello World in Flutter

    • 7. Calculator app

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, we will be learning how to make apps using Flutter, Google's UI Toolkit taking the cross-platform development world by storm. We will look at the absolute basics of Flutter, and even learn how to make our own calculator in the last session!

Session Outlines:

  • Installing Flutter
  • Why Flutter
  • Basics of Dart
  • Stateful vs Stateless
  • Hello World
  • Making a Calculator

In the first class, we will look at installing flutter and how to get it up and running on your system.

In "Why Flutter?" we will consider why Flutter has grown in popularity so much and so quickly and why so many companies are using flutter over native or other cross-platform approaches.

In the basics of Dart lesson, we will be having a look at the absolute basics of Dart that are required to understand flutter.

In the Stateful vs Stateless lesson, we will gain a deeper understanding of the difference between stateful and stateless widgets

In the Hello World lesson, we will remake the hello world program for flutter from the group up, so that we can understand state and how flutter works under the hood.

In the Calculator lesson, we will be making our own working calculator from scratch!

Meet Your Teacher

Hi there, I'm Karthik! I'm a Flutter developer and GDG lead. I love hosting and giving tech talks at conferences! :)

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Hi there!: Hello there and welcome to an intro to flutter. So you have a super Olson billion-dollar idea that you don't know how to code. Well, don't worry, flutters, Glady. Flutter is Google's UI toolkit used by tons of companies around the world to make awesome looking apps for iOS and Android. Here are a couple of companies using floods were already in this course. We'll be looking at in students lesser. Why flutter? The basics of DAW, which is the language that flood eases stateful versus stateless widgets. Recreating the Hello World application. And we'll also make an entire walking calculator. So what are you waiting for joining the course and learn more about flooded today? 2. Installing Flutter: Hello and welcome to this lesson. Today, we're going to be learning how to install flutter and the tools you need to make apps. So to begin with, go-to flooded out Dev and click, Get Started. Choose the platform that you want to install, flutter onto. I'm currently on Windows, so I'm gonna click windows and make sure that the minimum requirements are met. You can either download the flutter SDK as a zip file all the way that I'm going to do it, which is using Git. Copy this command by taking the copy code button and jump over to terminal. Go to the folder where you want to install flutter and paste the command. Wait for this to finish. Awesome. Now that that's done, let's see what's installed. So on Windows, if you do Dare, You can see files in the current folder, the urine, and as you can see, flutters installed. So cd into flutter. And Nike do the same command that you can see that there's been folder, cd into the bin folder and do flutter. Dr. Now it's going to install the SDK. Now that that's done, you can see that flouted doctor gives us a couple of ticks and exclamation marks. If you read through it, it says a flutter has been installed properly. The Android tool chain for developing on Android devices has been installed properly. However, Android's Junior is carnelian installed, intelligence is an institute nor the flutter plugins. And there are no connected devices right now. So I'm going to be using Android Studio as its preferred for modern development and comes with a couple of tools that make debugging a lot easier. So to download Android Studio and go to developer dot forward slash studio and click on download Android Studio. This will take well, so I'll be back when this is done. Now to Android Studio has been downloaded clinical NA wait for it to load up. Once it's opened up this screen, click Next. We're not going to be using an Android virtual device today. So remove this as an installation as it will make it smaller and foster. Choose where you want the Android Studio program to install and click next and install. Now wait for this to finish. This will also take a bit of time. Once this is done, click Next and then Finish. Once you've run through the setup process, you should be greeted with a page. Let me like this. First, let's install the floods plugin's going into the plugins. And then such for guaranteed marketplace and such for flutter. Install this plugin and restart DID you might also need to install the plug-in, so such the dot, install dot and then restart as well. Once these two are installed, we're ready to go. In the next session, we're going to be talking about why flutter. 3. Why Flutter?: Hello and welcome to the intro to flutter. Today we're gonna be talking about why flutter. Before we jump into looking at why fluxes amazing, let's have a look at what we could've done if Latin didn't exist. We could have made two different apps known as the native approach, which are high-performance, high-quality. But it does mean that you need to teams working on two different code bases and different feature sets. We could have gone with the cross-platform approach, which meant that you would have had fast development, a single code base, and a consistent feature set. However, it would have low performance and it doesn't feel native. This is why flutter offers the best of both worlds. Florida combines native performance in quantity with high-velocity development and multiplatform reach. If we remove or if the jargon from that one long sentence, we get that flutter performs natively. You can create ready high-quality apps really quickly. And not only can you create apps for iOS and Android, but you can also create for Web, Windows, and MacOS. Here are some companies that use flutter. Google, Square, Alibaba, eBay, and BM Plumlee, and a couple of other apps. Flutter is known as Google's UI Toolkit, which means its main purpose is to lay things out on the screen so that they look nice. Flutter is flexible and expressive. Flutter controls every pixel on the screen, which means you have no limits to what the app can look like or do. If you can imagine it, you can create it. We will be learning how in future lessons, the language that flood eases is known as dot. Dot is an extremely flexible language with the Java likes syntax, but also the flexibility of JavaScript. We'll see more examples of dye in coming lessons. Here are a couple of apps that use flutter. Right now. You can download these apps of the Google Play Store or the App Store and try them out for yourself. So what makes floaty unique? Well fastly flutters open source, which means it has a massive community behind it. It also means that you can look at the code and what it does inside will demonstrate this in a future lesson. Flutter is also extremely capable because it runs on the skier 2D engine is the same graphics engine that's used by Chrome. Because floods or controls every pixel on the screen. The device size and device aspect ratio doesn't make a difference. We can create beautiful applications using a single code base. In the next lesson, we'll be looking at DOD, the language that floating pieces. 4. Basics of Dart: Hello, welcome back to intro to flutter. Today we're gonna be looking at the language philosophies is known as dot. I'm using intelligent to run dot programs, but you can vote them up. Dotplot, which is an online ID that you can use to code everything you can do, hit, you can do end up awesome. So let's get started. First, let's consider how to make a variable dot is an optionally typed language, which means that you can provide types if you want. For example, I can provide a variable quote a dot a. I'm, I'm explicitly stating its type. However, I can also put var here. Both these variables can also say const, which means it's a constant. And if I go to change a, it complains. If I change this back to the law, that you go perfectly fine. Awesome. Now how did you print stuff? Let's do print. Cool. So if I run this, as you can see, it's printed out the letter a. Well about printing out variables, say for example, I have a stirring. A, offices can just pass a in here. And then when I run this, it should say Hello World. Cu. What about string interpolation? Now, this is a width one and this is one that we use a lot in flood of, say for example, you had a variable int num equals five. How would you put that into a string where you can do No.2 string, which would return a string. Or you could do string interpolation. String interpolation is where you can provide actual dot code inside a string that you go. And non num is a string. If numb was null, say for example, we haven't provided a value here. It would provide the string null. And we can show this by printing out, mumbling that you go, as you can see, it's printed out null. Now, we can go out this middle variable by placing this directly into the print statement. And getting rid of this. Uhm, say for example, you wanted to check if not is even on one, but you didn't want to create a new variable. Well, that's possible as well, because it's more than one object. Long. I need to provide curly braces. Is even. Because if I had just done num dot is even though all of this is considered as just a string. And it's just adding that one to numb. You need to tell it that all of this is actual code. So provide curly brackets, and there you go. If I could just get rid of this. What happens for null? Well, we get a null pointer. We're basically saying that none is null. So it doesn't have a value. But we're trying to check if it's even. Let's say for example, provide them number five. Run this. There you go, it works. What about comparisons? Let's try comparing two strings. If hello is the same as alone, then print. Hi. Else. Let's print notes from this. And as you can tell, Heller is the same as Heller. These not creating two different string references, but instead are comparing individual value. What about loops? Loops are always fun. Well, there's multiple types of loops. Does the for-loop. This is a bit of a weird syntax and a bit long, but it works. Let's do print i. Now when we run this, it should print numbers 0 to four. If we wanted to print from one to five, we can change an i to one and i is less than from five to six. This basically says start at i equals one loop while i is less than six. And i plus, plus, they eager. What about while loops? While i is less than ten, you go 0 to nine. What about lists? In Dart? We have a concept called a list, which is a bunch of elements as the list, we can initialize it like this. And we can add objects like this. And now when we go to print, oh, I can see that it says hi and hello. Well what happens if we want to be free? Didn't want an easy out function. We just wanted to say that it stops with hi and hello. Well, you can hard-code it. You can place them directly into the list header. As you can tell, we get hi and hello back. What happens if we wanted to loop over the list? Well. You can do it for each. And if you look at this, what it's asking for is a function that takes a string and returns nothing. So this is kind of a map. We want to take the string and we want to return nothing, but we want to do something with each string. Let's just print it for now. What happens if we wanted to remove values from a list? We can do L dot remove. For example, 0. We'll remove the first item, one or removed the second item, et cetera. What happens if we wanted to remove the word hello, but we didn't know the index. Well, we can do LD or remove the load. And then we get the word hi. What happens if there are multiple instances? For example, if the list was hello, hello play. Well, let's remove that where which takes an element, string element, and returns whether it should be removed on. In this case, we want to check if element is the same as pi. Now we should get hello, hello. What about classes and functions? Well, let's make a function real quick. Let's say that it returns an integer. And we want to call it plus one. And it takes an integer. We want to return i plus one. So now when we call print plus one on to whichever time three, olson, We can change the return type to string and do something like using string interpolation. But what happens if i is null? Well, if i is not what we want to just make sure that it doesn't do the string interpolation because otherwise it raises an error. Turn era. And now if we run this We get three. But what happens if we send null? We get era. Cool. What about clauses? Clauses are really fun and let's say for example, we wanted to create a class called human type. Let's say the human has a first name, and it also has the same name. Whatever it's birthday. Well, does a date time object into which we can use to keep track of dates. Let's assume humans only have these three parameters. We can create a constructor that will return a type human. And we can provide each of these parameters as arguments. As you see, I'm not typing any of the datatypes. I could have provided string this first_name. But it's recognizing that it's a string because I've provided it here. So there's no need for them. And I'm not doing any more functionality beyond this. What happens if I only wanted to provide the FirstName and second name? Well, I can create a named constructor name like this. Second name, and that's it. And then, but they will be no. Say for example here I didn't want to provide the birthday or I want to make it optional. Or I can wrap it around in curly brackets. And now it's optional. So there's no need for this. Let's create an instance of human. As you can see, human crate and takes us during firstname, second name, and optionally about day. Firstname, second name, and date, time. Let us say they were just born. And now if we save this to a variable, var, var a equals. And then we print human a instance of human. Let's create a toString function. And let's return first name is and then a string interpolation, firstname. Second name is second name. And then a is the theta. For birthday, we need to provide curly brackets. Dot prefers using single quotes, but it's up to you as the developer. And now when we cool dot toString and run this, there you go. We've got first name, first name, second name, second name, birthday, et cetera. What happens if we wanted a list of humans? Let's create a list of type Humans. And let's call the list humans. Humans dot. Let's add myself as a human. And my birthday was in 2001 on the fourth month, on the 20th day. And emotional hour. So let's do that. Now. Let's do print. Humans. As you can see, we've got all of the information that we gave. 2 thousand won a full 20, and the time wasn't provided, so it defaults to 0. What happens if we wanted to amend this human? Let's say I changed my name. We can change it directly through here. Say for example, I changed my name to Barry. Can do this. And then when we do print humans and run this, we get Dari neatly. Awesome. Now if I do print, before I change the name, you can see their difference. Initially it's called egg and now it's barry. What about this concept of anonymous functions? Anonymous functions are functions that don't have a header. Let's say for example, I had a class that took a, let's say for example, it was a bottom. This button would take a function on click. Now, how would I interface with this? Well, I can create a constructor button. Capital V should already be. And then do this dot onclick. And now when we do click to create a function called plague returns void, we can cool onclick. And now if we create an instance of Boston and provide an anonymous function and say print. And this is being clicked. And then run this we are thinking about. And yet, let's create an instance of button and save it to a variable v double-click. And then run. This has been clicked. Awesome. So I went through things quite quickly this lesson. So feel free to watch this again. Slow it down, rewatch it, make sure you understand everything. Makes sure as well to try it for yourself. There's no point me explaining what to do if you don't try to solve. The best way to learn a programming language is to jump into the deep end and just try things, make mistakes, learn from the mistakes. That's all for this lesson. In the next lesson, we're gonna be learning about stateful and stateless widgets. 5. Stateful vs Stateless with examples: Hello everyone and welcome to Intro to Philosophy. Today we are going to be talking about stateful thus is stateless. And what the differences. So how does flutter actually work? Well, to begin with, everything's a widget. Widgets are either state foo or stateless. Widgets can have children widgets on otherwise known as child widgets, and a widget tree is created. You're probably a bit confused right now. So let's pull up an example. This is an example reply on the flooded gallery. As you can see, it's a fully working application earlier when I said Florida creates a widget tree. Here is an example. On the left you can see that there's navigation components. These navigation compartments are part of the scaffold. Scaffold is this full-page. Each component in itself is being laid out relative to everything else. So if we take, for example, just this section, we can see that there are components in a column. We've got icons and we've got text. For each of these components. They're laid out in a room. You've got an icon next to a text. As you can see, Florida creates a tree of components. For example, here it would be column followed by a row, a row, a row for each component. And each of these rows contains an icon widget and a text widget. Our job as a developer is to display or described to flutter how we want things to be laid out. Now let's talk about the difference between a stateful and stateless widget. A stateful which is something that updates in runtime. For example, a text field. If I was to type hello, every time I click on a key, the text needs to be updated. This requires a stateful widget. An example of a stateless widget is general text, things like this, this back button. The text doesn't change, which means that it can be mocked a stateless, which means that flutter doesn't need to worry about updating it. Same with icons. Icons tend not to update during runtime. Sometimes like you. But most of the time zeta. That's all for this lesson. In the next lesson we'll be looking at helloworld inflaton. 6. Hello World in Flutter: Hello everyone and welcome back to intro to philosophy. Today we're gonna be looking at our first flutter application. So let's get started. To begin with. Click on File, New, New flutter project. Select flutter application, clip next. Cool your app what you want, and choose the fluffed resi Cape Cod. I put my flutter SDK and see in the first tutorial, you might have placed it somewhere else. Make sure to choose the flooded part and not the pot to plot a bin, set the project location, and create a description if you want. Hit next. You can deselect these two and provide a package name. I've already Donald with this. So I'm gonna click council. Awesome. To demonstrate I'm going to be running my code on Chrome. You can choose to run it on an emulator if you want, by click on AVD Manager and creating an emulator. Or you can directly plug in your phone, right, let's get started with code. To begin with, we can see the, all of the imports are at the top. The material library just gives us a couple of widgets pre-made. We always start with the void main as an entry point to the application. And we are calling a function called run-up. If you control and click into this, you can see what does the code behind runApp, and you can look at what it does. I've created an object of class, my app, and it's stateless widget. Extending stateless widget provides this Override. We have a build function which returns a material application. Now this all looks a bit confusing and it might be. So I'm going to start from scratch. I'm going to delete all of this third. And let's code this whole screen from the beginning. As you can see, it's quite a simple screen. As you push this button this many times. And every time you click the button, it increments by one. It's also got a title. Well, let's see what we can do. Awesome. So to begin with, let's consider the material out. And the material wrap is just a wrapper to give us extra functionality. For example, pages, we can just provide her. I'm going to create a widget quote homepage. In Android Studio. There's a couple of quick commands to make life easier for coding and DOD. If you type in STL ESS, it creates a stainless widget. And now when you press enter, creates all of this code for you. I'm going to call this class homepage. As you can see, the error that we had above has now gone. It's now created a new instance of homepage that returns a container. So if I save this, it should just be quiet and nothing else. I can go inside container and chance to color, to colors. Blue, for example. And now the whole page would be blue. As you can see, container has lot purposes. But for now, let's remove the container and use a pre-made widget. This pre-made widget is cooled scaffold. The scaffold provides a lot more functionality than container. For example, it provides Bolton navigation, bod, body, APA, ultimate sheet and draw, and gives you a lot more functionality to work with. For now, let's consider body per container and that this container has a child. And the child is going to be a text widget. As you can tell, text widgets a pre-made, we don't need to cut it by N. So if we look at this and see as text hello world, we've got Hello world. That's a bit boring talk, but we sent to this text will, if we do Alt Enter or Option Enter on Mac, you can see that it comes up with a couple of options. Let's wrap it with centre. And all it does is provides a center widget and chartered and places the text inside. Now when I save it, the text is centered. I will sum it up. It's a bit boring, isn't it? How about we add some functionality to it? Let's create a variable called int counter that starts off at 0. And let's say you flip the bottom counter many times. Dot seems more like it. The desk donate button on the screen. Let's add a floating action button. You can provide this through the scaffold. The floating action button is also provided by the material library. If you hover over this, it can see that it requires an unprocessed parameter. If we provide the on-premise parameter, it takes an anonymous function that doesn't return anything. So now let's just print I'm being clicked semicolon. Now and I run this. There's a floating action button in the bottom right corner. Every time I click on it, there's a message in the console saying I'm being clicked. This floating action button looks a bit boring. Let's provide an item. Icon is also part of the material library. And it takes some icons object. And now we should have a floating action button. Let's say for example, we wanted to increment the counter. Now, every time I click on the floating action button, the text should update with the value of the counter. But as you can tell, it's not. Wonder why that might be. Well, that's because homepage is a stateless widget. We need to convert it to a stateful widget, which let's plot a no that it might update during runtime. Right now. Flooded doesn't think that it will update. So let's let it nine. We can do this by converting it to a stateful widget. Converting it to a stateful widget adds these lines of codes. Now if we were to run this, does it work? Still? Not yet. And that's because we've told floated that it might update during runtime, but we haven't actually told it or D here. There's a function called set state for state for widgets. And it takes an anonymous function. The anonymous function needs to perform all of the changes to the state. That sounds really confusing, but that basically means any variables you're changing, change inside here. And now it will update. Once all of these changes are complete, it tells the screen or that part of the screen to re-render or update. So now it's updating. What happens if I wanted to say, I don't like this text. I wanted to change it to just be the counter. What we can do that as well. We can just change it to counter. And by saving, it updates quite quickly. It doesn't need to rebuild. And that's a feature called hot reload. Now initially we have the apple and it looked kind of nice. So let's include that. Inside the scaffold. We get up. There's an app bart widget pre-made for us, also provided by the material library. And it takes a lot of parameters, as you can tell. But we really were only interested in a couple of them. Let's say for example, we wanted to do title. Title takes a widget. So let's provide a text widget. See how easy that was. Now what happens if I wanted to send to the title? There's another parameter called center title, which takes a Boolean. So let's say true. Now when we save it, as you can tell, we've got the text here. However, if we wanted the counter in the type tool, that works as well, and it updates. You see this repo animation on the floating action button. Will Island, correct that. And that's the beauty of flutter. A lot of the widgets are already provided to really high-quality, which means a lot the animations are premade and pre-implemented. You don't need to worry about wasting time on making animations that are already there for you. Instead, you can walk on making your beautiful. So this is the Hello World application. That's all for today. In the next lesson, we're gonna be making a calculator app. See that. 7. Calculator app: Hello everyone and welcome back to An Intuitive flutter. Today we're going to be building a super basic calculator application. So to begin with, let's start by creating a button. Let's get rid of the initial code that we have and create a new stateless budget. Let's also create a homepage just so that we can see what we're doing. And make sure this is stateful. Change my home page to page and remove the title parameter. Change the container to a scaffold so that we get the basic building blocks for an app. Let's apply this number button and make it the center of the scaffold. We can do this by providing in the body tag, providing center, and then using number button. Inside this container, we want to display a string and we want to be able to get gestures. So if the user taps on it, it will return an onclick function. So let's create a parameter called onclick, which takes a string function. And we want to provide a string which is the value that it's displaying. Now inside the container, we have a chart would you want to send to this child? So let's use Center. And we want to display the text. So let's use a text widget. If we see, well, this looks like we get null because we haven't actually apply the constructor. So let's create a constructor. Takes this dot value and this onclick. And they go, let's create an onclick function at the top of her and page that takes a string and returns a void. Void basically means that nothing's being returned. And everytime this is cool, let's just print out x inside the number Balkan. Let's provide a string value and onclick function. As you can tell, we got the number one in the middle of the page. But this is still a bit boring. So let's change the style. Now if we save this, hopefully the text should be a bit bigger and it should be bold. Awesome, that looks nicer. However, is still a bit plane and doesn't have any color. Let's give it a bit of color around the text. Let's add a bit padding. Shouldn't change anything. But when we provide a container around the padding. And give the container color. The container should have a bit of space or before it reaches the text that you go. Padding basically is the distance between the text and the edge of the container. Let's meet this container square. We can do this by providing a height and a width. However, as you can tell, this text is no longer in the center. So let's what the container and its parent. So now there's a center inside a container and we can get rid of unnecessary containers. Let's also provide declaration to the container. Let's give it a bit of column. And let's give it a border radius. Seems like it's a bit too big. So how about we change the height and width to 75? That's a bit nicer. And let's change the text color to white. So now what we've got is a morton. However, onclick is being cooled yet. So let's wrap this container inside a GestureDetector. And in the ontop function, we can call onclick. We can provide an anonymous function and cool onclick with the value of the bottom. And now if I open up the run and every time I click on it, should print out one from this function here. Now let us make this into an actual calculator, shall we? Well, to begin with, let's get rid of this. And let's create rows and columns. We want approximately five rows. So let's start with the word. And let's wrap this inside a column. Each row contains around full buttons. Now if I save this, as you can tell, they're all in the top left corner. We can spread the row by using this property called main axis alignment, which takes a main axis alignment object, which in this case we want to be spaced evenly. And now they're spaced evenly. Isn't that neat? Wasn't. So let's duplicate this row so that there are four rows in total and change the values of each. We weren't the first rotor hub plus instead of a full 456 and then minus 789. And then multiply. And the last row should be bracket, open, bracket, close, and divide. Now if we save this, we get this sort of v. This looks nice. But it's still, it's still all in the top. So inside column, we also have a property called main access alignment. Let's use main axis alignment and do space evenly. Nice. Now that we've got this, let's create a text field. Also. So this is what our calculated looks like. But right now it doesn't have much functionality. Yep, it's getting the right value is, but it doesn't actually do anything. And we forgot to put in an equal sign. Let us just ABA in rural quick onClick for this function, we don't want to just print it out or handle it directly through the onclick function. So let's create a custom function. Nice. We also need a backbone. So let's run this inside another way and do the same thing. Let's create a string, which is a string that we want to keep track of. Ooh, let's remember to spread the rope properly that you go. To control the, the text field. We need a controller. And in this case, it's a text editing and controller school. A controller as, as no other text editing trawlers. And inside B in its state, let's create an instance of for text editing controller and pass it through to the text field. Oh, realizing now that I've misspelt controller, I can very quickly change the name by doing FM F6. And now every instance of controller has changed. So every time we get an onclick, we want to add it to the equation. We can do this by doing equation plus equals S. And let's call set state. This basically tells us greeting to update. We also want to say to the controller, update the text. Let's create another function called void answer. Answer is going to set the text to the answer. It is going to evaluate the equation. Let's see if this work right now. And as you can see, every time I type in a value. Comes up. When I do equals nothing happens here. So how are we actually going to evaluate the equation? Will, luckily for us, there's a library called math expressions. Good to pub dot dev and look for map expressions. To install it. Go to the installing tab and copy this line. Go into your project tab, and go into pop spectral YAML. This is kind of a location just to find out all of your dependencies. A dependency is kind of like a library. Find the Dependencies node and add it there. And now do pub get. If you're using a different ID, you can type in flutter pop, get. And it will do the same thing. Awesome. So now let's evaluate the function. We can copy this code here and paste it directly into us and replace the string here with our equation. Pulsar isn't being recognized. And that's because we haven't imported the library yet. To do this, press alt, enter, and import the library. To evaluate the expression, we need to create a context model. So let's add a context model. And let's evaluate. For the moment. Let's just print out Walter evaluates to. And lets clear the text. And now when we save it, we haven't caught onto here. Let's just add that in real quick. Now when we save it and run one plus one, you should see if I go back to the right tab and I press equals, we get two. Now all that's left to do is update the text. Here. We can do this in the ons Function. Controller dot text equals equation. However, the equation's just being cleared. So let's enter Eval. Using strand invasion. They, you go. The only things that need to be inside the set state are the last changes that need to be made. So we can put that in here. And now we should get one times five equals five. There you go. However, what happens when you do one divided by, let's say 0. We then era, we get infinity, which isn't great because we're me now good to type. It just adds on to the end. So let's create a remove function or remove lost. We need to do in here is get the very first characters of the string, but the lost. So we have the equation and let's do substring. And we want to start from 0. We want to go to equation dot length minus one. We want to go right up to the very last string, but the law stream. And let's reassignment two equation. We also need to call set state. And we want to perform this inside set state. And we want to cool controller dot text equals equation. Just saying update the text and the controller. So now can do one and then if we do back, you get nothing. However, if we do back again, we get a bit of an arrow. Aspect is we're trying to do a substring nothing. Let's solve by checking if the equation is empty. If it's empty, which is don't do anything. Now, we've created a full walking calculator. That's all for today. I hope you enjoyed the tutorial. I hope you enjoy the lessons. Please leave any questions in the comments section below, and I'll see you next time.