Flutter ile Sıfırdan Uygulamaya: 15 Dakikada İlk Projenizi Oluşturun!

Merhaba arkadaşlar! Bugün sizlerle Flutter dünyasına hızlı bir giriş yapacağız. Bu yazımda, Flutter’ı hiç bilmeseniz bile sadece 15 dakika içinde ilk uygulamanızı nasıl oluşturabileceğinizi adım adım anlatacağım. Hem web hem de mobil geliştirme seçeneklerini sunarak, size en uygun platformda başlangıç yapmanızı sağlayacağım.

Flutter Nedir ve Neden Tercih Etmelisiniz?

Flutter, Google tarafından geliştirilen açık kaynaklı bir UI toolkit’tir. Tek kod tabanıyla iOS, Android, web ve desktop platformları için uygulamalar geliştirebilirsiniz.

Flutter’ın Avantajları:

Tek Kod Tabanı: Farklı platformlar için ayrı kod yazmanıza gerek yok
Hot Reload: Değişiklikleri anında görerek geliştirme yapabilirsiniz
Zengin Widget Kütüphanesi: Material Design ve Cupertino (iOS) widgetleri hazır olarak sunulur
Performans: Native uygulamalara yakın performans sunar

Dezavantajları:

Uygulama Boyutu: Native uygulamalara göre biraz daha büyük olabilir
Platform Spesifik API Kısıtlamaları: Bazı çok özel native fonksiyonlar için ek çalışma gerekebilir

Başlamadan Önce Gereksinimler

Flutter’a başlamak için iki yol var: Web üzerinden direkt başlangıç veya lokal geliştirme ortamı kurulumu. Hangisinin size uygun olduğunu görelim:

Özellik	Web Üzerinden (DartPad)	Lokal Kurulum
Kurulum Süresi	0 dakika	~10 dakika
Geliştirme Özellikleri	Sınırlı	Tam
Flutter Projesi	Basit UI	Tam Uygulama
Cihazda Test	Hayır	Evet
Offline Çalışma	Hayır	Evet

Seçenek 1: Web Üzerinden Hızlı Başlangıç (DartPad)

Eğer hiçbir kurulum yapmadan hemen Flutter kodlamaya başlamak istiyorsanız, bu seçenek tam size göre. DartPad sayesinde tarayıcınız üzerinden Flutter kodlarını yazıp çalıştırabilirsiniz.

DartPad’i açın
Samples menüsünden “Flutter – Counter App” seçeneğini seçin
Başlangıç şablonu otomatik olarak yüklenecektir

İşte bu kadar! Artık Flutter kodlamaya hazırsınız.

Seçenek 2: Tam Geliştirme Ortamı Kurulumu

Gerçek Flutter projelerine başlamak için tam kurulumu tercih ediyorsanız, aşağıdaki adımları takip edin:

Flutter SDK’yı indirin ve işletim sisteminize uygun kurulum adımlarını izleyin
Bir IDE kurun (VS Code veya Android Studio önerilir)
Flutter eklentilerini yükleyin
Terminalden Flutter kurulumunu doğrulayın:

flutter doctor

Bu komut, eksik bileşenleri gösterecek ve kurulumu tamamlamanız için yönlendirecektir.

İlk Flutter Uygulamanızı Oluşturalım

Artık başlayabiliriz! İki yöntem için de adımları görelim:

Web Üzerinden İlk Uygulama (DartPad)

DartPad’de yeni bir uygulama oluşturmak için, önceden yüklenmiş kodu silin ve aşağıdaki kodu girin:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'İlk Flutter Uygulamam',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;
  
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('İlk Flutter Uygulamam'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Butona basma sayınız:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Artır',
        child: Icon(Icons.add),
      ),
    );
  }
}

Kodu girdikten sonra “Run” butonuna tıklayın. Karşınızda bir sayaç uygulaması göreceksiniz!

Lokal Ortamda İlk Uygulama

Terminalinizi açın ve yeni bir Flutter projesi oluşturun:

flutter create ilk_uygulama
cd ilk_uygulama

Ana dosyayı (lib/main.dart) açın ve içeriğini aşağıdaki kodla değiştirin (DartPad’de kullandığımız kodun aynısı):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'İlk Flutter Uygulamam',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;
  
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('İlk Flutter Uygulamam'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Butona basma sayınız:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Artır',
        child: Icon(Icons.add),
      ),
    );
  }
}

Uygulamanızı çalıştırın:

flutter run

Eğer mobil cihazınız bağlıysa veya bir emülatör açıksa, uygulama otomatik olarak çalışacaktır. Web için:

