Flutter ile MVVM Mimarisinin Uygulanması

Flutter, uygulama geliştirme için popüler bir framework’tür ve MVVM (Model-View-ViewModel) mimarisi, Flutter projelerinde veri yönetimini kolaylaştırır. MVVM, uygulamayı Model (veri), View (kullanıcı arayüzü) ve ViewModel (iş mantığı) olarak üç bileşene ayırır. Bu yapı, kodun okunabilirliğini, sürdürülebilirliğini ve test edilebilirliğini artırır. Flutter’da MVVM kullanmak için “provider” paketi yaygın olarak tercih edilir. ViewModel, verileri yönetir ve güncellemeleri bildirirken, View, güncellenmiş verileri kullanıcı arayüzünde yansıtır. Örneğin, bir görev yöneticisi uygulamasında, ViewModel yeni görevler ekleyebilir ve tamamlanmış görevleri işaretleyebilir, View ise görev listesini görüntüler ve kullanıcının etkileşimlerini algılar. Flutter’da MVVM mimarisi kullanarak, uygulama geliştirme süreci daha düzenli ve yönetilebilir hale gelir, ayrıca kodun bakımı ve test edilebilirliği kolaylaşır.

Bir görev yöneticisi uygulaması örneği üzerinden MVVM yapısını inceleyelim. ViewModel, görevleri ekler ve tamamlanıp tamamlanmadıklarını günceller. View, görev listesini görüntüler ve kullanıcının görevleri tamamlamasına izin verir.

Flutter’da MVVM mimarisi, uygulama geliştirme sürecini düzenleyerek veri yönetimini kolaylaştırır.

MVVM mimarisi, Flutter geliştiricilerine verileri, kullanıcı arayüzünü ve iş mantığını ayrı bileşenlerde yönetme esnekliği sağlar. Bu sayede kodun daha okunabilir, sürdürülebilir ve test edilebilir olmasını sağlar.

Flutter’da MVVM kullanmak için popüler bir paket olan “provider” kullanılabilir. Bu paket, uygulama genelinde veri yönetimi ve güncellemelerini sağlar.

Örneğimize göz atacak olursak, bir görev yöneticisi uygulaması düşünelim. ViewModel, görevleri ekler ve güncellerken, View kullanıcının görevleri görmesine ve tamamlamasına olanak tanır. ViewModel, veri değişikliklerini bildirir ve View, güncel verileri yansıtır.

Flutter ile MVVM mimarisi kullanarak uygulama geliştirme süreci daha düzenli hale gelir. Ayrıca, kodun bakımı ve test edilebilirliği artar.

Sonuç olarak, Flutter’da MVVM mimarisi kullanmak, veri yönetimini geliştirir ve kodun daha düzenli, sürdürülebilir ve test edilebilir olmasını sağlar.

Şimdi Birkaç Kod Örneği İle Devam Edelim

Öncelikle, provider paketini kullanarak veri yönetimini sağlamak için MVVM mimarisindeki ViewModel'ı oluşturalım. Ayrıca, görevlerin veri modelini de tanımlayalım:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Görev veri modeli
class Task {
  final String title;
  bool isCompleted;

  Task({required this.title, this.isCompleted = false});
}

// ViewModel
class TaskViewModel extends ChangeNotifier {
  List<Task> _tasks = [
    Task(title: 'Görev 1'),
    Task(title: 'Görev 2'),
    Task(title: 'Görev 3'),
  ];

  List<Task> get tasks => _tasks;

  // Yeni bir görev ekleme
  void addTask(String title) {
    _tasks.add(Task(title: title));
    notifyListeners();
  }

  // Görevi tamamlama
  void toggleTaskCompletion(int index) {
    _tasks[index].isCompleted = !_tasks[index].isCompleted;
    notifyListeners();
  }
}

Tabii, Flutter’da MVVM (Model-View-ViewModel) mimarisini anlatan bir örnek verebilirim. MVVM, kullanıcı arayüzünü (View), veri ve iş mantığını (ViewModel) ve veri modelini (Model) birbirinden bağımsız olarak ayırarak uygulamanın düzenini sağlar. İşte Flutter’da MVVM yapısını kullanarak basit bir görev yöneticisi uygulaması örneği:

Öncelikle, provider paketini kullanarak veri yönetimini sağlamak için MVVM mimarisindeki ViewModel'ı oluşturalım. Ayrıca, görevlerin veri modelini de tanımlayalım:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Görev veri modeli
class Task {
  final String title;
  bool isCompleted;
  Task({required this.title, this.isCompleted = false});
}
// ViewModel
class TaskViewModel extends ChangeNotifier {
  List<Task> _tasks = [
    Task(title: 'Görev 1'),
    Task(title: 'Görev 2'),
    Task(title: 'Görev 3'),
  ];
  List<Task> get tasks => _tasks;
  // Yeni bir görev ekleme
  void addTask(String title) {
    _tasks.add(Task(title: title));
    notifyListeners();
  }
  // Görevi tamamlama
  void toggleTaskCompletion(int index) {
    _tasks[index].isCompleted = !_tasks[index].isCompleted;
    notifyListeners();
  }
}

Sonraki adımda, provider paketini kullanarak ViewModel'ı uygulamanın genelinde erişilebilir hale getirelim:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => TaskViewModel(),
      child: MaterialApp(
        title: 'MVVM Görev Yöneticisi',
        home: TaskScreen(),
      ),
    );
  }
}

Şimdi, görevleri listeleyen ve yeni görev eklemek için bir form sağlayan TaskScreen widget'ını oluşturalım:

class TaskScreen extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Görev Yöneticisi'),
      ),
      body: Column(
        children: [
          Expanded(
            child: TaskList(),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: 'Görev adını girin',
                    ),
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    final taskViewModel =
                        Provider.of<TaskViewModel>(context, listen: false);
                    taskViewModel.addTask(_controller.text);
                    _controller.clear();
                  },
                  child: Text('Ekle'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Son olarak, görev listesini oluşturan ve görev tamamlamayı sağlayan TaskList widget'ını oluşturalım:

class TaskList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final taskViewModel = Provider.of<TaskViewModel>(context);
    final tasks = taskViewModel.tasks;

    return ListView.builder(
      itemCount: tasks.length,
      itemBuilder: (context, index) {
        final task = tasks[index];
        return ListTile(
          title: Text(task.title),
          trailing: Checkbox(
            value: task.isCompleted,
            onChanged: (_) {
              taskViewModel.toggleTaskCompletion(index);
            },
          ),
        );
      },
    );
  }
}

Bu örnek, Flutter’da MVVM mimarisini kullanarak basit bir görev yöneticisi uygulamasını oluşturmanızı sağlar. ViewModel, görevleri yönetir ve değişiklikleri bildirirken, View (TaskScreen ve TaskList), verileri dinler ve güncellemeleri yansıtır. provider paketi, ViewModel'ı uygulama genelinde erişilebilir hale getirmek ve veri güncellemelerini dinlemek için kullanılır.

Bu örnek, Flutter ve MVVM hakkında temel bir anlayış sağlamak için tasarlanmıştır. Daha karmaşık uygulamalar için ek bileşenler ve yapılar eklenebilir.