📅 Flutter Tarih ve Saat Seçimi (Date & Time Picker)

Flutter'da tarih ve saat seçimi işlemleri, uygulamanızda formlar, rezervasyon sistemleri veya hatırlatıcılar oluştururken sıklıkla ihtiyaç duyacağınız temel özelliklerden biridir.

Flutter, Material Design standartlarına uygun yerleşik Date Picker (Tarih Seçici) ve Time Picker (Saat Seçici) widget'ları sunar. 


1. Tarih Seçici (Date Picker) Kullanımı

Flutter'da bir takvim penceresi açıp kullanıcıdan tarih almak için showDatePicker fonksiyonu kullanılır. Bu fonksiyon Future<DateTime?> döndürür, yani kullanıcı bir tarih seçtiğinde bu değeri asenkron olarak alırız.

Önemli Parametreler:

  • context: Uygulamanın widget ağacındaki konumunu belirtir.

  • initialDate: Seçici açıldığında varsayılan olarak seçili gelecek tarih (genellikle bugünün tarihi).

  • firstDate: Seçilebilecek en eski tarih.

  • lastDate: Seçilebilecek en ileri tarih.

Dart:
Future<void> _tarihSec(BuildContext context) async {
  final DateTime? secilenTarih = await showDatePicker(
    context: context,
    initialDate: DateTime.now(), // Bugünün tarihi
    firstDate: DateTime(2000),   // Seçilebilecek en eski tarih
    lastDate: DateTime(2030),    // Seçilebilecek en ileri tarih
  );

  if (secilenTarih != null) {
    print("Seçilen Tarih: $secilenTarih");
  }
}

2. Saat Seçici (Time Picker) Kullanımı

Saat seçimi için ise showTimePicker fonksiyonunu kullanırız. Bu fonksiyon Future<TimeOfDay?> döndürür.

Önemli Parametreler:

  • context: Uygulama bağlamı.

  • initialTime: Seçici açıldığında gösterilecek varsayılan saat (genellikle şu anki saat).

Dart:
Future<void> _saatSec(BuildContext context) async {
  final TimeOfDay? secilenSaat = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(), // Şu anki saat
  );

  if (secilenSaat != null) {
    print("Seçilen Saat: ${secilenSaat.hour}:${secilenSaat.minute}");
  }
}

3. Tam Kapsamlı Örnek Uygulama

Şimdi bu iki fonksiyonu birleştiren ve seçilen tarih/saat bilgilerini ekranda gösteren çalışan bir StatefulWidget örneği yapalım. Değerleri ekranda güncelleyebilmek için setState kullanmamız gerekir.

Aşağıdaki kodu doğrudan main.dart dosyanıza kopyalayıp çalıştırabilirsiniz:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tarih ve Saat Seçici',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const DateTimePickerEgitimi(),
    );
  }
}

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

  @override
  State<DateTimePickerEgitimi> createState() => _DateTimePickerEgitimiState();
}

class _DateTimePickerEgitimiState extends State<DateTimePickerEgitimi> {
  DateTime? _seciliTarih;
  TimeOfDay? _seciliSaat;

  // Tarih seçme fonksiyonu
  Future<void> _tarihSec(BuildContext context) async {
    final DateTime? secilen = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime(2030),
    );

    if (secilen != null && secilen != _seciliTarih) {
      setState(() {
        _seciliTarih = secilen;
      });
    }
  }

  // Saat seçme fonksiyonu
  Future<void> _saatSec(BuildContext context) async {
    final TimeOfDay? secilen = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    if (secilen != null && secilen != _seciliSaat) {
      setState(() {
        _seciliSaat = secilen;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Tarih ve Saat Seçimi'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Tarih Gösterimi ve Butonu
            Text(
              _seciliTarih == null
                  ? 'Henüz bir tarih seçilmedi.'
                  : 'Seçilen Tarih: ${_seciliTarih!.day}/${_seciliTarih!.month}/${_seciliTarih!.year}',
              style: const TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () => _tarihSec(context),
              child: const Text('Tarih Seç'),
            ),
            
            const SizedBox(height: 40),

            // Saat Gösterimi ve Butonu
            Text(
              _seciliSaat == null
                  ? 'Henüz bir saat seçilmedi.'
                  : 'Seçilen Saat: ${_seciliSaat!.format(context)}',
              style: const TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () => _saatSec(context),
              child: const Text('Saat Seç'),
            ),
          ],
        ),
      ),
    );
  }
}

