Flutter and Dart develop a hello world app, least lines to run a flutter app with Explonation

Episode 2: Flutter and Dart Hello World app(minimum codes line to run a Flutter app)

Playlist: Flutter SDK and Dart tutorial series - Basics to Advance
https://www.youtube.com/watch?v=ve19hGHhyEQ&index=3&list=PLurs4YIXZ79Cy-8GZc0Y3MAYGRvZNxiVe&t=0s

[Transcript]

If you haven't watch my first video. First, go and watch it because in this video I'm not going to show you, how to create your first Futter project. This video about start coding in Flutter SDK. You can use any IDE but I am using IntelliJ. If you want to use VS Code, please go and watch my 'Configure Flutter SDK in Visual Studio Code'.
So let's get started,
First of all delete this code. Wait wait a minute before that pause this video and read these comments, they have well explained. Ok, I'm gonna press ctrl + A and press delete key.
Now, to run a hello world in Flutter, We only need six lines of codes. First line is importt statement. This line is to add material design to our UI. Material is a visual design standard on mobile and an web. Let's type this: inside open and close single quotes '' type package:flutter/material.dart. This line will import material.dart file.
Flutter has rich set of widget set that we can use. OK,
What is a widget?
Let me show you official web site. flutter.io/widget-intro
there is introduction. It says, Flutter widgets are built using modern react-style framework, which takes inspiration from React. In case if you don't know, what is react is, it's a JavaScript framework from Facebook. anyway, The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.
In Flutter everything is widgets layout, text, padding, alignment and app is itself a widget.
The second line is the main method. This method simply calls the runApp method or function. add open and closed curly brackets, inside it type runApp function. This runApp is coming from the material.dart file. If you remove this import statement, you can see 'The function runApp isn't defined'. press ctrl+ z to undo. Now you can see an another error message 1 required argument expected but 0 found.' Simply means this function takes one argument and we haven't provided any. If you hold ctrl and click on the runApp method you can see the source code. runApp takes an argument and that should be a widget.
Lets go back to our code and let me add that argument. new is to instantiate an object/instance. MaterialApp open and close bracket. This is the constructor for MaterialApp class. If we go to the source code by pressing control click on this text. As you can see it has so many properties. Let's use some of these properties now.
Inside the open and close bracket type home: this is a property and we can give values for properties. For now let's add a Text Widget. new Text T is capital. And inside brackets add single or double quotes and type anything. I'm gonna add hello world. After close bracket put a comma. It's not needed because we only specify one property here. But this comma will help to format your code. To format code simply right click and click on the reformat code with dart fmt. That will help you, when you have lot of widgets and properties.
Now let's run our app.
Before that let me show you one more thing. If you can't figure out how to configure AVD in IntelliJ IDEA you can go to Tools - Android - AVD Manager and you can create or run a AVD there. For me I prefer to use terminal(because I like to use terminal). So, I'm gonna use terminal to open a emulator. In IntellJ you can find terminal in View - tools window - Terminal. and to run emulator we need to go to the tools directory inside the android sdk installed directory. This is boring because each and every time when we need to run emulator we don't like to go to this directory and copy paste the path to the CMD. There is a simple trick for that and that is copy this directory location path and and go to System - advanced system setting - environmental variable and add a new system variable. I have already did that, as you can see here I used the name as androidsdk. Now, cool thing is we can use this variable whenever we need to go to this tools directory in terminal(not need in cmd but in IntelliJ terminal). Press ok ok ok, I'm gonna close this window and to use that variable type cd % variable name is androidsdk and agian %. mark and press enter. Now we are in the tools directory. To run emulator type emulator space dash avd avd name and press enter. In case if you have any problem leave a comment otherwise you can watch my video how to create a avd. Now we can select the device and press run button.
Here is our app I know, it's ugly. Okay let's go back to our code and let me show you another way that we can write this. Here this fat arrow used to indicate that this is a one-line function/method. This is actually a short hand to create a functio nin dart.
This way is good, when we have one line of code inside method body, here we have only one property.
To add title, use title property and colon space single quotes and inside it HelloWorld app. Now press hot reload button. In consloe you can see Some program elements change during the runtime to rendeer these changes please restart. Reason is we are changing the program elements inside the main method, passing straight to the runApp(). Don'dt think about it too much for now. I will explain it in the next video. For now just press run button to restart.
Unfortunately we cannot see this title it's used by the device to identify the app for user.
learn more: https://docs.flutter.io/flutter/material/MaterialApp/title.html

By the way, home property is the route default route of the app. This is the route that is displayed first when the application is started.
Learn more:
https://docs.flutter.io/flutter/material/MaterialApp/home.html

Routes means the page in flutter. In this case home page.
One last thig, here I couldn't show you the power of hot reload. I will show you that in the next video. For now let me just show you how we can center this hello world text.
To do that, cut this text widget and add a center widget by new Center() inside the parenthesis add a property called child: and then add text widget. I have it my clipboard so Im gonna ctrl + v
Now, this center widget is the root widget and Text widget is the child widget of it. In another word parent widget of Text widget is Center widget.
Widgets can have child widgets. Child widgets can have another chid Widget. Child Widget also can have Children Widjets. Widgets Widgets Widgets. Don't panic I'll explain those everything in upcomming videos. For now this is enough.
Now let's press hot reload. Nope.. run button to restart the app. Boom... did you see that.cool right.
Ok guys I hope you everyone I hope you learn something in this video. Let me know your thoughts about this video. Subscribe botton down below if you wanna learn this tutorial series you can press that button. Like this video if you like. And I'll see you in the next video untill the good bye.