Flutter Tropa

DART FOUNDATIONS

Variables
Parang lalagyan ng data. Example:

Code var name = "Christian"; // String

int age = 25; // Integer

double height = 5.9; // Decimal

bool isStudent = true; // Boolean

Functions
Mga utos na pwede mong tawagin ulit-ulit. Example:

Code

void greet(String name) {

print("Hello, $name!");

}

greet("Joshua");

// Output: Hello, Joshua!

Object-Oriented Programming (OOP)

Parang blueprint (class) para sa mga bagay.

Example:

Code

class Student {

String name;

int age;

Student(this.name, this.age);

void introduce() {

print("Hi, I’m $name and I’m $age years old.");

}

}

var student1 = Student("Christian", 25);

student1.introduce();

Async/Await

Para sa mga bagay na matagal gawin (like network requests).

Example:

Code Future<void> fetchData() async {

await Future.delayed(Duration(seconds: 2));

print("Data loaded!");

}

Null Safety

Iwas error kapag may null (walang laman).

Example:

Code

String? nickname; // pwede maging null

nickname = "CJ";

print(nickname?.toUpperCase()); // safe kahit null

Pattern Matching (Switch)

Mas malinis na paraan ng pag-check ng values.

Example:

Code

var grade = "A";

switch (grade) {

case "A":

print("Excellent!");

break;

case "B":

print("Good!");

break;

default:

print("Keep trying!");

}

Enums

Listahan ng fixed values.

Example:

Code

enum Weather { sunny, rainy, cloudy }

var today = Weather.sunny;

print(today); // Output: Weather.sunny

Sealed Classes

Parang enum pero mas flexible.

Example:

Code

sealed class Shape {}

class Circle extends Shape {}

class Square extends Shape {}

FLUTTER BASICS

Stateless vs Stateful Widgets

Stateless: Hindi nagbabago (fixed)

Stateful: Pwede magbago habang ginagamit

Stateless Example:

Code

class MyText extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Text("Hello Flutter!");

}

}

Stateful Example:

Code

class CounterApp extends StatefulWidget {

@override

_CounterAppState createState() => _CounterAppState();

}

class _CounterAppState extends State<CounterApp> {

int count = 0;

@override

Widget build(BuildContext context) {

return Column(

  children: [

    Text("Count: $count"),

    ElevatedButton(

      onPressed: () => setState(() => count++),

      child: Text("Add"),

    ),

  ],

);

}

}

Widget Tree

Parang family tree ng UI.

Example:

Code

MaterialApp

└── Scaffold

 └── Column

     ├── Text

     └── ElevatedButton

Hot Reload

Instant update ng code habang nagde-develop. Kita agad ang changes.

Material vs Cupertino

Material: Android-style design

Cupertino: iOS-style design

Example:

Code

ElevatedButton(onPressed: () {}, child: Text("Click Me"));

CupertinoButton(child: Text("Click Me"), onPressed: () {});

PRACTICE LAYOUTS

Rows & Columns

Row: Horizontal layout

Column: Vertical layout

Example:

Code Row(children: [Text("A"), Text("B"), Text("C")]);

Column(children: [Text("1"), Text("2"), Text("3")]);

Flex
Flexible arrangement ng Row/Column.

Stack
Widgets on top of each other Example:

Code Stack(children: [ Container(color: Colors.blue, width: 100, height: 100), Text("On top"), ]); GridView
Parang tiled layout Example:

Code GridView.count( crossAxisCount: 2, children: [Text("A"), Text("B"), Text("C"), Text("D")], ); ListView
Scrollable list Example:

Code ListView(children: [ Text("Item 1"), Text("Item 2"), Text("Item 3"), ]);