İpucu: Gerçek dünya uygulamalarında tarihleri 12/05/2026 gibi daha düzenli formatlarda göstermek için pub.dev üzerinden intl paketini (DateFormat sınıfını) kullanmanız çok daha profesyonel sonuçlar verir.


Mobil uygulamalarda kullanıcıdan tarih veya saat almak çok sık kullanılan bir işlemdir.

Örneğin:

  • 📆 Randevu uygulaması

  • 🕌 Namaz vakti hatırlatıcı

  • 🎂 Doğum günü kayıt ekranı

  • 📝 Etkinlik planlama uygulaması

Flutter’da tarih ve saat seçmek için hazır fonksiyonlar bulunur:

  • showDatePicker()

  • showTimePicker()


1️⃣ DatePicker (Tarih Seçimi)

Flutter’da tarih seçmek için showDatePicker() fonksiyonu kullanılır.

📌 Temel Kullanım

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );

  if (picked != null) {
    print("Seçilen tarih: $picked");
  }
}

📌 Parametre Açıklamaları

ParametreAçıklama
contextBulunduğun widget’ın context’i
initialDateAçıldığında varsayılan tarih
firstDateSeçilebilecek en erken tarih
lastDateSeçilebilecek en geç tarih

📌 Buton ile Kullanımı

ElevatedButton(
  onPressed: () => _selectDate(context),
  child: Text("Tarih Seç"),
)

2️⃣ TimePicker (Saat Seçimi)

Saat seçmek için showTimePicker() kullanılır.

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );

  if (picked != null) {
    print("Seçilen saat: ${picked.format(context)}");
  }
}

📌 Buton ile Kullanımı

ElevatedButton(
  onPressed: () => _selectTime(context),
  child: Text("Saat Seç"),
)

3️⃣ State ile Seçilen Tarihi Ekranda Gösterme

Gerçek uygulamada print() yerine ekranda göstermek gerekir.

📌 Örnek Uygulama

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateTimePage(),
    );
  }
}

class DateTimePage extends StatefulWidget {
  @override
  _DateTimePageState createState() => _DateTimePageState();
}

class _DateTimePageState extends State<DateTimePage> {
  DateTime? selectedDate;
  TimeOfDay? selectedTime;

  Future<void> _selectDate() async {
    final picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );

    if (picked != null) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  Future<void> _selectTime() async {
    final picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    if (picked != null) {
      setState(() {
        selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Tarih & Saat Seçimi")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: _selectDate,
              child: Text("Tarih Seç"),
            ),
            SizedBox(height: 10),
            Text(
              selectedDate == null
                  ? "Tarih seçilmedi"
                  : "Seçilen Tarih: ${selectedDate!.day}/${selectedDate!.month}/${selectedDate!.year}",
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _selectTime,
              child: Text("Saat Seç"),
            ),
            SizedBox(height: 10),
            Text(
              selectedTime == null
                  ? "Saat seçilmedi"
                  : "Seçilen Saat: ${selectedTime!.format(context)}",
            ),
          ],
        ),
      ),
    );
  }
}

4️⃣ Türkçe Tarih Formatlama (intl Paketi)

Tarihi daha profesyonel göstermek için intl paketi kullanılır.

📌 pubspec.yaml

dependencies:
  intl: ^0.18.0

📌 Kullanımı

import 'package:intl/intl.dart';

String formattedDate =
    DateFormat('dd MMMM yyyy', 'tr_TR').format(selectedDate!);

Çıktı örneği:

23 Şubat 2026

5️⃣ Mini LAB Uygulaması

🎯 Görev:
“Randevu Oluştur” ekranı yap.

📌 Gereksinimler:

  • Tarih seç butonu

  • Saat seç butonu

  • Seçilen bilgileri ekranda göster

  • “Randevu Oluştur” butonu

  • Snackbar ile onay mesajı


6️⃣ Sınavda Çıkabilecek Sorular

  1. showDatePicker() neden async çalışır?

  2. TimeOfDay ile DateTime arasındaki fark nedir?

  3. setState() neden kullanılır?

  4. firstDate parametresi ne işe yarar?


7️⃣ Özet

FonksiyonAmaç
showDatePicker()        Tarih seçtirir
showTimePicker()        Saat seçtirir
setState()        Ekranı günceller
intl        Tarih formatlar

🕌 Flutter Namaz Vakti Seçici Örneği

Bu örnekte kullanıcı:

  • ✅ Namaz vaktini seçecek

  • ⏰ O vakit için saat belirleyecek

  • 🔔 Kaydet butonu ile onay alacak


