Selamlar Sevgili Siberatay Mensupları,
Siber güvenliğin o karanlık, yıkıcı ve iz süren dünyasından biraz sıyrılıp, dijital dünyanın inşa edildiği tarafa, yani "Geliştirme" (Development) cephesine geçiş yapıyoruz. Mobil cihazlar artık insanlığın dijital uzuvları haline geldi. Bir sistemin güvenliğini sağlamak (veya onu parçalamak) için o sistemin nasıl inşa edildiğini genetik seviyesinde bilmeniz gerekir.
Siberatay Mobil Uygulama Geliştirme bölümünü şaha kaldıracak bu devasa seride, günümüzün en güçlü, en agresif ve en modern mobil mimarilerinden birini, Flutter'ı ve Dart dilini masaya yatırıyoruz. Sıfırdan başlayıp, uygulamayı mağazaya fırlatacağımız o güne kadar ilmek ilmek kod yazacağız.
Kahveler hazırsa, IDE'leri ateşleyin. Başlıyoruz!
1. BÖLÜM: Native vs. Cross-Platform Savaşı ve Flutter'ın Evrimi
Bir zamanlar mobil dünya keskin bir kılıçla ikiye bölünmüştü: Ya Java/Kotlin öğrenip sadece Android'e (Native) kod yazardınız ya da Objective-C/Swift öğrenip sadece iOS'a (Native) uygulama geliştirirdiniz. İki ayrı kod tabanı, iki ayrı takım, iki ayrı test süreci... Tam bir maliyet ve zaman cehennemiydi.
Sonra "Cross-Platform" (Çapraz Platform) kavramı doğdu: Tek bir kod yazalım, hem iOS hem Android'de çalışsın.Başlarda Apache Cordova, Ionic gibi teknolojiler web sitenizi alıp mobil uygulamanın içine bir Tarayıcı (WebView) olarak gömüyordu. Performans çöp gibiydi, animasyonlar kasıyordu. Ardından React Native geldi; JavaScript yazıyordunuz, arka planda bir "köprü" (bridge) vasıtasıyla bu kodlar cihazın yerel (native) butonlarına dönüşüyordu. Hızlıydı ama köprü mimarisi yüzünden ağır işlemlerde tıkanıyordu.
Peki Flutter Neden Farklı? (Mimari Üstünlük)Google tarafından geliştirilen Flutter, bu "köprü"
mantığını tamamen çöpe attı. Flutter cihazın yerel arayüz elemanlarını (OEM Widgets) KULLANMAZ. Kendi render motorunu (eskiden Skia, şimdi Impeller) kullanır. Ekrana kendi piksellerini çizer. Tıpkı devasa bir oyun motoru (Unity veya Unreal Engine) gibi çalışır. Bu sayede iOS'ta da, Android'de de milisaniyesine kadar aynı sarsılmaz performansı (60/120 FPS) verir.
Sonra "Cross-Platform" (Çapraz Platform) kavramı doğdu: Tek bir kod yazalım, hem iOS hem Android'de çalışsın.Başlarda Apache Cordova, Ionic gibi teknolojiler web sitenizi alıp mobil uygulamanın içine bir Tarayıcı (WebView) olarak gömüyordu. Performans çöp gibiydi, animasyonlar kasıyordu. Ardından React Native geldi; JavaScript yazıyordunuz, arka planda bir "köprü" (bridge) vasıtasıyla bu kodlar cihazın yerel (native) butonlarına dönüşüyordu. Hızlıydı ama köprü mimarisi yüzünden ağır işlemlerde tıkanıyordu.
Peki Flutter Neden Farklı? (Mimari Üstünlük)Google tarafından geliştirilen Flutter, bu "köprü"
mantığını tamamen çöpe attı. Flutter cihazın yerel arayüz elemanlarını (OEM Widgets) KULLANMAZ. Kendi render motorunu (eskiden Skia, şimdi Impeller) kullanır. Ekrana kendi piksellerini çizer. Tıpkı devasa bir oyun motoru (Unity veya Unreal Engine) gibi çalışır. Bu sayede iOS'ta da, Android'de de milisaniyesine kadar aynı sarsılmaz performansı (60/120 FPS) verir.
2. BÖLÜM: Motorun Kalbi – Dart Dili ve Derleme Mimarisi
Flutter bir framework'tür, bu framework'ü kullanırken yazdığımız programlama dili ise Dart'tır. Dart, C tarzı bir sözdizimine (syntax) sahip, nesne yönelimli (OOP) ve inanılmaz güçlü bir dildir. Onu özel kılan şey derleme (Compilation) stratejisidir:
- JIT (Just-In-Time) Derleme: Geliştirme aşamasında (kod yazarken) kullanılır. Kodu kaydettiğiniz an (CTRL+S), milisaniyeler içinde uygulamanın arayüzü güncellenir. Buna Hot Reload denir. Yazılımcının üretkenliğini arşa çıkarır.
- AOT (Ahead-Of-Time) Derleme: Uygulamayı bitirip mağazaya (App Store / Play Store) göndereceğiniz zaman kullanılır. Yazdığınız kod, cihazın işlemcisinin (ARM, x64) doğrudan okuyabileceği saf makine diline (Machine Code) derlenir. Tersine mühendislik yapılması (Decompile edilmesi) oldukça zordur ve performansı Native uygulamalarla birebir aynıdır.
3. BÖLÜM: Karargâhı Kurmak (SDK ve Ortam Kurulumu)
Uygulama geliştirmeye başlamadan önce çalışma ortamımızı (Environment) sarsılmaz bir temele oturtmalıyız. Kurulum aşaması biraz can sıkıcıdır ancak bir kere yapılır.
1. Flutter SDK'nın İndirilmesi İşletim sisteminize göre Flutter SDK'yı komut satırından çekin (Örn:
2. Çevre Değişkenleri (Path) Ayarı (Kritik Adım)Terminalinizin "flutter" komutunu tanıyabilmesi için Windows'a bu komutun yerini öğretmeniz gerekir.
1. Flutter SDK'nın İndirilmesi İşletim sisteminize göre Flutter SDK'yı komut satırından çekin (Örn:
C:\ dizinine kurmanız tavsiye edilir):
Bash:
git clone https://github.com/flutter/flutter.git -b stable
2. Çevre Değişkenleri (Path) Ayarı (Kritik Adım)Terminalinizin "flutter" komutunu tanıyabilmesi için Windows'a bu komutun yerini öğretmeniz gerekir.
- Windows Arama çubuğuna "Ortam değişkenleri" yazın.
- "Ortam Değişkenleri" butonuna tıklayıp, üstteki listeden Path satırını bulup "Düzenle" deyin.
- "Yeni" diyerek indirdiğiniz flutter klasörünün içindeki bin dizininin tam yolunu (Örn: C:\flutter\bin) buraya yapıştırıp kaydedin. Not: Bu işlemden sonra açık olan terminallerinizi kapatıp yeniden açmanız gerekir.
Örnek görsel:
3. Android SDK ve Geliştirme Ortamı Kurulumu Flutter'ın kodlarınızı bir Android (APK) dosyasına dönüştürebilmesi için arka planda Android SDK'ya ihtiyacı vardır.
3. Android SDK ve Geliştirme Ortamı Kurulumu Flutter'ın kodlarınızı bir Android (APK) dosyasına dönüştürebilmesi için arka planda Android SDK'ya ihtiyacı vardır.
- Bunun en temiz yolu'yu indirip kurmaktır. Programı ilk açtığınızda gerekli tüm Android SDK bileşenlerini kendiliğinden indirecektir. Site link:İçeriklerden Faydalanmak için Üye olmanız Gerekmektedir. Giriş yap veya üye ol.İçeriklerden Faydalanmak için Üye olmanız Gerekmektedir. Giriş yap veya üye ol.
- Kod yazmak için Android Studio ağır geliyorsa, kodlama tarafını VS Code üzerinden yapabilirsiniz. VS Code'a "Flutter" ve "Dart" eklentilerini kurmanız yeterlidir.
4. Sistemin Check-Up'ı (Flutter Doctor)Terminali (yeni bir pencerede) açıp şu komutu yazdığınızda, sisteminizde eksik olan Android SDK, iOS toolchain veya lisans sözleşmelerini tarayıp size bir reçete sunar:
Eğer "Android toolchain" kısmında lisans hatası verirse, terminalin size önerdiği flutter doctor --android-licenses komutunu çalıştırıp hepsine "y" (yes) diyerek onaylayın. Tüm satırların başında yeşil bir tik (✓) görene kadar sistemi hazır hale getirin.
Bash:
flutter doctor -v
Eğer "Android toolchain" kısmında lisans hatası verirse, terminalin size önerdiği flutter doctor --android-licenses komutunu çalıştırıp hepsine "y" (yes) diyerek onaylayın. Tüm satırların başında yeşil bir tik (✓) görene kadar sistemi hazır hale getirin.
4. BÖLÜM: "Her Şey Bir Widget'tır" Felsefesi
Flutter'ın temel kuralı şudur: Ekranda gördüğünüz her şey bir Widget'tır.Bir buton, bir metin, resmi ortalayan bir konteyner ve hatta uygulamanın kendisi bile bir Widget'tır. Widget'lar iç içe geçerek (Nesting) devasa bir Widget Ağacı (Widget Tree) oluşturur.
İki temel Widget türü vardır:
İki temel Widget türü vardır:
- StatelessWidget (Durumsuz Widget): Ekrana çizildikten sonra verisi asla değişmeyen, sabit yapılar. (Örn: Sadece yazı gösteren bir etiket).
- StatefulWidget (Durumlu Widget): İçindeki veri değiştiğinde kendini yeniden çizen yapılar. (Örn: Tıklandıkça sayısı artan bir sayaç, internetten veri çeken bir liste).
5. BÖLÜM: İlk Kan – Siberatay Mobil Arayüzünü Ayağa Kaldırmak
Teori yeter, şimdi kod bloklarını ateşleyelim. Terminalde yeni bir proje oluşturuyoruz:
Proje içindeki
Bu kodu çalıştırdığınızda (VS Code üzerinde F5 veya terminalde flutter run), karşınızda simsiyah bir arka plan, ortada devasa kan kırmızı bir güvenlik kalkanı ve basıldığında terminale log atan jilet gibi bir buton göreceksiniz.
Koddan görüntüler:
Çalıştığı Halinden Görüntü:
İlk partımızın sonuna geldik.Ortamı kurduk, mimariyi anladık ve temel Widget ağacını inşa edip siyah-kırmızı Siberatay ruhunu ekrana yansıttık. Bir sonraki partta uygulamamıza can suyu verecek olan State Management (Durum Yönetimi) kavramına girecek ve ekranlar arası veri aktarımı (Routing) mimarisini parçalayacağız.
Bash:
flutter create siberatay_app
cd siberatay_app
Proje içindeki
lib/main.dart dosyasını açın. İçindeki tüm o kalabalık sayaç kodunu silin ve yerine sıfırdan yazdığımız, tamamen siyah-kırmızı temalı bu sağlam iskeleti yapıştırın:
Kod:
import 'package:flutter/material.dart';
// 1. Uygulamanın Başlangıç Noktası (Entry Point)
void main() {
runApp(const SiberatayApp());
}
// 2. Ana Uygulama Widget'ı (Stateless)
class SiberatayApp extends StatelessWidget {
const SiberatayApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // Sağ üstteki iğrenç debug şeridini kaldırır
title: 'Siberatay Mobil',
theme: ThemeData(
// Karanlık ve kan kırmızı tema yapılandırması
brightness: Brightness.dark,
scaffoldBackgroundColor: const Color(0xFF121212), // Koyu Antrasit Arka Plan
primaryColor: const Color(0xFFD32F2F), // Siberatay Kırmızısı
appBarTheme: const AppBarTheme(
backgroundColor: Color(0xFF000000), // Saf Siyah
centerTitle: true,
elevation: 0,
),
),
home: const DashboardScreen(), // Açılış Ekranımız
);
}
}
// 3. Ana Ekran Widget'ı (Kullanıcı Arayüzü)
class DashboardScreen extends StatelessWidget {
const DashboardScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'SİBERATAY',
style: TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: 3.0, // Harf aralığı açarak havalı bir görünüm
color: Color(0xFFD32F2F),
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.security, // Güvenlik ikonu
size: 100,
color: Color(0xFFD32F2F),
),
const SizedBox(height: 30), // İki obje arası boşluk
const Text(
'GELİŞTİRME ORTAMINA HOŞ GELDİNİZ',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.white70,
),
),
const SizedBox(height: 50),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFD32F2F),
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), // Yuvarlatılmış köşeler
),
),
onPressed: () {
// Şimdilik sadece konsola basıyor, ileride sayfa değiştirecek
print("Sistem Başlatılıyor...");
},
child: const Text(
'SİSTEME GİRİŞ YAP',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
],
),
),
);
}
}
Koddan görüntüler:
Çalıştığı Halinden Görüntü:
İlk partımızın sonuna geldik.Ortamı kurduk, mimariyi anladık ve temel Widget ağacını inşa edip siyah-kırmızı Siberatay ruhunu ekrana yansıttık. Bir sonraki partta uygulamamıza can suyu verecek olan State Management (Durum Yönetimi) kavramına girecek ve ekranlar arası veri aktarımı (Routing) mimarisini parçalayacağız.
Kodunuz bug'sız, kahveniz koyu olsun.
İyi Forumlar Dilerim.
Son düzenleme: