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
runApp(); -à The function runApp() isn’t defined.
Remember runApp(); coming from Flutter. But Code editor does not know?
Goto pubspec.yaml à manage dependencies
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
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
