Flutter and Dart - A step-by-step course to master Flutter with a showcase project. | Dr. Chris Mall 30,000+ Students | Skillshare

Playback Speed

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

Flutter and Dart - A step-by-step course to master Flutter with a showcase project.

teacher avatar Dr. Chris Mall 30,000+ Students, C# | Flutter | Scratch Instructor

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 (40m)
    • 1. Flutter - What you will learn

    • 2. Introduction to Flutter

    • 3. Installing Flutter

    • 4. Creating My First App in Flutter

    • 5. Creating Widgets

    • 6. Building a Widget Tree

    • 7. Conclusions

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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

A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps.

  • Build engaging native mobile apps for both Android and iOS
  • Use features like Google Maps, the device camera, authentication and much more!

Meet Your Teacher

Teacher Profile Image

Dr. Chris Mall 30,000+ Students

C# | Flutter | Scratch Instructor


Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
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. Flutter - What you will learn: welcome toe goading a move by laugh with Google. Flatter and dark, this course is designed to get you ready to learn, flatter and dart with a complete showcase mobile app. You will let everything you need for flatter end art with a step by step example. My name is crystals, and I will believe in you through this course. I call the building programming software endgame development, and I can guarantee that Google flatter is a great language that you should invest. You should learn I designed this course for anyone who is interested in learning, flatter and dart. By the end of this course, you will be able to develop your own on droid antivirus mobile labs. So why use flatter? Running at 60 FPs. Usual interfaces created with flatter perform farm far better than those created with other gross blood from development frameworks such as react, native anti Janek. And if that doesn't excite you, here are a few more reasons why you might want to use flatter, flatter uses. Dart, a fast off Victorian language with several useful features, such as mixing generics, isolates and optional static types. Flatter. Yes, it's own. Are you I components along with an engine to render them on both android antivirus platforms. Most of those you, I components right out off the books conform to the guidelines off material design. Flatterer ups can be developed, chemical you're using and intelligent idea and a day that is very similar. Toe Android studio. So the ideal student of the course is anyone who is looking to improve his Golding skills in Dubai Lapse, or students that they want to learn Google flatter and dark, with a complete showcase. Example. The ideal student of the course. There are no requirements necessary to enroll. Will he only be asked to be open minded and read it? Learn so feel free to buy this course, and I'm really excited to start together and see you master Brueghel flatter. 2. Introduction to Flutter: welcome to the scores. I am creased us, and I will be leading you through this course. I promise you that this will be a very exciting journey, because you will learn how to create, to go to a mobile up with Google, flatter and dart, and actually create mobile applications that will be a droid and also for iPhone. So if you're looking for alternative approaches, toe a droid or iPhone application development, then you should consider giving Google's flatter a framework actually, based on dark programming. Liquids try. Applications built with flatter are largely indistinguishable from those building using very droid s gay, for example, both in terms off look and performance. You will find no difference between a native application and an application that is created with Google. Flatter. What's more, with minor tweaks, they can be ran on Io's devices as well. So in these scores, I would write to introduce you to the basics off latter by sewing specific examples by showing how to build a simple, deep calculator up for Android. As you can see here, there is actually a screenshot from the up that we're going to create, so let's start to be able to follow this course, you will need actually the latest version off Intelligent Idea, an android studio that it would be at least 2.2 or higher a device or an emulator running a droid 4.4 or higher and a computer running Mac early MOOCs or windows. So, um, why use flatter? Why? To use flatter Running at 60 FPs user interfaces created with flatter, performed far better than those created with other gross blood from development frameworks . That's as react native and ionic. If that doesn't excite you, I will tell you some more reasons why you might want toe hues flutter so the 1st 1 is flatter. Uses dart. So, uh, which is very important, that goes. It is a fast. It is an object oriented language with several useful theatres, such as mixing generics, isolates and optional static types. If you don't know what this mean, then you will understand what things are exactly by song specific examples, and then you will. You will appreciate all these characteristic, actually flattered his its own. You. I component along with, uh with, uh and ending to render them on both Android and IOS platforms so most off these you, I components, um, are actually out of the box. Conformed to the guide lights off material design. Finally, flatter ups can be developed using intelligent idea. Um, that is actually a need a an environment that is very similar to Android Studio. But as I said, the first reason that you should write flatter is that is extremely fussed, faster than react native and faster than I own because it runs at 60 FPs. Thank you and looking forward to seeing you in the next lesson. 3. Installing Flutter: Hey, guys will come back. So let's right to make the first steps to install a little flatter and create our applications. So first of all, a. So you can see I'm the website for the official website, for flatter is flatter dot io. And here you can see a lot off interesting things like showcase examples and actually download flatter. So I clicked on just started, and here you can select the operating system in which it's your installing flatter. So if you have windows, you should click install on windows and here, As you can see, there is the flatter windows version Ah, 5.1 that you just click it and you downloaded. I'm after downloading. It is suggested toe unzip the content toe the folder shores flatter or whatever you want. But it's important toe not install it to the default program files because it requires elevated privileges. So, as you can see inside the C uh, source file, um, I already set up flatter. So, um, you can use actually the flat there console. So first of all, download flatter Onda. Uh, then you will be able to use it if you're actually using DEET in Michael clinics for Windows. You can actually get the latest version of flatter bike lowing, but by cloning, it's get help repository. So actually, you can use visual get clone https. Get cab dot com flatter flatter dot get um, you would also find these shorts in the and downloaded from the links section. In this lesson, it is important to know that flatter his Seaver. Us is a lot of dependencies, such as dark as the gay and a lot of material designed for INGE. Fortunately, the first time your own flatters diagnostic tools, all of them are installed automatically. So what you have to do is just ran V's commands. Actually, as you can see here, uh, actually, you have to go to say source flatter, as you could see. And there you can click to Flatter Console. And here it is the flatter council, where you can either click flatters, help to see all the available commands, actually, how to create a new project, cetera. We're not going to use the consul in creating this example, because I think it's a little bit more complicated. But what is important to know is that after downloading and extracting flatter. In this directory, you can run flatter, dr, in order to run, flatters diagnostic tools and install all the dependencies automatically. So after using fluttered, Doctor, I have one issue that is not very important, actually has to do with a droid two sane. Um So, um, you have toe make the same steps, and you will be able to run. Flutter. So, goto, where is the flatter doctor? Usually is inside the folder. Flatter being. So, um, you will see something like this the first time that you ran. Flatter, Doctor, Um, we will download all the material folds the packet, sees their Lynn look stools or the mark or the window stools, and then you will be able to run a flatter. So to be able to build on droid ups, you must also find point flatter toe the directory where you installed 100 studio. So this is the command that you can use. Uh, you can type or you can copy paste, uh, in your bust in orderto I ran, um, run android apps to build and run under naps after pointing flatter to this directory. Although you can directly use flatters command line Last buoy. So the slide actually, to create and brand new apps, you're likely to have far better development experience if you use any. So we're going to use Intel Day. I d. Until the idea. It is the recommended either for flatter. So, um, before, uh, you start developing flatter ups? Um, actually, you must install flap black games for both dark and flatter. So first of all, you care to download Intel Day idea download. 2nd 1 is to install Dart, and 3rd 1 is to instal flatter from until they idea environment. So first of all, let's see, I'm going to type intelligence, a idea you go there to download, and here you can also select the blood from that. We're using the operating system and download. Actually, not the ultimate. But you can download, um, their community that is free and it's adult is almost the most future that we will need for our move. My lap show. Download the community free version. And after downloading, um, Jacob free version, um, you would be able tow go and select configure plug ins, as you could hear configure plug ins in the intelligence. A welcome screen. Um, so in the dialogue that pops up breath, browse repositories battle and said for the dark. Blufgan. So you hear something like this? Um, wants to fight it, breaths, then stole baton here in orderto install it. And you should shoot. You should do the same for installing the flatter Blufgan. So you will die, flatter, and then you will. You will type flatter. And then you will install the blagging. Once both the audience are installed, then you should restart Intel J. So, um, you must now point the flatter plug in to the directory in which you installed Flatter. So to do this, select configure settings. Um, in the welcome screen and in the dialogue that pops up, navigate two languages and frameworks and select flatter and in the flatter sdk path typing absolutely bath director. So you have here flatter under languages and frameworks. And in the flatter as the cape off, you should type your buff. So pressure k finally toe, uh, complete the configuration. Thank you very much. And looking forward to seeing you in the next election. 4. Creating My First App in Flutter: Hey, guys will come back to create a new flutter project. You should press, um, they create new broach battle in the welcome screen and then in the new project. Dialogue in the deli is a idea. You should choose flatter and breast next, so you can now give a meaningful name to your project and breast things. I hated the broads of my little up. Maybe you should make something, uh, more meaningful for this project and off course. It should be unique and something that you will remember after this course. So once the project has been generated, I suggest you press the wrong button to make sure that the dart as the gay, the plug ins and the flatter framework are all configured correctly. So if they are after several seconds, you should see the screen on your device or on your emulator. This is actually the first time the flatter demo home Bates. It is a black stream. It is a shallow hole. The example, Um and it's time. It's time you press this button, you will see that a message appears that says the battle top two times, three times each other. Um, note that From this point on, you don't have to press their own button again, even after making cold. Jane's is, uh, flatters work. Flatter works in the same exact way as I only work if you have experience in developing mobile applications with Ione, it's time, but you save you, make it saints and you save this project automatically. Chains Ah goes toe the mobile app and the they're up updates corresponding. So flatter. Also supports Holt. Reload a future that I lows you toe instantly push updates toe that without restarting it on. I think this is one off the most important features that will help you in developing more vile ups. Because you will. You will need much less time in building and in testing Europe in deploying actually either in an emulator or in your device. Thank you for months and looking forward to seeing you in the next lesson. 5. Creating Widgets: so one off. The most found fundamental ideas in creating new applications in Flatter is to create new abs using widgets. So in this lesson, you will see what is what what is. They're conscious that we call wins, it's and how we can use this widgets toe create mobile ups. So, actually, in this course, we're going to create a tip calculator up with three specific with its A text field that will accept a bill amount. A second text field will accept a tip percentage and finally, a raised button that the user can press in order to calculate. So, um, it is important to know that actually, it's flatter. Waited. I can either be, um, can either be a stateless widget or a state ful widget. So as its name suggests, a state for which it is a state object associate it with it wits alos ah, lose it not only to start that, but also to react to changes in the data. On the other hand, a stateless widget is a singular object not designed toe persistently store any data. So for the scores, week will be creeped. Creating are typical traitor as a stateless widget because we don't want toe persistently store any data. So you would either have stateless widget or a state for with you should remember that a stateless with that is not designed toe store. Any data on the other hand, state for with it shares a state object associated with hip with silos to store data and to react to changes in the data. So let's start open main dot dart. The dart is the extension off the dart languages language that flock actually fraud, flatter frame framework uses. Um, so remove all its contents and add only the following code you should add on Lee vase gold . Um, so, um, actually to store the bill amount and the deeper sentiments Odd two member valuables through the class. Um, you should import back. It's a zoo. I'm sure for this you should actually import back. It's flutter material dart and then in the class. Typically, later, you should use to, uh, valuables. Two member variables, but are double. The format is double. The type is double. So, uh, as you can see here, eso we should override the build method. So to start creating the user interface off application, we should use this gold, actually, an override code that huge wins it build method, and then we're going to add some more gold. So let us now create too Text field, which it actually, while doing show we can specify the tales such as the labels we want to associate with the widgets end the types off the virtual keyboards that must be displayed when they're in focus. Actually, because we can't directly retrieve the contents off a text field with it, we must also we must also associate and on change event color with it inside the counselor . Actually, which receives an input value object. We can then update the contents of our classes member member variables. So, um, accorded Lee, we're going to add the following code inside the build method. Um, actually A so we can see. Um, we're going to use the first input file, and they said, OK, this is actually common were important. And the second important field. So even if you can never work with that before this gold should be fairly intuitive. So, uh, if you are familiar with dollar, you could easily read this cold. For instance, you can see that We're using the parts method to convert its text filled with sex content to a double object. Um, as you can see here and almost is the same the next text field. So because the parts method can throw ah far format exception, it is also surrounded by a try. God's, um, block, show us urgency. We have a bill Mount Bill, Amount Field. This is a text field, a new text field. Actually, we have three things. We have the label text, we have a table type and we have their own changed the same like in javascript the same logic. So the label text will have the bill amount, and then the keyboard type should be number text into type dot number. And when the text is changed, then the bill amount should take this value. The text of the value and a transforming transform it into a double number. Andi, if there is an exception than the bill, amount should be zero so that our up does not cross in the second input field, which have also a text field named Deep Percent. That field in this, uh, in this text field which have a label text name Deep, a keyboard type named texting type, the number machine text that is 15 and when the value is changed. Then again, the text off the value is parsed and converted into a double for my number. So again, if there is an exception, then the deeper centers would will be will be zero. So next we're going to create our race bottom widget. Actually, it is important to say that creating a race bottle which it it's much like creating a text field widget, however toe assign the label to eat. You must create a new text widget and added as a child. So inside the old pressed event, color off the bottom well, actually calculate the tape and the total amount to be paid and display both inside model dialogue. So to create the dialogue, we can use the allergy dialogue glass and once created, the dialogue can be displayed by passing us an argument to the Seoul dialect method. So actually, in this cold, you can see that we have a calculate bottom that is a new race bottle, actually, various child with the text calculate and when pressed, well, some more gold. So when, uh, we're going toe obvious code inside the on pressed event handler, Andi actually put calculated deep. And, uh, we go use bill amount and 2%. That's, uh, divided by 100 then actually will use the total amount. That is the bill amount and the calculated deep. They will generate the dialogue by using the alert dialogue, dialogue. So, actually, I will have a new text deep on to calculate deep, and we will so finally, the dialogue. So in this cold note that we have used darts string interpolation feature to embed valuables inside the content off the dialogue also, you can see that three little girls in dark can be countin ated just by placing them beside one another. So though you can use the plus separate or two if you like, So this is actually the first example and looking forward to seeing you in the next lesson . 6. Building a Widget Tree: Hey, guys will come back. So now we're going to see how to create a widget tree. And actually, what does this mean? A flatter up? Actually, it's use is nothing but a three off widgets. In other words, you create a flatter up by simply creating multiple widgets and establishing parent child relationships between them. So currently there are no relationships between the weeds. It's we creating in the previews lesson as you might have chest. They're all going Toby siblings. So let's now great. A parent wins it for them, and we did that can have multiple Children is usually referred toe as a layout with it. Flutter offers several layout with visits to choose from. So for our application, the column with it is most appropriate because it positions all its Children one below the other. So in orderto conform to the material design spec, we must add a pardoning off 16 dp to the call of widget. As you can see here, we will have a container called container that is a new container and actually we will use a bad ink. Maybe you you know what added means by CSS or eight female. Um, so we're going to have a little space If we think that this is the up, we're going to have some space inside their show. This space is actually the padding. Um, so we will have the Children off. This layout waits it. That is the three. The three weeks sister were created, the text field bill amount field, the text field, deeper centers field. And finally, our raised battle named Calculate bottle. Um, So, um, actually, a material design user interface is not complete with is very important to know it is not complete without an up bar. So we will need a nap bar. So therefore, create one using the up bar widget. So we will name via bar Bridget up bar, and the name will be deep calculator. So next we're going to create what flatter names as, ah, scaffold widget. So layout containing a bird's arbors and containers are so common that flatter offers a scaffold widget to help you quickly establish a relationship between them. So with this gold, actually, we're going to use the scaffold, wins it where we will say that we'll have this arbor and the body will be the container that will ready Created. So with the scaffold, with it as its root are wait three is now ready. You can go ahead and use the scaffold widget as they return. This is very important value off the build method. So here it is. So if you're finding hard, if you're fighting hard to visualize the three this Dr Graham will tell you the 1st 1 is the scaffolding widget their route. Then we're going to have the up bar and the container. The harbor is the shredder, actually off our mobile app, and our container has actually three columns, a text field, a text field and a raised butter. So this is our wigs. It three diagram, I think with this example you now understood, um, how a flutter up is designed and is developed with winds it and using a widget tree diagram . So that's enough for its lessons for this lesson and looking forward to seeing you in the next round 7. Conclusions: Hey, guys will come back. Our dart file needs a main faction as its entry point. And inside it we must go the run up function toe, actually inflate and render the window tree were created in the previous election. So our deep calculator widget must be placed inside a material up with it. So, uh, that a material design theme and color scheme can be applied to it. So therefore, ad for this gold toe, the main dart file. So here these material up with the title deep calculator and the home would be ah, will be tip calculator function. So actually, you can now press the court, reload up battered to start using the up on your device, and you will see a subject like this the bill amount, the deep the calculate, the header that we created, named Deep Calculator. And finally, the result after the calculations, it has to do with a deep and the total amount off money. So, uh, I think that in this with this example in this course you learned how to use flatter end art along with the until J idea. If they create a simple up a simple mobile up in my opinion, flutter his almost everything a developer might look for a for in the cross platform mobile up development framework. Before we decide to start building your next big big up with it, be aware that it is still a very new and rapidly evolving framework. Thank you for months. And if you are having questions, feel free to ask them Bye bye.