CopyCode
יסודות Dart
💡 מה זה Dart?
Dart היא שפת תכנות מודרנית שנוצרה על ידי Google. היא מופעלת בנחמד ומהר, ובעיקר משמשת לבניית אפליקציות עם Flutter.
Dart משלבת את הטובות של שפות רבות: פשוטה כמו Python, מהירה כמו C++, ובטוחה בטיפוסים. כל קוד ב-Dart הוא אובייקט!
הדפסה בסיסית
הדפסה לקונסול:
void main() {
print('Hello, Dart!');
print('Welcome to Dart Programming');
}
הדפסה עם משתנים:
void main() {
String name = 'Alice';
int age = 25;
print('My name is $name');
print('I am $age years old');
print('Next year I will be ${age + 1}');
}
קלט מהמשתמש (קונסול):
import 'dart:io';
void main() {
stdout.write('Enter your name: ');
String? name = stdin.readLineSync();
print('Hello, $name!');
}
הערות בקוד:
// זו הערה בשורה אחת
/* זו הערה
מרובת שורות */
/// זו הערה לתיעוד
/// משמשת להסברים של פונקציות וקלאסים
משתנים וטיפוסי נתונים
💡 טיפוסים ב-Dart
ב-Dart יש הרבה דרכים להגדיר משתנים: var, int, double, String, bool, dynamic.
var - Dart מנחש את הטיפוס בעצמו (inference).
int - מספרים שלמים בכל גודל שתרצו.
double - מספרים עם נקודה עשרונית.
String - טקסט.
bool - true או false בלבד.
dynamic - ערך שיכול להיות כל דבר (הימנע כמו האש!).
הגדרת משתנים
דרכים שונות להגדיר משתנים:
void main() {
// var - Dart מנחש את הטיפוס
var name = 'Alice';
var age = 25;
var score = 95.5;
// טיפוס מפורש
String city = 'Tel Aviv';
int year = 2025;
double pi = 3.14159;
bool isValid = true;
// final - ערך שלא ניתן לשנות
final String country = 'Israel';
// const - קבוע בזמן קומפילציה
const int maxScore = 100;
}
מספרים:
void main() {
// מספרים שלמים
int count = 42;
int negative = -10;
int million = 1000000;
// מספרים עם נקודה
double price = 19.99;
double pi = 3.14159;
double scientific = 1.23e-4;
// המרות
int num1 = 10;
double num2 = num1.toDouble(); // 10.0
int num3 = 19.toInt(); // 19
}
Strings וקונקטנציה:
void main() {
String s1 = 'Single quotes';
String s2 = "Double quotes";
String s3 = '''Multi
line
string''';
// קונקטנציה
String greeting = 'Hello' + ' ' + 'World';
// String interpolation
String name = 'Bob';
String msg = 'Hello, $name!';
String calc = 'Math: ${5 + 3}';
// Raw strings (ללא escape)
String path = r'C:\Users\Name';
}
Boolean:
void main() {
bool isTrue = true;
bool isFalse = false;
// השוואות
bool result = 5 > 3; // true
bool check = 'abc' == 'abc'; // true
// פעולות לוגיות
bool a = true;
bool b = false;
bool and = a && b; // false
bool or = a || b; // true
bool not = !a; // false
}
Nullable types:
void main() {
// משתנה שיכול להיות null
String? name; // null
int? age; // null
name = 'Alice';
age = 25;
// בדיקה קודם שימוש
if (name != null) {
print('Name length: ${name.length}');
}
// ?? - ערך ברירת מחדל אם null
String displayName = name ?? 'Guest';
}
אופרטורים
💡 אופרטורים ב-Dart
אופרטורים הם סמלים שמאפשרים לנו לעשות פעולות על משתנים.
יש אופרטורים לחישובים (אריתמטיים), השוואות, לוגיים, וגם כמה טריקים של Dart!
אופרטורים אריתמטיים
חישובים בסיסיים:
void main() {
int a = 10, b = 3;
print(a + b); // 13 (חיבור)
print(a - b); // 7 (חיסור)
print(a * b); // 30 (כפל)
print(a / b); // 3.3333... (חילוק)
print(a ~/ b); // 3 (חילוק שלם)
print(a % b); // 1 (שארית)
print(2 * 3 + 4); // 10
}
אופרטורים של השמה:
void main() {
int x = 10;
x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x ~/= 4; // x = x ~/ 4 → 6
x %= 4; // x = x % 4 → 2
// הגדלה והקטנה
int count = 0;
count++; // 1
++count; // 2
count--; // 1
--count; // 0
}
אופרטורי השוואה:
void main() {
int a = 5, b = 10;
print(a == b); // false (שווה)
print(a != b); // true (לא שווה)
print(a < b); // true (קטן מ)
print(a > b); // false (גדול מ)
print(a <= b); // true (קטן או שווה)
print(a >= b); // false (גדול או שווה)
}
אופרטורים לוגיים:
void main() {
bool a = true, b = false;
print(a && b); // false (AND - שניהם צריכים להיות true)
print(a || b); // true (OR - לפחות אחד צריך להיות true)
print(!a); // false (NOT - היפוך)
// בשילוב
print((a && b) || !b); // true
}
אופרטורים מיוחדים של Dart:
void main() {
// ?. (conditional access)
String? name;
int? length = name?.length; // null, לא שגיאה
// ?? (null coalescing)
String displayName = name ?? 'Guest';
// as (type casting)
dynamic x = 10;
int y = x as int;
// is (type check)
if (x is int) {
print('x is an integer');
}
}
עבודה עם Strings
💡 Strings ב-Dart
Strings הם בדיוק כמו ב-Python - אוסף של תווים. ב-Dart יש הרבה מתודות שימושיות לעיבוד טקסט.
פעולות בסיסיות על Strings
אורך וגישה לתווים:
void main() {
String text = 'Hello, World!';
print(text.length); // 13
print(text[0]); // 'H'
print(text.isEmpty); // false
print(text.isNotEmpty); // true
// substring
print(text.substring(0, 5)); // 'Hello'
print(text.substring(7)); // 'World!'
}
המרות וחיפוש:
void main() {
String text = 'Hello World';
// המרות
print(text.toUpperCase()); // 'HELLO WORLD'
print(text.toLowerCase()); // 'hello world'
// חיפוש
print(text.contains('World')); // true
print(text.startsWith('Hello')); // true
print(text.endsWith('World')); // true
print(text.indexOf('World')); // 6
}
פיצול וחיבור:
void main() {
String csv = 'apple,banana,orange';
// split
List fruits = csv.split(',');
// ['apple', 'banana', 'orange']
// join
String joined = fruits.join(' | ');
// 'apple | banana | orange'
// trim
String withSpaces = ' hello ';
print(withSpaces.trim()); // 'hello'
print(withSpaces.trimLeft()); // 'hello '
}
החלפה ותבניות:
void main() {
String text = 'Hello World World';
// replaceAll
String replaced = text.replaceAll('World', 'Dart');
// 'Hello Dart Dart'
// replaceFirst
String firstOnly = text.replaceFirst('World', 'Dart');
// 'Hello Dart World'
// padLeft / padRight
String num = '5';
print(num.padLeft(3, '0')); // '005'
print(num.padRight(3, '0')); // '500'
}
Collections - Lists, Maps, Sets
💡 Collections ב-Dart
List - רשימה של פריטים בסדר מסוים (כמו Python list).
Map - מילון של key-value (כמו Python dict).
Set - קבוצה של ערכים ייחודיים ללא סדר מסוים (כמו Python set).
Lists
יצירת רשימות:
void main() {
// דרכים שונות ליצור רשימה
List numbers = [1, 2, 3, 4, 5];
List fruits = ['apple', 'banana', 'orange'];
// List empty
List empty = [];
// List constructor
List zeros = List.filled(3, 0); // [0, 0, 0]
// List.generate
List squared = List.generate(5, (i) => i * i);
// [0, 1, 4, 9, 16]
}
גישה ותאימת אינדקסים:
void main() {
List fruits = ['apple', 'banana', 'orange'];
print(fruits[0]); // 'apple'
print(fruits[2]); // 'orange'
print(fruits[-1]); // שגיאה! (לא כמו Python)
print(fruits.last); // 'orange'
print(fruits.first); // 'apple'
print(fruits.length); // 3
}
הוספה והסרה:
void main() {
List numbers = [1, 2, 3];
numbers.add(4); // [1, 2, 3, 4]
numbers.addAll([5, 6]); // [1, 2, 3, 4, 5, 6]
numbers.insert(0, 0); // [0, 1, 2, 3, 4, 5, 6]
numbers.remove(3); // [0, 1, 2, 4, 5, 6]
numbers.removeAt(2); // [0, 1, 4, 5, 6]
numbers.removeLast(); // [0, 1, 4, 5]
numbers.clear(); // []
}
חיפוש ומיון:
void main() {
List numbers = [3, 1, 4, 1, 5];
print(numbers.contains(3)); // true
print(numbers.indexOf(1)); // 1
print(numbers.lastIndexOf(1)); // 3
// מיון
List sorted = [...numbers]; // עותק
sorted.sort();
print(sorted); // [1, 1, 3, 4, 5]
// reverse
numbers.reverse();
}
Spread operator וקונקטנציה:
void main() {
List list1 = [1, 2, 3];
List list2 = [4, 5, 6];
// Spread operator
List combined = [...list1, ...list2];
// [1, 2, 3, 4, 5, 6]
// עם אלמנט נוסף
List withExtra = [...list1, 100, ...list2];
// [1, 2, 3, 100, 4, 5, 6]
}
Maps (מילונים)
יצירת Maps:
void main() {
// דרכים שונות ליצור מילון
Map ages = {
'Alice': 25,
'Bob': 30,
'Charlie': 35
};
// Empty map
Map empty = {};
// Map constructor
Map scores = Map();
}
גישה ושינוי:
void main() {
Map ages = {
'Alice': 25,
'Bob': 30
};
print(ages['Alice']); // 25
print(ages['Unknown']); // null
// הוספה/שינוי
ages['Alice'] = 26;
ages['Charlie'] = 35;
// remove
ages.remove('Bob');
// keys, values
print(ages.keys); // (Alice, Charlie)
print(ages.values); // (26, 35)
}
פעולות על Maps:
void main() {
Map scores = {
'Alice': 90,
'Bob': 85,
'Charlie': 92
};
print(scores.length); // 3
print(scores.isEmpty); // false
print(scores.isNotEmpty); // true
// containsKey / containsValue
print(scores.containsKey('Alice')); // true
print(scores.containsValue(90)); // true
// update
scores.update('Alice', (val) => val + 5);
}
Sets (קבוצות)
יצירת Sets:
void main() {
// יצירת Set
Set numbers = {1, 2, 3, 4, 5};
Set fruits = {'apple', 'banana', 'orange'};
// Set ריק
Set empty = {};
// Set constructor
Set uniqueNumbers = Set.from([1, 2, 2, 3, 3, 3]);
// {1, 2, 3}
}
פעולות על Sets:
void main() {
Set a = {1, 2, 3, 4};
Set b = {3, 4, 5, 6};
// Union (איחוד)
print(a.union(b)); // {1, 2, 3, 4, 5, 6}
// Intersection (חיתוך)
print(a.intersection(b)); // {3, 4}
// Difference (הפרש)
print(a.difference(b)); // {1, 2}
// add / remove
a.add(5);
a.remove(1);
}
בקרת זרימה - if, for, while
💡 בקרת זרימה
דרך לתהליך בקרת ה"זרימה" של התוכנית - איזה קוד מבצע תחת איזה תנאים, וכמה פעמים.
if / else
תנאים בסיסיים:
void main() {
int age = 18;
if (age >= 18) {
print('You are an adult');
} else {
print('You are a minor');
}
}
if/else if/else:
void main() {
int score = 75;
if (score >= 90) {
print('Grade: A');
} else if (score >= 80) {
print('Grade: B');
} else if (score >= 70) {
print('Grade: C');
} else {
print('Grade: F');
}
}
Ternary operator:
void main() {
int age = 20;
String status = age >= 18 ? 'Adult' : 'Minor';
print(status);
// switch-case
String day = 'Monday';
switch (day) {
case 'Monday':
print('Start of the week');
break;
case 'Friday':
print('Almost weekend');
break;
default:
print('Just another day');
}
}
for loops
for קלאסי:
void main() {
// for קלאסי
for (int i = 0; i < 5; i++) {
print(i); // 0, 1, 2, 3, 4
}
// עם צעדים
for (int i = 0; i < 10; i += 2) {
print(i); // 0, 2, 4, 6, 8
}
}
for-in loops:
void main() {
List fruits = ['apple', 'banana', 'orange'];
// for-in
for (String fruit in fruits) {
print(fruit);
}
// forEach
fruits.forEach((fruit) {
print(fruit);
});
// forEach עם arrow syntax
fruits.forEach((fruit) => print(fruit));
}
while loops
while ו-do-while:
void main() {
// while
int count = 0;
while (count < 5) {
print(count);
count++;
}
// do-while (מבצע לפחות פעם אחת)
int x = 0;
do {
print(x);
x++;
} while (x < 3);
}
break ו-continue:
void main() {
// break
for (int i = 0; i < 10; i++) {
if (i == 5) break;
print(i); // 0, 1, 2, 3, 4
}
// continue
for (int i = 0; i < 5; i++) {
if (i == 2) continue;
print(i); // 0, 1, 3, 4
}
}
פונקציות (Functions)
💡 פונקציות ב-Dart
פונקציה היא בלוק קוד שיכול לקחת ערכים (פרמטרים) ולהחזיר תוצאה. בעלות שימוש חוזר.
הגדרת פונקציות
פונקציה בסיסית:
// פונקציה ללא ערך חזרה
void greet() {
print('Hello!');
}
// פונקציה עם ערך חזרה
int add(int a, int b) {
return a + b;
}
void main() {
greet();
int result = add(5, 3);
print(result); // 8
}
פרמטרים:
// פרמטרים חובה
void printInfo(String name, int age) {
print('$name is $age years old');
}
// פרמטרים אופציונליים (positional)
void greet(String name, [String greeting = 'Hello']) {
print('$greeting, $name!');
}
// פרמטרים עם שם (named)
void configureServer({
required String host,
required int port,
bool ssl = false,
}) {
print('Server: $host:$port (SSL: $ssl)');
}
void main() {
printInfo('Alice', 25);
greet('Bob');
greet('Bob', 'Hi');
configureServer(host: 'localhost', port: 8080);
configureServer(host: 'example.com', port: 443, ssl: true);
}
Arrow functions:
// Arrow syntax (=>) פונקציות קצרות
int multiply(int a, int b) => a * b;
String makeGreeting(String name) => 'Hello, $name!';
void main() {
print(multiply(5, 3)); // 15
print(makeGreeting('Alice')); // 'Hello, Alice!'
}
העברת פונקציות כפרמטרים:
// פונקציה שלוקחת פונקציה כפרמטר
int applyFunction(int a, int b, Function operation) {
return operation(a, b) as int;
}
// או עם טיפוס מדויק
int applyOperation(int a, int b, int Function(int, int) op) {
return op(a, b);
}
void main() {
int result = applyOperation(5, 3, (a, b) => a + b);
print(result); // 8
}
תכנות מונחה עצמים (OOP)
💡 OOP ב-Dart
Class - תבנית ליצירת אובייקטים.
Object - מופע מסוים של Class.
Properties - מאפיינים של האובייקט.
Methods - פעולות שהאובייקט יכול לעשות.
כל דבר ב-Dart הוא אובייקט!
הגדרת Classes
Class בסיסי:
class Person {
String name;
int age;
// Constructor
Person(this.name, this.age);
// Method
void greet() {
print('Hello, I am $name and I am $age years old');
}
}
void main() {
Person person = Person('Alice', 25);
person.greet();
print(person.name);
print(person.age);
}
Constructor ו-Initialization:
class Rectangle {
double width;
double height;
// Constructor רגיל
Rectangle(this.width, this.height);
// Named constructor
Rectangle.square(double side)
: width = side,
height = side;
double area() => width * height;
}
void main() {
var rect1 = Rectangle(10, 20);
var rect2 = Rectangle.square(5);
print(rect1.area()); // 200
print(rect2.area()); // 25
}
Getters ו-Setters:
class Temperature {
double _celsius; // private (מתחיל עם _)
Temperature(this._celsius);
// Getter
double get fahrenheit => _celsius * 9/5 + 32;
double get celsius => _celsius;
// Setter
set celsius(double value) {
if (value < -273.15) {
throw Exception('Invalid temperature');
}
_celsius = value;
}
}
void main() {
var temp = Temperature(25);
print(temp.celsius); // 25
print(temp.fahrenheit); // 77
temp.celsius = 30;
print(temp.fahrenheit); // 86
}
Inheritance (ירושה):
// Base class
class Animal {
String name;
Animal(this.name);
void speak() {
print('$name makes a sound');
}
}
// Subclass
class Dog extends Animal {
String breed;
Dog(String name, this.breed) : super(name);
@override
void speak() {
print('$name barks: Woof! Woof!');
}
}
void main() {
Animal animal = Animal('Generic');
animal.speak();
Dog dog = Dog('Rex', 'Labrador');
dog.speak();
}
Abstract classes ו-Interfaces:
// Abstract class
abstract class Shape {
double area();
}
class Circle implements Shape {
double radius;
Circle(this.radius);
@override
double area() => 3.14 * radius * radius;
}
class Square implements Shape {
double side;
Square(this.side);
@override
double area() => side * side;
}
void main() {
Circle circle = Circle(5);
Square square = Square(4);
print(circle.area()); // 78.5
print(square.area()); // 16
}
תכנות אסינכרוני - Futures ו-Async/Await
💡 אסינכרוני ב-Dart
Synchronous - קוד ממתין שיתבצע קוד אחד אחרי השני בסדר.
Asynchronous - קוד שיכול להמתין לתוצאות בלי לחסום את שאר התוכנית.
Future - ערך שיתקבל בעתיד (כמו Promise ב-JavaScript).
async/await - דרך פשוטה וקריאה לעבודה עם Futures.
Futures בסיסיים
עבודה עם Futures:
// Future בסיסי
Future fetchData() async {
await Future.delayed(Duration(seconds: 2));
return 'Data loaded!';
}
void main() {
fetchData().then((data) {
print(data);
});
print('Loading...');
}
// Output:
// Loading...
// (after 2 seconds) Data loaded!
Async/Await:
Future fetchUserData(int userId) async {
// מדמה בקשה לשרת
await Future.delayed(Duration(seconds: 1));
return 'User #$userId: Alice';
}
void main() async {
print('Fetching user...');
try {
String userData = await fetchUserData(1);
print(userData);
} catch (e) {
print('Error: $e');
}
print('Done!');
}
Multiple Futures:
Future fetchUser() async {
await Future.delayed(Duration(seconds: 1));
return 'Alice';
}
Future fetchAge() async {
await Future.delayed(Duration(seconds: 1));
return 25;
}
void main() async {
print('Fetching data...');
// חכה לכל ה-Futures
var results = await Future.wait([
fetchUser(),
fetchAge()
]);
print('${results[0]} is ${results[1]} years old');
}
Flutter בסיסי - הקדמה
💡 Flutter
Flutter - framework מ-Google לבניית אפליקציות ניידות (iOS ו-Android) מקוד אחד.
Widget - בנה בסיסית של UI. הכל בFlutter הוא Widget.
State - מידע שיכול להשתנות (כמו משתנים).
Build - בניית ה-UI בהתאם ל-State.
Flutter App בסיסי
יישום Hello World:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: Scaffold(
appBar: AppBar(title: Text('Hello')),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}
Stateless vs Stateful Widgets:
// Stateless Widget - לא משתנה
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Static text');
}
}
// Stateful Widget - יכול להשתנות
class MyCounter extends StatefulWidget {
@override
State createState() => _MyCounterState();
}
class _MyCounterState extends State {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $count'),
ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text('Increment'),
),
],
);
}
}
Flutter Widgets וWidgets רכיבים
💡 Widgets ב-Flutter
Widgets הם אבני הלגו של Flutter. כל דבר שרואים על המסך הוא Widget.
יש Widgets ללטקסט, כפתורים, תמונות, טפסים, רשימות, וועוד.
Widgets בסיסיים
Text Widgets:
class TextExamples extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Simple text'),
Text(
'Styled text',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
Text(
'Centered text',
textAlign: TextAlign.center,
),
],
);
}
}
Buttons:
class ButtonExamples extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () {
print('Pressed!');
},
child: Text('Elevated Button'),
),
TextButton(
onPressed: () {},
child: Text('Text Button'),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.favorite),
),
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
],
);
}
}
Layout Widgets:
class LayoutExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
// Row - אופקי
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Left'),
SizedBox(width: 10),
Text('Right'),
],
),
SizedBox(height: 20),
// Column - אנכי
Column(
children: [
Text('Top'),
Text('Middle'),
Text('Bottom'),
],
),
],
);
}
}
Container ו-Sizing:
class ContainerExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 100,
color: Colors.blue,
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 5,
),
],
),
child: Center(
child: Text('Hello', style: TextStyle(color: Colors.white)),
),
);
}
}
Input Widgets
TextField ו-Form:
class FormExample extends StatefulWidget {
@override
State createState() => _FormExampleState();
}
class _FormExampleState extends State {
TextEditingController nameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
controller: nameController,
decoration: InputDecoration(
labelText: 'Enter name',
hintText: 'John Doe',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
print('Name: ${nameController.text}');
},
child: Text('Submit'),
),
],
);
}
@override
void dispose() {
nameController.dispose();
super.dispose();
}
}
Checkbox ו-Switch:
class CheckboxExample extends StatefulWidget {
@override
State createState() => _CheckboxExampleState();
}
class _CheckboxExampleState extends State {
bool isChecked = false;
bool isEnabled = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
Checkbox(
value: isChecked,
onChanged: (value) {
setState(() {
isChecked = value ?? false;
});
},
),
Switch(
value: isEnabled,
onChanged: (value) {
setState(() {
isEnabled = value;
});
},
),
Radio(
value: 1,
groupValue: 1,
onChanged: (value) {
setState(() {});
},
),
],
);
}
}
List Widgets
ListView:
class ListViewExample extends StatelessWidget {
final List items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
onTap: () {
print('Tapped: ${items[index]}');
},
);
},
);
}
}
GridView:
class GridViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: 12,
itemBuilder: (context, index) {
return Container(
color: Colors.blue,
child: Center(
child: Text('Item $index'),
),
);
},
);
}
}
Flutter מתקדם - Navigation וState Management
💡 Advanced Flutter
Navigation - כיצד לעבור בין מסכים (screens).
State Management - כיצד לנהל מידע שיכול להשתנות בכל האפליקציה.
Provider - ספרייה פופולרית ל-State Management.
Navigation בסיסי
Navigate בין Screens:
// Home Screen
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailScreen()),
);
},
child: Text('Go to Detail'),
),
),
);
}
}
// Detail Screen
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Detail')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back'),
),
),
);
}
}
Pass data בין Screens:
class DetailScreen extends StatelessWidget {
final String data;
DetailScreen({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Detail')),
body: Center(
child: Text('Received: $data'),
),
);
}
}
// בהום סקרין:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(data: 'Hello'),
),
);
Named Routes:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/detail': (context) => DetailScreen(data: 'default'),
},
);
}
}
// בקוד:
Navigator.pushNamed(context, '/detail');
State Management עם Provider
Provider בסיסי:
import 'package:provider/provider.dart';
// Model
class Counter extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
// בmain:
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
// בwidget:
class CounterWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
var counter = Provider.of(context);
return Column(
children: [
Text('Count: ${counter.count}'),
ElevatedButton(
onPressed: counter.increment,
child: Text('Increment'),
),
],
);
}
}
MultiProvider:
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => Counter()),
ChangeNotifierProvider(create: (_) => UserProvider()),
ChangeNotifierProvider(create: (_) => ThemeProvider()),
],
child: MyApp(),
),
);
}
LifeCycle Hooks
initState ו-dispose:
class MyWidget extends StatefulWidget {
@override
State createState() => _MyWidgetState();
}
class _MyWidgetState extends State {
@override
void initState() {
super.initState();
// תבצע כשה-widget נוצר
print('Widget created');
}
@override
void didUpdateWidget(MyWidget oldWidget) {
super.didUpdateWidget(oldWidget);
// תבצע כשה-widget מתעדכן
print('Widget updated');
}
@override
void dispose() {
// תבצע כשה-widget נהרס
print('Widget disposed');
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container();
}
}
חבילות וספריות פופולריות
💡 Pub.dev - מחסן הספריות
pub.dev - מאגר ספריות Dart. תוכלו למצוא אלפי חבילות שימושיות.
pubspec.yaml - קובץ שמגדיר את תלויות הפרויקט.
flutter pub get - טוען את כל התלויות.
התקנת חבילות
הוספת חבילה לפרויקט:
# בשורת הפקודה:
flutter pub add provider
flutter pub add http
flutter pub add firebase_core
# או בpubspec.yaml:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
http: ^0.13.5
firebase_core: ^2.0.0
# ואחר כך:
flutter pub get
חבילות פופולריות:
// http - בקשות לשרת
import 'package:http/http.dart' as http;
Future fetchData() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
if (response.statusCode == 200) {
print(response.body);
}
}
// shared_preferences - שמירת נתונים מקומיים
import 'package:shared_preferences/shared_preferences.dart';
Future saveData() async {
final prefs = await SharedPreferences.getInstance();
await prefs.setString('username', 'Alice');
String? username = prefs.getString('username');
}
// intl - תאריכים וסוגיות בינלאומיות
import 'package:intl/intl.dart';
String formatted = DateFormat('yyyy-MM-dd').format(DateTime.now());
String hebrew = DateFormat('yyyy-MM-dd', 'he_IL').format(DateTime.now());
Firebase ו-Firebase Realtime
Firebase בFlutter:
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
// קריאה נתונים מ-Firebase
void readData() {
final ref = FirebaseDatabase.instance.ref('users/user1');
ref.onValue.listen((event) {
final data = event.snapshot.value;
print(data);
});
}
// כתיבת נתונים
void writeData() {
FirebaseDatabase.instance.ref('users/user1').set({
'name': 'Alice',
'age': 25,
});
}
Animation וCustom Widgets
Simple Animation:
class AnimatedButtonExample extends StatefulWidget {
@override
State createState() => _AnimatedButtonExampleState();
}
class _AnimatedButtonExampleState extends State
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 1),
vsync: this,
);
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: _animation,
child: ElevatedButton(
onPressed: () {
_controller.forward().then((_) {
_controller.reverse();
});
},
child: Text('Animate me!'),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}