Flutter ile Cross-Platform Mobil Uygulama Geliştirme

Flutter Nedir ve Neden Tercih Edilmeli?

Flutter, Google tarafından geliştirilen açık kaynaklı bir UI toolkit'tir. Tek bir kod tabanı kullanarak iOS, Android, web, masaüstü ve gömülü sistemler için yüksek performanslı, görsel açıdan zengin uygulamalar oluşturmanıza olanak tanır. 2018 yılında kararlı sürümü yayımlanan Flutter, günümüzde dünya genelinde milyonlarca geliştirici tarafından aktif olarak kullanılmaktadır.

Flutter'ın en büyük avantajı, Dart programlama dilini kullanması ve kendi render motoruna (Skia/Impeller) sahip olmasıdır. Bu sayede platforma özgü widget'lara bağımlı kalmadan, piksel düzeyinde kontrol sağlayarak tutarlı bir kullanıcı deneyimi sunabilirsiniz.

Flutter'ın Temel Avantajları

• Hot Reload: Kod değişikliklerini saniyeler içinde uygulamada görebilirsiniz. Bu özellik, geliştirme sürecini inanılmaz hızlandırır.
• Tek Kod Tabanı: iOS ve Android için ayrı ayrı kod yazmak yerine, tek bir Dart kod tabanıyla her iki platform için uygulama geliştirebilirsiniz.
• Zengin Widget Kütüphanesi: Material Design ve Cupertino widget'ları hazır olarak sunulur.
• Yüksek Performans: Flutter, native ARM koduna derlenir ve 60fps (hatta 120fps) akıcılık sunar.
• Güçlü Topluluk: Pub.dev üzerinde binlerce paket ve aktif bir geliştirici topluluğu mevcuttur.

Flutter Geliştirme Ortamının Kurulumu

Flutter ile geliştirmeye başlamak için öncelikle Flutter SDK'yı indirip kurmanız gerekmektedir. Terminal üzerinden aşağıdaki adımları izleyebilirsiniz:

# Flutter SDK'yı indirin
git clone https://github.com/flutter/flutter.git -b stable

# PATH değişkenine ekleyin
export PATH="$PATH:`pwd`/flutter/bin"

# Kurulumu doğrulayın
flutter doctor

flutter doctor komutu, eksik bağımlılıkları tespit ederek size hangi araçları kurmanız gerektiğini gösterecektir. Android Studio veya VS Code gibi bir IDE ile birlikte Flutter ve Dart eklentilerini yüklemeniz önerilir.

İlk Flutter Projesini Oluşturma

Yeni bir Flutter projesi oluşturmak için terminal üzerinde şu komutu çalıştırmanız yeterlidir:

flutter create my_first_app
cd my_first_app
flutter run

Bu komutlar, temel bir Flutter uygulaması oluşturur ve bağlı olan cihaz veya emülatörde çalıştırır. Oluşturulan proje yapısı şu şekildedir:

my_first_app/
├── lib/
│   └── main.dart          # Ana uygulama dosyası
├── test/                   # Test dosyaları
├── android/                # Android platforma özgü kodlar
├── ios/                    # iOS platforma özgü kodlar
├── pubspec.yaml            # Bağımlılık ve proje yapılandırması
└── README.md

Flutter'da Widget Yapısı

Flutter'da her şey bir widget'tır. Widget'lar, uygulamanızın kullanıcı arayüzünü oluşturan temel yapı taşlarıdır. İki temel widget türü bulunur:

StatelessWidget

Durumu değişmeyen, sabit içerik sunan widget'lar için kullanılır:

class WelcomeCard extends StatelessWidget {
  final String userName;

  const WelcomeCard({super.key, required this.userName});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          'Hoş geldin, $userName!',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}

StatefulWidget

Kullanıcı etkileşimine veya veri değişikliklerine bağlı olarak yeniden çizilmesi gereken widget'lar için kullanılır:

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Sayaç: $_counter', style: const TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Artır'),
        ),
      ],
    );
  }
}

State Management (Durum Yönetimi)

Uygulamanız büyüdükçe, durum yönetimi kritik bir konu haline gelir. Flutter ekosisteminde birçok popüler state management çözümü bulunmaktadır:

1. Provider: Flutter ekibi tarafından önerilen, basit ve etkili bir çözüm.
2. Riverpod: Provider'ın evrimleşmiş hali; derleme zamanı güvenliği ve daha iyi test edilebilirlik sunar.
3. BLoC (Business Logic Component): Reactive programlama prensiplerine dayalı, büyük projeler için uygun bir mimari pattern.
4. GetX: Hafif ve hızlı bir çözüm, ancak büyük projelerde dikkatli kullanılmalıdır.

