מדריך Flutter למתחילים 2026 | מהתקנה ועד אפליקציה ראשונה
מה זה Flutter ולמה כדאי ללמוד אותו?
**Flutter** הוא Framework של Google לפיתוח אפליקציות Cross-Platform. עם Flutter, אפשר לכתוב קוד פעם אחת ולהריץ אותו על iOS, Android, Web, ו-Desktop.
למה Flutter?
- **קוד אחד לכל הפלטפורמות** - חיסכון של 40-50% בזמן פיתוח
- **ביצועים מצוינים** - קרוב ל-Native
- **Hot Reload** - שינויים מיידיים בזמן פיתוח
- **קהילה ענקית** - תמיכה ותיעוד מעולים
- **גוגל** - גיבוי של חברה גדולה ויציבה
מי משתמש ב-Flutter?
- Google Pay - BMW - Alibaba - eBay - Philips - ועוד מאות אלפי אפליקציות---
שלב 1: התקנת Flutter
דרישות מקדימות
**מחשב:**
- Windows 10 ומעלה / macOS 10.14 ומעלה / Linux
- מינימום 8GB RAM (מומלץ 16GB)
- 10GB שטח דיסק פנוי
**תוכנות:**
- Git
- Android Studio או VS Code
- Xcode (למשתמשי Mac שרוצים לפתח ל-iOS)
התקנה על Windows
```bash
1. הורידו את Flutter SDK מהאתר הרשמי
https://docs.flutter.dev/get-started/install/windows
2. חלצו את הקובץ לתיקייה (למשל C:\flutter)
3. הוסיפו את Flutter ל-PATH
פתחו את הגדרות המערכת > משתני סביבה
הוסיפו: C:\flutter\bin
4. בדקו את ההתקנה
flutter doctor ```התקנה על macOS
```bash
1. התקינו עם Homebrew (הכי קל)
brew install flutter
או הורידו ידנית מ:
https://docs.flutter.dev/get-started/install/macos
2. בדקו את ההתקנה
flutter doctor ```פתרון בעיות נפוצות
אחרי הרצת `flutter doctor`, תראו רשימת בדיקות. הנה פתרונות לבעיות נפוצות:
**Android Studio לא מותקן:**
```bash
התקינו Android Studio מ:
https://developer.android.com/studio
אחרי ההתקנה, קבלו את הרישיונות:
flutter doctor --android-licenses ```**Xcode לא מותקן (Mac):**
```bash
התקינו מ-App Store ואז:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```
---
שלב 2: יצירת פרויקט ראשון
יצירת פרויקט חדש
```bash
צרו פרויקט חדש
flutter create my_first_app
נכנסים לתיקייה
cd my_first_appמריצים את האפליקציה
flutter run ```מבנה הפרויקט
```
my_first_app/
├── android/ # קוד Native ל-Android
├── ios/ # קוד Native ל-iOS
├── lib/ # קוד Dart שלכם (כאן עובדים!)
│ └── main.dart # נקודת הכניסה
├── test/ # בדיקות
├── pubspec.yaml # הגדרות ו-dependencies
└── README.md
```
קובץ pubspec.yaml
זה קובץ ההגדרות של הפרויקט:
```yaml
name: my_first_app
description: האפליקציה הראשונה שלי
version: 1.0.0+1
environment:
sdk: ">=3.0.0 <4.0.0"
dependencies:
flutter:
sdk: flutter
# הוסיפו packages כאן:
http: ^1.1.0
provider: ^6.1.1
dev_dependencies:
flutter_test:
sdk: flutter
```
---
שלב 3: Widgets - אבני הבניין של Flutter
ב-Flutter, **הכל הוא Widget**. כפתור? Widget. טקסט? Widget. כל המסך? Widget.
סוגי Widgets
StatelessWidget - Widget סטטי
משמש לתצוגה שלא משתנה:
```dart
class WelcomeText extends StatelessWidget {
final String name;
const WelcomeText({super.key, required this.name});
@override
Widget build(BuildContext context) {
return Text(
'שלום $name!',
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
);
}
}
```
StatefulWidget - Widget דינמי
משמש כשהתצוגה משתנה (למשל, מונה לחיצות):
```dart
class Counter extends StatefulWidget {
const Counter({super.key});
@override
State<Counter> createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('לחצת $_count פעמים'),
ElevatedButton(
onPressed: _increment,
child: const Text('לחץ כאן'),
),
],
);
}
}
```
Widgets חשובים שצריך להכיר
Container - קופסה עם עיצוב
```dart
Container(
width: 200,
height: 100,
padding: const EdgeInsets.all(16),
margin: const EdgeInsets.symmetric(vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: const Text('תוכן'),
)
```
Row & Column - סידור אלמנטים
```dart
// Row - סידור אופקי
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.home),
Icon(Icons.search),
Icon(Icons.person),
],
)
// Column - סידור אנכי
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('כותרת'),
Text('תיאור'),
ElevatedButton(onPressed: () {}, child: Text('לחץ')),
],
)
```
ListView - רשימה עם גלילה
```dart
ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
leading: const Icon(Icons.star),
title: Text('פריט מספר $index'),
subtitle: Text('תיאור קצר'),
onTap: () {
print('נלחץ פריט $index');
},
);
},
)
```
---
שלב 4: ניווט בין מסכים
ניווט בסיסי
```dart
// מעבר למסך חדש
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondScreen(),
),
);
// חזרה למסך קודם
Navigator.pop(context);
```
ניווט עם Named Routes
```dart
// ב-main.dart
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const HomeScreen(),
'/details': (context) => const DetailsScreen(),
'/settings': (context) => const SettingsScreen(),
},
);
// שימוש:
Navigator.pushNamed(context, '/details');
```
---
שלב 5: בניית אפליקציית Todo - פרויקט מעשי
בואו נבנה אפליקציית רשימת משימות פשוטה!
main.dart
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const TodoApp());
}
class TodoApp extends StatelessWidget {
const TodoApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'אפליקציית Todo',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
home: const TodoListScreen(),
debugShowCheckedModeBanner: false,
);
}
}
class Todo {
final String id;
String title;
bool isCompleted;
Todo({
required this.id,
required this.title,
this.isCompleted = false,
});
}
class TodoListScreen extends StatefulWidget {
const TodoListScreen({super.key});
@override
State<TodoListScreen> createState() => _TodoListScreenState();
}
class _TodoListScreenState extends State<TodoListScreen> {
final List<Todo> _todos = [];
final TextEditingController _textController = TextEditingController();
void _addTodo() {
if (_textController.text.trim().isEmpty) return;
setState(() {
_todos.add(Todo(
id: DateTime.now().toString(),
title: _textController.text,
));
});
_textController.clear();
}
void _toggleTodo(String id) {
setState(() {
final todo = _todos.firstWhere((t) => t.id == id);
todo.isCompleted = !todo.isCompleted;
});
}
void _deleteTodo(String id) {
setState(() {
_todos.removeWhere((t) => t.id == id);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('המשימות שלי'),
centerTitle: true,
),
body: Column(
children: [
// שדה הוספת משימה
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
controller: _textController,
decoration: const InputDecoration(
hintText: 'הוסף משימה חדשה...',
border: OutlineInputBorder(),
),
onSubmitted: (_) => _addTodo(),
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: _addTodo,
child: const Icon(Icons.add),
),
],
),
),
// רשימת המשימות
Expanded(
child: _todos.isEmpty
? const Center(
child: Text('אין משימות עדיין'),
)
: ListView.builder(
itemCount: _todos.length,
itemBuilder: (context, index) {
final todo = _todos[index];
return Dismissible(
key: Key(todo.id),
onDismissed: (_) => _deleteTodo(todo.id),
background: Container(
color: Colors.red,
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 16),
child: const Icon(
Icons.delete,
color: Colors.white,
),
),
child: ListTile(
leading: Checkbox(
value: todo.isCompleted,
onChanged: (_) => _toggleTodo(todo.id),
),
title: Text(
todo.title,
style: TextStyle(
decoration: todo.isCompleted
? TextDecoration.lineThrough
: null,
),
),
),
);
},
),
),
],
),
);
}
@override
void dispose() {
_textController.dispose();
super.dispose();
}
}
```
---
שלב 6: State Management עם Provider
כשהאפליקציה גדלה, צריך ניהול State מסודר. Provider הוא הפתרון הרשמי.
התקנה
```yaml
בקובץ pubspec.yaml
dependencies:
provider: ^6.1.1
```
```bash
flutter pub get
```
דוגמה: Todo עם Provider
```dart
// todo_provider.dart
import 'package:flutter/foundation.dart';
class Todo {
final String id;
String title;
bool isCompleted;
Todo({required this.id, required this.title, this.isCompleted = false});
}
class TodoProvider extends ChangeNotifier {
final List<Todo> _todos = [];
List<Todo> get todos => List.unmodifiable(_todos);
int get completedCount => _todos.where((t) => t.isCompleted).length;
void addTodo(String title) {
_todos.add(Todo(
id: DateTime.now().toString(),
title: title,
));
notifyListeners();
}
void toggleTodo(String id) {
final todo = _todos.firstWhere((t) => t.id == id);
todo.isCompleted = !todo.isCompleted;
notifyListeners();
}
void deleteTodo(String id) {
_todos.removeWhere((t) => t.id == id);
notifyListeners();
}
}
```
```dart
// main.dart
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (_) => TodoProvider(),
child: const TodoApp(),
),
);
}
// שימוש ב-Widget:
class TodoList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final todoProvider = context.watch<TodoProvider>();
return ListView.builder(
itemCount: todoProvider.todos.length,
itemBuilder: (context, index) {
final todo = todoProvider.todos[index];
return ListTile(
title: Text(todo.title),
onTap: () => todoProvider.toggleTodo(todo.id),
);
},
);
}
}
```
---
צעדים הבאים
משאבים ללימוד מתקדם
1. **תיעוד רשמי**: [flutter.dev](https://flutter.dev/docs)
2. **קורסים**: Udemy, YouTube (Academind, Flutter Mapp)
3. **Packages**: [pub.dev](https://pub.dev)
4. **קהילה**: Discord, Reddit, Stack Overflow
נושאים מתקדמים ללמוד
- Firebase Integration
- REST API & HTTP
- Local Storage (Hive, SharedPreferences)
- Animations
- Testing
- CI/CD & Publishing
---
רוצים לפתח אפליקציה ב-Flutter?
אם אתם מחפשים **חברת פיתוח אפליקציות** מקצועית שמתמחה ב-Flutter, אנחנו ב-Lynxbe כאן בשבילכם.
עם ניסיון של **12+ שנים** ו-**100+ אפליקציות**, אנחנו יכולים להפוך את הרעיון שלכם למציאות.
[קבעו פגישת ייעוץ חינם →](/#booking-section)
---
*מדריך זה נכתב על ידי צוות הפיתוח של Lynxbe. לשאלות ועזרה נוספת, צרו קשר.*
What is Flutter and Why Learn It?
**Flutter** is Google's Framework for Cross-Platform app development. With Flutter, you can write code once and run it on iOS, Android, Web, and Desktop.
[Read the complete tutorial in Hebrew...]
Want to Develop a Flutter App?
If you're looking for a professional **app development company** specializing in Flutter, we at Lynxbe are here for you.
[Book a Free Consultation →](/#booking-section)
תגובות
💬 שתפו אותנו במחשבות שלכם