🎯 Amaç

Bir Namaz Hatırlatıcı ekranı yapacağız.

Seçilebilir vakitler:

  • Sabah

  • Öğle

  • İkindi

  • Akşam

  • Yatsı


1️⃣ Dropdown ile Namaz Vakti Seçimi

Flutter’da liste seçmek için DropdownButton kullanılır.


2️⃣ Tam Çalışan Örnek Kod

import 'package:flutter/material.dart';

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

class NamazApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: NamazVaktiPage(),
    );
  }
}

class NamazVaktiPage extends StatefulWidget {
  @override
  _NamazVaktiPageState createState() => _NamazVaktiPageState();
}

class _NamazVaktiPageState extends State<NamazVaktiPage> {
  String? selectedPrayer;
  TimeOfDay? selectedTime;

  List<String> prayerList = [
    "Sabah",
    "Öğle",
    "İkindi",
    "Akşam",
    "Yatsı"
  ];

  Future<void> _selectTime() async {
    final picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    if (picked != null) {
      setState(() {
        selectedTime = picked;
      });
    }
  }

  void _savePrayer() {
    if (selectedPrayer != null && selectedTime != null) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(
              "$selectedPrayer vakti ${selectedTime!.format(context)} için ayarlandı."),
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text("Lütfen vakit ve saat seçiniz!"),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("🕌 Namaz Vakti Seçici"),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [

            /// Dropdown
            DropdownButtonFormField<String>(
              decoration: InputDecoration(
                labelText: "Namaz Vakti Seçiniz",
                border: OutlineInputBorder(),
              ),
              value: selectedPrayer,
              items: prayerList.map((prayer) {
                return DropdownMenuItem(
                  value: prayer,
                  child: Text(prayer),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  selectedPrayer = value;
                });
              },
            ),

            SizedBox(height: 20),

            /// Saat seç butonu
            ElevatedButton.icon(
              onPressed: _selectTime,
              icon: Icon(Icons.access_time),
              label: Text("Saat Seç"),
            ),

            SizedBox(height: 15),

            /// Seçilen saat gösterimi
            Text(
              selectedTime == null
                  ? "Saat seçilmedi"
                  : "Seçilen Saat: ${selectedTime!.format(context)}",
              style: TextStyle(fontSize: 16),
            ),

            SizedBox(height: 30),

            /// Kaydet butonu
            ElevatedButton(
              onPressed: _savePrayer,
              child: Text("Kaydet"),
            ),
          ],
        ),
      ),
    );
  }
}

📌 Kodun Mantığı

BölümAçıklama
DropdownButtonFormField        Namaz vakti seçer
showTimePicker()        Saat seçer
setState()        Ekranı günceller
SnackBar        Kullanıcıya mesaj gösterir

🔎 Geliştirme Fikirleri

İstersen bunu daha profesyonel yapabiliriz:

🔔 1. Gerçek Bildirim Sistemi

flutter_local_notifications paketi ile gerçek alarm kurabiliriz.

🌙 2. Ramazan Temalı Tasarım

  • Hilal ikonları

  • Gece mavisi arka plan

  • Altın renk butonlar

📊 3. SQLite ile Kaydetme

Seçilen vakitleri veritabanına kaydedebiliriz.

📱 4. Bottom Navigation’lı Versiyon

  • Ana Sayfa

  • Namaz Saatleri

  • Ayarlar


🎓 Mini LAB Görevi

1️⃣ Seçilen vakti bir listeye ekle
2️⃣ Ekranda kaydedilen vakitleri göster
3️⃣ Silme butonu ekle




🕌 Namaz Hatırlatıcı Uygulaması

🔔 Gerçek Alarm + 🎨 Material 3 + 📘 GitHub Yapısı

Bu uygulama:

  • ✅ Namaz vakti seçer

  • ⏰ Saat belirler

  • 🔔 Gerçek bildirim alarmı kurar

  • 🎨 Modern Material 3 tasarım kullanır

  • 📁 Profesyonel klasör yapısına sahiptir


1️⃣ Gerekli Paketler

📦 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  flutter_local_notifications: ^17.0.0
  timezone: ^0.9.2

2️⃣ Android İzinleri

📌 android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM"/>

3️⃣ Modern Material 3 Tema

MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.dark,
    ),
  ),
  home: NamazPage(),
);

4️⃣ Bildirim Servisi (notification_service.dart)

import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:timezone/timezone.dart' as tz;
import 'package:timezone/data/latest.dart' as tz;

