Flutter building blocks to know about - Flutter Tutorial

- [Instructor] Now that all the setups have been taken care of, shall we write our first piece of Flutter code? You can fork this repository into your GitHub account and switch to this branch. We will start all our development from here. So, let's go back to the code, and here we have the basic contract. So, let's remove everything other than void main and the TODO's, of course. So, let me just chuck this out. And here we will create our own root widget, instead of MyApp. To start writing a widget, declare a class called ChatApp, since we will be building something similar to a ChatApp. So, here we have class ChatApp. So, this is going to be the name of this root widget. And then extend the superclass StatelessWidget. This should be extends. So, now we have class ChatApp extends StatelessWidget. And it is showing some error here, which let's see. So, I'm using Option + Return here. I think that's Alt + Enter in Windows. So, here the error is Create 1 missing override. All right, let me click on that. And it has created the missing override for me. So, on creating the class declaration, it threw and error that this is missing a concrete implementation of StatelessWidget.build, which is this one. Which is the override build method that I told you about earlier. By default, it will not ruin the widget. It will just throw this UnimplementedError. Which is a runtime error that this method has not been implemented yet by the developer. So, let's fix it by it running something. The most basic visual widget that we can display is probably a text. So, let's try our very first widget, which is Text. And we will give it Hello World, of course. Now, let's remove this MyApp, which is from this runApp method, and provide it with the new widget that we created, which, in this case, is ChatApp. So, this is not constant anymore, so let's remove that and runApp, now, is displaying ChatApp. So, let's run this. I have my emulator right here. However, it is throwing an error. So, let's go back to our Run tab and see the error. It should not be throw, it should be a return. So, now let's run this again. And the error, there is a different error this time. So, it is saying No Directionality widget found. RichText widgets require a Directionality widget ancestor. Typically, the Directionality widget is introduced by the MaterialApp or the WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used, for example, to determine how to lay out text, how to interpret start and end values, and to resolve other things, as well. Since this is the top of your application widget tree, it is suggesting that we create a parent widget for this Text widget as MateriaApp. So, let's try that. Let me just remove the Text here first and just provide a MaterialApp. Now, let's just go back to the documentation of MaterialApp to see, to understand a little bit more about this widget. So, here is says that, oh, it's a long documentation right here. Flutter has a great documentation. It basically provides a lot of information that you require about each class. So, definitely go and read them whenever you stumble upon something. So, MaterialApp is a convenience widget that wraps a number of widgets that are commonly required for material design applications. So, the rest, you can read more about it. So, this is how it should be, MaterialApp. And it takes a home property, which takes our actual first screen widget. So, this home property basically takes the widget that is going to be your launcher screen. And, in this case, a text could be one. So, home, Text, Hello. Let's run this again. Okay, so, we have something on the UI. But the UI is very ugly with this text, and two underlines for no reason. I did not ask for these two underlines. Now, this is all because we are missing another important parent widget between Text and MaterialApp, which is the Scaffold widget that basically creates a framework to implement the material design visual layout structure. So, let's take this and add a Scaffold in between. And let's see the documentation on Scaffold now. So, as I said, it creates a visual scaffold for material design widgets, like AppBar, or a floatingActionButton, or a drawer, then a bottomSheet, bottomNavigationBar. So, anything that you would require for a particular material screen in an app is actually provided here. Of course, you may be able to build all of this from scratch, without using Scaffold widget, if you are feeling adventurous. But using the Scaffold makes your job easier as a UI developer, to implement beautiful designs. So, now the Scaffold widget has a property called body, which defines the body of a screen of page. And that is where we can add back the Text widget. So, here, you provide the body now. And get the Text widget back in. So, let's run this and, hopefully, this will look better than this. So, you cannot probably see it. But it's right here somewhere, the Hello text. So, let's just add more properties of Scaffold here. And, then, maybe you'll be able to understand the power of Scaffold. So, in this case, let me just add some commas here for better formatting. We can add other properties of Scaffold, like adding an AppBar. And that is as easy as adding an AppBar widget to it. And adding a drawer is as easy as a Drawer widget to it. If we run this, if you can see, that there will be a blue AppBar and a Drawer. Just by adding an empty widget object. Let's try another one, floatingActionButton is also an easy add, like FloatingActionButton. But it does need more properties. So, if you can see the error, it says required argument onPressed, because it is a button. So, it requires a callback method. So, in this case, I can just print Button clicked. And the semicolon at the end. Format the code and you have the onPressed here. And let's run the app and you see there is some circular button, which is the FloatingActionButton in material design. Now, just as we discussed the properties of Scaffold, even the MaterialApp has a lot of properties that can be useful to know. For example, why is the AppBar blue by default? And how can we change it? Also, if you notice, even the circular button, the FloatingActionButton, is also blue. So, the app must be following some color theme, right? Yes, the default theme of a MaterialApp is a blue color swatch. And we can override it here, inside MaterialApp, using theme. So, here, we can give something like ThemeData, which takes a attribute called primarySwatch. And, here, I can make this, I suppose, color yellow. And now, if I run this, if you see, both the AppBar and the FloatingActionButton changed its color theme. Another property we can play with is the title property here. So, let's just provide it a title like Flutter CHat App. So, it takes a string, so I provided it a string. And you will be able to see visible changes when you run it on the web. Let me try and run it on the web to show you. So, we have the Chrome. Let's try to run it on the web. So, see, in the web, right here, you can see the title. So, if I change this to, now, Chat App, and run this again on web. So, see here, now it we can just Chat App. There are plenty of other properties of both Scaffold and MaterialApp. And we can discover more and more throughout the course, as and when our use cases require us to know them. But, for now, let's separate out this Scaffold into its separate class of widget. And this can be stateless widget, as well. So, let's just create a stateless widget again. But, one bonus tip, if you want to quickly create a stateless widget, you can just type stl, and it will write the boilerplate code for you. Now you just need to type the desired class name after this. So, in this case, I can make this as LoginPage at a little while later. So, let's just copy this entire thing and add it here. So, now, here home can just directly take LoginPage. So, we finished both our TODO's, which was creating a ChatApp widget and a LoginPage widget. Also, we learned about the shot code, which is the stl for creating stateless widgets quickly. So, no need to remember it anymore. But you definitely need to understand what is happening with each keyword, property, and class. And that is why I chose to write it from scratch.