Scribd
Upload
2 views13 pages

Flutter - Code Development Notes

The document provides an overview of Flutter, including tutorials on setup, widget structure, and Dart programming basics. It covers key concepts such as widget trees, classes, inheritance, and the use of the Scaffold widget for app layout. Additionally, it discusses customizing app appearance with colors and fonts using Material Design principles.

Uploaded by

Eboy Enerio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views13 pages

Flutter - Code Development Notes

The document provides an overview of Flutter, including tutorials on setup, widget structure, and Dart programming basics. It covers key concepts such as widget trees, classes, inheritance, and the use of the Scaffold widget for app layout. Additionally, it discusses customizing app appearance with colors and fonts using Material Design principles.

Uploaded by

Eboy Enerio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Flutter Overview

Lesson 1: Flutter Tutorial Intro and Set-up


Lesson 2: Flutter Overview Tutorial by Net Ninja

Root Widget
App Bar Widget
Text Widget
Container Widget
Text Widget
- Widget Tree (describes the structure of widgets inside your app)
- Properties can be defined

- All widgets are classes e.g. _HomeState (has its own programmatic class
which defines its behavior and how it looks)
- Uses a programming language called Dart
- We use different widgets to create our widget tree. Everything in blue in the
code are essentially widgets nested inside each other
Lesson 3: Flutter Tutorial - Dart Primer by Net
Ninja
At the start of your code write

void main()
- The top level required function that dart will automatically find and
execute when we run a dart file.
Sample Code
The code can be tested out in the DartPad. On the left you can write the code and
on the right you can run and see what code does on the console.
DART

CONSOLE

SAMPLE TEXT WRITING CODE


DART VARIABLES
- Statically typed programming language.
- Once you declare a variable and give that variable a type (e.g. string variable
set it equal to ‘Jay’), you can’t change the value to an integer. Can’t be done
in Dart.
- First declare the type e.g. integer

- You cannot assign a value that is not of the same variable type

- You can reassign values of the same variable type

- You can also create Boolean variables.


- You can also create dynamic data type (means you can change the data type
in the future. This can be useful but may also lead to errors if you accidentally
switch data types.

- In a large variety of languages void as return type is used to indicate that a


function doesn't return anything. Dart allows returning null in functions with
void return type but it also allow using return; without specifying any value.
To have a consistent way you should not return null and only use an empty
return.

- You cannot assign empty return value in a void function

- In Dart, the void main function plays a crucial role. It is the entry point of a
Dart program from where the execution starts. The void keyword indicates
that the main function does not return a value.
- The return value is a crucial aspect of functions in Dart. A function can
return a value using the return keyword. The type of value a function returns
is specified by the return type in the function declaration. If a function does
not return a value, its return type is void.
- You may also use ‘ => ’ instead of the return function without the curly
braces which does exactly the same thing.

- You can create List data type. Return and Add functions can also be used to
input data into the list. You may be able to add values with different data
types such as an integer inside the list. But it is not common and advisable
practice to mix data types.

- It is common practice to set the data type inside the list. This can be done
using angle brackets e.g. <String>

- This is the correct example of coding and assigning data types of your
variables in a list.

-
CLASSES IN DART
- Like a blueprint for an object (like a user object e.g. username, biography or
like a shopping cart object with information about the shopping cart e.g. the
info on the shopping cart like the items, the total number of items, the prices,
etc.)

- We use Classes to describe these objects by giving them properties and


methods (functions).

- This code is an example of how to define a class. This code describes a user
object.

- To actually create a user object based on this class follow the code below.
You can create by writing, for example User() and invoke it like we would a
function. This is called instantiating a class or making an instance of a class.
We can store this inside a variable.

Type of data (e.g. User),


Variable name userOne. This
creates an instance of this
class and store it in this User
variable.
- This code assigns the same username for all the User instances because we
have coded it inside the class. This means every user has a name jay and age
25.

- To override this behavior, we can use a constructor inside a class. It is a


special function that runs when we instantiate a class and that function can
take in different parameters. Here we took the value that we set and
assigned it to the username property of this instance.

- Constructor initialization (The constructor parameters directly initialize the


fields username and age using the shorthand syntax User(this.username,
this.age);. This ensures that both fields are non-nullable and properly
initialized when a User object is created.)

- Code Execution (The main function creates a User object with the given
username and age, then prints these properties to the console.)

- This approach ensures that the fields username and age are always initialized,
thus adhering to Dart's non-nullable type requirements.
Class Properties

Constructor

Method or
Function

INHERITANCE IN DART (CLASSES AND EXTENDING CLASSES)


- When we have a class that inherits the properties and behavior of another
class. E.g. SuperUser - have exactly the same function and properties as a
regular User class but have an extra function to publish updates or
something like that.

- Let’s create a new class called SuperUser. We don’t want normal users to
have the publish update function, so we define it in SuperUser. The
SuperUSer inherits the behavior of the class User with the added option to
create additional functions.

- The void has the extra publish function that you can set.

- The constructor defines what we take in, the username and age. When we
create a SuperUser we pass in the values username and age. We don’t set
those values right in the SuperUser, we inherit it from the User which has
those values.
SuperUser inherits properties of User class
Constructor
Extra Function

Lesson 4: Flutter Tutorial: Creating a Flutter App in


Android Studio by Net Ninja
Create/Add an AVD (Android Virtual Device) in Android Studio where you will be
testing out your app.
Install Plugins to help you out in the app development. e.g. flutter and dart plug-
ins.
Create your first project.

Delete everything first and start with the void line. Use MaterialApp widget as our
root widget. This allows us to use a blank-up and use google materials design
features. It’s like a wrapper for the rest of our widgets in the app. Inside our widget
we can specify different properties e.g. home properties having inside it a text
widget. Always place a comma after defining a property and its value.
Lesson 5: Flutter Tutorial: Scaffold and AppBar
widgets in Android Studio by Net Ninja
Scaffold Widget allows us to implement a basic layout for our app. AppBar,
floating buttons, etc.

Scaffold is very useful to flesh out the general layout of your app.
More information on Scaffold Class in this Link. (Properties you can add to the
Scaffold widget)
Lesson 6: Flutter Tutorial: Colors and Fonts in
Android Studio by Net Ninja
You can modify the properties e.g. background color on the app bar. You can find
the values of these properties for color in the Material Design Color Palettes.
When adding a color property, you can click Cltr+Q while selecting color, a list of
the shades of the color chosen will be shown. e.g. backgroundColor:
Colors.red[400]

If you want text to accept different properties do this. You can use TextStyle and
define the properties such fontSize, fontWeight, etc.
You can also add different font families. You can get the custom font in google
fonts.

You might also like