class NotificationService {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  Future<void> init() async {
    tz.initializeTimeZones();

    const AndroidInitializationSettings androidSettings =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    const InitializationSettings settings =
        InitializationSettings(android: androidSettings);

    await flutterLocalNotificationsPlugin.initialize(settings);
  }

  Future<void> scheduleNotification(
      int id, String title, String body, DateTime scheduledDate) async {
    await flutterLocalNotificationsPlugin.zonedSchedule(
      id,
      title,
      body,
      tz.TZDateTime.from(scheduledDate, tz.local),
      const NotificationDetails(
        android: AndroidNotificationDetails(
          'namaz_channel',
          'Namaz Hatırlatma',
          importance: Importance.max,
          priority: Priority.high,
        ),
      ),
      androidScheduleMode: AndroidScheduleMode.exactAllowWhileIdle,
      uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
    );
  }
}

5️⃣ Ana Sayfa (Namaz Seçim Ekranı)

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

class NamazPage extends StatefulWidget {
  @override
  State<NamazPage> createState() => _NamazPageState();
}

class _NamazPageState extends State<NamazPage> {
  final NotificationService _notificationService = NotificationService();

  String? selectedPrayer;
  TimeOfDay? selectedTime;

  final List<String> prayers = [
    "Sabah",
    "Öğle",
    "İkindi",
    "Akşam",
    "Yatsı"
  ];

  @override
  void initState() {
    super.initState();
    _notificationService.init();
  }

  Future<void> _selectTime() async {
    final picked =
        await showTimePicker(context: context, initialTime: TimeOfDay.now());

    if (picked != null) {
      setState(() => selectedTime = picked);
    }
  }

  void _setAlarm() {
    if (selectedPrayer != null && selectedTime != null) {
      final now = DateTime.now();
      final scheduledDate = DateTime(
        now.year,
        now.month,
        now.day,
        selectedTime!.hour,
        selectedTime!.minute,
      );

      _notificationService.scheduleNotification(
        0,
        "🕌 $selectedPrayer Vakti",
        "Namaz vakti geldi.",
        scheduledDate,
      );

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Alarm kuruldu ✅")),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Namaz Hatırlatıcı"),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: "Namaz Vakti",
                    border: OutlineInputBorder(),
                  ),
                  value: selectedPrayer,
                  items: prayers
                      .map((e) =>
                          DropdownMenuItem(value: e, child: Text(e)))
                      .toList(),
                  onChanged: (value) =>
                      setState(() => selectedPrayer = value),
                ),
                SizedBox(height: 20),
                FilledButton.icon(
                  onPressed: _selectTime,
                  icon: Icon(Icons.access_time),
                  label: Text("Saat Seç"),
                ),
                SizedBox(height: 20),
                FilledButton(
                  onPressed: _setAlarm,
                  child: Text("Alarm Kur"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

📁 6️⃣ Profesyonel Proje Klasör Yapısı

lib/
│
├── main.dart
├── core/
│   ├── theme.dart
│   └── constants.dart
│
├── services/
│   └── notification_service.dart
│
├── features/
│   └── prayer/
│       ├── namaz_page.dart
│       └── prayer_model.dart
│
└── widgets/
    └── custom_button.dart

Bu yapı 11. sınıf projesi için profesyonel seviye mimari sayılır 👍


📘 7️⃣ GitHub README.md

# 🕌 Namaz Hatırlatıcı Uygulaması

Flutter ile geliştirilmiş gerçek alarm kurabilen Namaz Hatırlatıcı uygulaması.

## 🚀 Özellikler

- Namaz vakti seçimi
- Saat belirleme
- Gerçek zamanlı bildirim alarmı
- Material 3 modern tasarım
- Modüler klasör yapısı

## 📦 Kullanılan Teknolojiler

- Flutter
- flutter_local_notifications
- timezone

## 📱 Ekran Görüntüsü

(ekran görüntüsü buraya)

## ⚙️ Kurulum

git clone ...
flutter pub get
flutter run

🎨 Modern Tasarım Özellikleri

  • Material 3

  • FilledButton

  • Card tasarım

  • Seed color teması

  • Dark Mode uyumu




👏 Şimdi projeyi gerçek dünya seviyesine taşıyoruz.

Bu versiyonda:

  • 📍 Kullanıcının konumu alınacak

  • 🌍 API’den otomatik namaz vakitleri çekilecek

  • 🕌 Günlük vakitler ekranda gösterilecek

  • 🔔 İstenirse otomatik alarm kurulabilecek


🌍 Konuma Göre Otomatik Namaz Vakti API

Biz bu örnekte ücretsiz ve yaygın kullanılan:

👉 Aladhan API

servisini kullanacağız.

API Örnek URL:

https://api.aladhan.com/v1/timings?latitude=...&longitude=...&method=13

method=13 → Türkiye Diyanet hesaplama yöntemi.


📦 1️⃣ Gerekli Paketler

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  http: ^1.2.0
  geolocator: ^11.0.0
  flutter_local_notifications: ^17.0.0
  timezone: ^0.9.2

📍 2️⃣ Konum İzni (Android)

AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

🛰 3️⃣ Konum Servisi

services/location_service.dart

import 'package:geolocator/geolocator.dart';

class LocationService {
  Future<Position> getCurrentLocation() async {
    bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      throw Exception("Konum servisi kapalı");
    }

    LocationPermission permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
    }

    return await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
  }
}