Aşağıda Provider kullanarak basit bir state management örneği verilmiştir:

// pubspec.yaml'a ekleyin: provider: ^6.1.0

class CartModel extends ChangeNotifier {
  final List<Product> _items = [];

  List<Product> get items => List.unmodifiable(_items);
  int get totalCount => _items.length;
  double get totalPrice => _items.fold(0, (sum, item) => sum + item.price);

  void add(Product product) {
    _items.add(product);
    notifyListeners();
  }

  void remove(Product product) {
    _items.remove(product);
    notifyListeners();
  }
}

// Kullanım
ChangeNotifierProvider(
  create: (context) => CartModel(),
  child: const MyApp(),
);

// Widget içinde erişim
final cart = context.watch<CartModel>();
Text('Sepette ${cart.totalCount} ürün var');

HTTP İstekleri ve API Entegrasyonu

Gerçek dünya uygulamalarında uzak sunucularla iletişim kurmak kaçınılmazdır. Flutter'da http veya dio paketlerini kullanarak REST API'lerle kolayca iletişim kurabilirsiniz:

import 'dart:convert';
import 'package:http/http.dart' as http;

class ApiService {
  static const String baseUrl = 'https://api.example.com';

  Future<List<User>> getUsers() async {
    final response = await http.get(Uri.parse('$baseUrl/users'));

    if (response.statusCode == 200) {
      final List<dynamic> data = json.decode(response.body);
      return data.map((json) => User.fromJson(json)).toList();
    } else {
      throw Exception('Kullanıcılar yüklenemedi: ${response.statusCode}');
    }
  }
}

Navigasyon ve Routing

Flutter'da sayfalar arası geçiş için Navigator 2.0 veya go_router gibi paketler kullanılabilir. Basit bir navigasyon örneği:

// Yeni sayfaya geçiş
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailPage()),
);

// go_router ile deklaratif routing
final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => const HomePage()),
    GoRoute(path: '/detail/:id', builder: (context, state) {
      final id = state.pathParameters['id']!;
      return DetailPage(id: id);
    }),
  ],
);

Platform Kanalları ile Native Kod Erişimi

Flutter, Platform Channels mekanizması aracılığıyla platforma özgü native API'lere erişmenize olanak tanır. Örneğin, cihazın pil seviyesini almak için Dart tarafında bir MethodChannel oluşturup, Android (Kotlin/Java) veya iOS (Swift/Objective-C) tarafında bu kanalı dinleyebilirsiniz. Bu sayede Flutter'ın doğrudan desteklemediği native özelliklere de erişim sağlanır.

Test Yazma

Flutter, üç seviyede test desteği sunar:

• Unit Test: Tek bir fonksiyon veya sınıfın davranışını doğrular.
• Widget Test: Bir widget'ın doğru şekilde render edilip edilmediğini ve etkileşimlere yanıt verip vermediğini kontrol eder.
• Integration Test: Uygulamanın bütünsel olarak doğru çalıştığını test eder.

// Widget test örneği
testWidgets('Sayaç artırma testi', (WidgetTester tester) async {
  await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

  expect(find.text('Sayaç: 0'), findsOneWidget);

  await tester.tap(find.byType(ElevatedButton));
  await tester.pump();

  expect(find.text('Sayaç: 1'), findsOneWidget);
});

Performans İpuçları

• const constructor'ları mümkün olan her yerde kullanın; bu, widget'ların gereksiz yere yeniden oluşturulmasını engeller.
• Uzun listelerde ListView.builder kullanarak yalnızca görünür öğeleri render edin.
• RepaintBoundary ile gereksiz yeniden çizimleri izole edin.
• Ağır hesaplamalar için compute() fonksiyonunu kullanarak işlemi ayrı bir isolate'te çalıştırın.
• Flutter DevTools ile performans profillemesi yaparak darboğazları tespit edin.

Sonuç

Flutter, cross-platform mobil uygulama geliştirme dünyasında güçlü bir seçenek olarak öne çıkmaktadır. Tek kod tabanıyla birden fazla platformu hedefleyebilmesi, Hot Reload ile hızlı geliştirme döngüsü, zengin widget ekosistemi ve yüksek performansı sayesinde hem startup'lar hem de büyük ölçekli kurumsal projeler için ideal bir tercihtir. Dart dilinin öğrenme eğrisi nispeten düşüktür ve Google'ın sürekli yatırım yaptığı bu ekosistem, gelecek yıllarda da büyümeye devam edecek gibi görünmektedir.