Flutter Development (Day: 2).

• In the last tutorial we have discussed the Dart programming fundamentals.From this post onwards we are going to explore Flutter and we will learn more about Dart when we are continue it by doing.
• In the day0 we have completed to setup of our beautiful editor (VS Code) If you are having pretty heavy machine you can go with Android Studio.

• Let's create our first app in Flutter by launching the code editor in our case VS Code and follow the steps.

• ctrl+shift+p will invoke Command Palette.

• Type “flutter”, and select the Flutter: New Project.

• Enter a project name, such as myapp, and press Enter.

• Create or select the parent directory for the new project folder , wait for project creation to complete and the main.dart file to appear.

• Whenever we are launching our application in an emulator or in real device main.dart file runs first.

Using real device:

How to enable developer options:

• open Settings > About phone > tap on Build number 7 times.

USB debugging:

1. Connect your mobile to your computer using USB cable.
2. Further you should turn on USB debugging in developer options.
3. Open settings > Additional Settings > Developer options > USB debugging >turn on
4. If you are using Redmi/Xiaomi mobiles then you should turn off MIUI Optimisation option which is present in developer options (At the end of developer options scroll down).

Using Emulator:

1. Open the IDE and select Start a new Flutter project.
2. Select Flutter Application as the project type. Then click Next.
3. Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).
4. Enter a project name (for example, myapp). 5. Then click Next.
5. Click Finish. Wait for Android Studio to install the SDK and create the project.
6. Press the Run button.

Creating AVD (Android Virtual Device):

• Open Android Studio / IntelliJ head back to AVD Manage on the top-right corner / select Tools> Android > AVD Manager and create one there.

• If you want to run the app then press F5.

Here we go we ready now!

Writing Your First Flutter App::

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Text('Welcome to Flutter Development Tutorial'),
        ),
      ),
    );
  }
}

• Press F5 or fn+F5.It will run the code and launch the app in your Emulator/Real Device.

• In Flutter everything is a Widget.
  Ex. Text is a Widget, Center is a Widget,Scaffold is also a Widget like in Android everything is a View.

• Here are some the basic Widgets that everyone must know.

• First of all import the material package as it contains all the Widgets and Methods to use.

MaterialApp

• Material App is the basic Widget which holds all the views.We have to wrap the main app with Material App because it gives us the default view of the app.

Scaffold:

• Scaffold gives us default structure of the app by providing an AppBar and a Body.
• Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

Appbar:

• A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a Tab Bar and a Flexible Space Bar.

Container:

• A convenience widget that combines common positioning of the widgets.

Row:

• Layout a list of child widgets in the horizontal direction.

Column:

• Layout a list of child widgets in the vertical direction.

Text:

• A run of text with a single style.

Image:

• A widget that displays an image.

Icon:

• A Material Design icon.

Raised Button:

• A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.

• Here I am using VS code because it is lightweight and I am testing my app in real device because emulator is very slow in my laptop because I'm using some old stuff.Hope you can understand that.Past I used emulator but now I'm using my real device.

• If you wish to use your real device then don't forget to turn on USB degugging
  in developer options