Flutter Basics and Let's start to code

 2.0

Folders

Lib -  Contain actual dart files

At start it is “main.dart” file , but as application grows you can create more folder structure

Android, MacOs , Linux, IOS -Folders comes in platforms names as this, contains platform specific files

Typically you do not need to do any changes – Flutter will take of that

Build – important folder – you won’t work here

Output files and temporary files generated by Flutter as it builds your app

Test – contains dart code - test code, automated test code for your app

.idea , .dart_tool – folders start with dot “.” Contains some extra configurations.

.idea – contain some extra configurations for Android Studio

.gitignore – version control file used by Git.  You don’t have to use Git, but don’t delete the file.

-          You cam manage snapshots

.metadata -  managed automatically by Flutter , keep track some internal information, meta data about your project.

You should not delete or Edit the file.

Analysis_option.yaml – configures some Flutter and Dart tooling that is used by code editor

-          To show you warnings and errors in code , before you even run the app

o   Amazing feature to catch errors early

-          You can dive into this file for customize.

Puspec.yml – ignore that -never managed file. You may edit when needed.

-          Add third party packages

-          Add images also

README.md – General Information about this project

-          short description about this project and resources

 

 

Flutter Code Compilation

From Top to Bottom

Code is compiled by various start and Flutter tools à and translated into native iOS and machine code ( understood by target platform)

Compiled code will executed on the mobile device

Understanding Languages

Two sections

-          Keywords

o   Import / void / const – basically highlighted or colored in Blue (depends on context , in VSCode blue, yellow for return …)

§  Built into programming language , reserved words

§  Have clear Specific meaning

-          Identifiers

o   Word as a developer defined yourself

§  Developed by developers of the programming language

§  To identify specific detail or block

·       Name given to a variable

·       Label in class in the program or function

 

Editor ( VsCode)

-          Colors for keywords and identifiers

o   Increase readability

-          Highlight error

 

 

Write First Code

-          You can edit main.dart

-          Here , we delete and start write from scratch

 

Start Write

runApp() ;  à Function

-          Funtion

o   Simply instructions that can be executed

 

 

runApp() is a function and instructions provided Flutter ( neither written by you nor built into Dart programming language )

 

-          All about getting App up and running

-          Actually to show some interfaces on the screen

-          But above will give error

-          Why

-          You need to wrap these functions to other Functions

-          We must create a custom function

-          In this case start with void and identifier must be main followed by parenthesis and opening and closing braces

 

Void main () { }

-          Void  - return type

-          Main – function name

-          { } between opening and closing braces , is Function Body

-          Code should executed when this function executed

 

              Those Functions are not executed by device (mobile ) or computer on which the code runs, unless you tell computer, device to Run the instructions

How

-          Using that instruction name

o   Followed by opening and closing parenthesis

 

Void main() {}  à Defining a function

RunApp() ; à Executing (or calling ) a function

 

Now Let’s put runApp() inside main

void main(){
              runApp(); -à The function runApp() isn’t defined.
}

 

Where should runApp(); come from
Remember runApp(); coming from Flutter. But Code editor does not know?
Goto pubspec.yaml à manage dependencies
This already has dependency for “Flutter”

dependencies:
  flutter:
    sdk: flutter
 

we need to import à

              import keyword within quotes/double quotes followed by ‘package’ and colon

import 'package:';

 

Then follow ‘flutter’ 

import 'package:flutter';

 

use arrow keys to select and TAB to finish.

import 'package:flutter/material.dart';

 

Questions

What's the most important folder, in which you'll work most of the time, in a Flutter project?

The “lib” folder

Which file is the entry point for a Flutter application?

Lib/main.dart

What is the main purpose of the Dart compiler?

Convert Dart code into machine code that can run on various platforms

What are functions in programming?

    Sequence of Instructions that perform specific task.

How do you import a package in a Dart file?

    Import “package_name”

Which key "elements" are involved in the startup process of drawing a UI onto the device screen?

    The main function and the runApp() function

 

Now code looks like

 

import 'package:flutter/material.dart';
 
void main(){
  runApp();
}
 
 

But still has an error __-> 1 positional argument expected by 'runApp', but 0 found.

 

Flutter code build with widgets and you will end up with Widget tree.

1.     Material App -root app require by most other widgets

a.     Scaffold – Screen layout widget that adds base styling and more

                                               i.     Row -  Widget that displays multiple adjacent child widgets

1.     Text – Widget that displays some Text on screen

2.     Text

3.     Text