flutter run -d chrome

Kod Analizi: Ne Yaptık?

Oluşturduğumuz basit uygulamayı parça parça inceleyelim:

main() Fonksiyonu: Flutter uygulamasının başlangıç noktasıdır. runApp() fonksiyonu ile widget ağacının kök widget’ını belirtiriz.
MyApp Sınıfı: Uygulamanın temel konfigürasyonlarını içerir:
- MaterialApp: Google’ın Material Design tasarım dilini kullanan ana widget
- title: Uygulama başlığı
- theme: Uygulama teması
- home: Uygulamanın ana sayfası
HomePage: Sayfamızın StatefulWidget olarak tanımlandığı yer. State’i değişebilen widget’lar için StatefulWidget kullanırız.
_HomePageState: Sayfa durumunu yöneten sınıf:
- _counter: Sayaç değişkeni
- _incrementCounter(): Butona basıldığında çalışan fonksiyon
- setState(): Arayüzü yenilemek için kullandığımız fonksiyon
- build(): Arayüzü oluşturan fonksiyon

Flutter Widgets: Temel Yapı Taşları

Flutter’da her şey widget’lardan oluşur. Uygulamalarımızı widget’ları bir araya getirerek oluştururuz. İşte bazı temel widget türleri:

Stateless Widgets: Durumu değişmeyen, statik widget’lar
Stateful Widgets: Kullanıcı etkileşimine göre değişebilen widget’lar
Layout Widgets: Row, Column, Stack gibi diğer widget’ları düzenleyen widgetlar
Material Components: Material tasarım diline uygun button, card gibi widget’lar
Cupertino Components: iOS tasarım diline uygun widget’lar

Uygulamanızı Özelleştirme

Şimdi, oluşturduğumuz uygulamayı biraz özelleştirelim:

Tema rengini değiştirme:

theme: ThemeData(
  primarySwatch: Colors.purple, // Mavi yerine mor
  visualDensity: VisualDensity.adaptivePlatformDensity,
),

Sayaç metnini özelleştirme:

Text(
  '$_counter',
  style: TextStyle(
    fontSize: 60,
    fontWeight: FontWeight.bold,
    color: Colors.purple,
  ),
),

Farklı bir buton ekleme:

floatingActionButton: Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      onPressed: () {
        setState(() {
          _counter--;
        });
      },
      tooltip: 'Azalt',
      child: Icon(Icons.remove),
    ),
    SizedBox(width: 10),
    FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Artır',
      child: Icon(Icons.add),
    ),
  ],
),

Bu değişiklikleri yaparak hem tema rengini değiştirmiş, hem sayaç görünümünü özelleştirmiş, hem de azaltma butonu eklemiş olduk!

Sonraki Adımlar

Tebrikler! İlk Flutter uygulamanızı başarıyla oluşturdunuz. Şimdi sıra geldi Flutter yolculuğunuzda ilerlemek için yapabileceklerinize:

Flutter Temelleri Öğrenin:
- Widget ağacı konseptini tam olarak anlayın
- State management stratejilerini öğrenin (Provider, Bloc, GetX)
- Navigation ve routing hakkında bilgi edinin
Flutter Paketlerini Keşfedin:
- pub.dev üzerindeki açık kaynak paketleri keşfedin
- Kamera, harita, veritabanı gibi yaygın paketleri kullanmayı öğrenin
Gerçek Bir Proje Geliştirin:
- Basit bir to-do list uygulaması
- Hava durumu uygulaması
- Not defteri uygulaması

Kaynaklar

Flutter öğrenme yolculuğunuzda size yardımcı olacak bazı kaynaklar:

Sonuç

Flutter, modern mobil ve web uygulamaları geliştirmek için harika bir platform. Tek kod tabanıyla birden fazla platformda çalışan uygulamalar geliştirmek, hem zaman tasarrufu sağlar hem de bakım maliyetlerini azaltır.

Bu yazımızda gördüğünüz gibi, Flutter ile başlamak için çok fazla ön koşul gerekmez. Temel programlama bilgileriyle, hızlıca öğrenmeye başlayabilir ve etkileyici uygulamalar geliştirebilirsiniz.

Kodlamanız bol olsun, küçük projelerle başlayın ve büyük düşünün! Unutmayın, her uzman geliştiricinin yolculuğu da ilk uygulamasıyla başlamıştır.

Sorularınız veya yorumlarınız varsa, aşağıdaki yorum bölümünden bana ulaşabilirsiniz. Flutter deneyimlerinizi paylaşmayı unutmayın!

Okuma Sayısı: 33