Flutter and Dart - the first Flutter app | hello world app | Fewer lines of code to run a app- Ep. 2
Previous video:
• Getting Started with Flutter SDK- Int...
Episode 2: Flutter and Dart Hello World app(minimum codes line to run a Flutter app)
[Some paras from Transcript]
If you haven't watch my first video. First, go and watch it. This video about start coding in Flutter SDK and Im gonna show you how you can run your app using minimal code. 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'
Now, to run a hello world in Flutter, We only need six lines of codes. First line is import 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/double quotes '' type package:flutter/material.dart. This line will import material.dart file.
Flutter has rich set of widget set that we can use.
What is a widget?
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. runApp function is coming from the material.dart file. If you remove this import statement, you can see 'The function runApp isn't defined'. 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.
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.
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.(...)
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 value as HelloWorld app or any. Now press hot reload button. In console you can see Some program elements change during the runtime to render these changes please restart. Reason is we are changing the program elements inside the main method, passing straight to the runApp(). Don't 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/mater...
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/mater...
Routes means the page in flutter. In this case home page.
One last thing, To add a center widget by new Center() inside the parenthesis add a property called child: and then add text widget. Now, this center widget is the root widget and Text widget is the child widget of it.
Widgets can have child widgets. Child widgets can have another chid Widget. Child Widget also can have Children Widjets. Widgets Widgets Widgets.
Flutter SDK tutorials Playlist:
• Getting Started with Flutter SDK- Int...
Watch video Flutter and Dart - the first Flutter app | hello world app | Fewer lines of code to run a app- Ep. 2 online without registration, duration hours minute second in high quality. This video was added by user SL Coder Ego with Coding 15 March 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,313 once and liked it 9 people.