🌍 4️⃣ Namaz API Servisi

services/prayer_api_service.dart

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

class PrayerApiService {
  Future<Map<String, dynamic>> getPrayerTimes(
      double lat, double lon) async {

    final url =
        "https://api.aladhan.com/v1/timings?latitude=$lat&longitude=$lon&method=13";

    final response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data["data"]["timings"];
    } else {
      throw Exception("API hatası");
    }
  }
}

🕌 5️⃣ Namaz Vakitlerini Gösteren Sayfa

features/prayer/prayer_times_page.dart

import 'package:flutter/material.dart';
import '../../services/location_service.dart';
import '../../services/prayer_api_service.dart';

class PrayerTimesPage extends StatefulWidget {
  @override
  State<PrayerTimesPage> createState() => _PrayerTimesPageState();
}

class _PrayerTimesPageState extends State<PrayerTimesPage> {
  final LocationService _locationService = LocationService();
  final PrayerApiService _apiService = PrayerApiService();

  Map<String, dynamic>? prayerTimes;
  bool isLoading = false;

  Future<void> fetchTimes() async {
    setState(() => isLoading = true);

    final position = await _locationService.getCurrentLocation();
    final times = await _apiService.getPrayerTimes(
        position.latitude, position.longitude);

    setState(() {
      prayerTimes = times;
      isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    fetchTimes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("🌍 Günlük Namaz Vakitleri"),
      ),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : prayerTimes == null
              ? Center(child: Text("Veri alınamadı"))
              : ListView(
                  padding: EdgeInsets.all(16),
                  children: [
                    buildTile("Sabah", prayerTimes!["Fajr"]),
                    buildTile("Öğle", prayerTimes!["Dhuhr"]),
                    buildTile("İkindi", prayerTimes!["Asr"]),
                    buildTile("Akşam", prayerTimes!["Maghrib"]),
                    buildTile("Yatsı", prayerTimes!["Isha"]),
                  ],
                ),
    );
  }

  Widget buildTile(String title, String time) {
    return Card(
      child: ListTile(
        leading: Icon(Icons.access_time),
        title: Text(title),
        trailing: Text(time),
      ),
    );
  }
}

🎨 Modern Material 3 Önerisi

Theme dosyan:

ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.teal,
    brightness: Brightness.dark,
  ),
)

🔔 6️⃣ Otomatik Alarm Kurma (İsteğe Bağlı)

İstersen:

  • Sabah vakti geldiğinde otomatik alarm

  • Günlük tekrar eden alarm

  • Tüm vakitler için tek tuşla alarm

ekleyebiliriz.


📁 Güncellenmiş Klasör Yapısı

lib/
│
├── main.dart
│
├── services/
│   ├── location_service.dart
│   ├── prayer_api_service.dart
│   └── notification_service.dart
│
├── features/
│   └── prayer/
│       ├── prayer_times_page.dart
│       └── namaz_page.dart
│
└── core/
    └── theme.dart

🎓 Bu Seviye Ne Anlama Geliyor?

Bu proje artık:

  • ✅ Gerçek API kullanıyor

  • ✅ Gerçek konum alıyor

  • ✅ Profesyonel mimariye sahip

  • ✅ Portföy seviyesi

Bu artık basit okul projesi değil, junior developer seviyesine yaklaşmış bir uygulama 👏



Yorumlar

Bu blogdaki popüler yayınlar

Dart Uygulama Sınavı: Pardus ETAP 23 Kurulum Otomasyonu

Dart Programlama Dil Uygulama Sınavı Çalışma Soruları

Pardus Üzerinde Flutter Geliştirme Ortamı Kurulumu