ETAP İçin Örnek Proje Tasarımı

Akıllı tahtalar için uygulama geliştirirken dikkat etmeniz gereken 3 altın kural vardır:

  1. Büyük Butonlar: Öğretmen veya öğrenci tahtaya parmakla dokunacağı için butonlar büyük olmalıdır.

  2. Yüksek Kontrast: Sınıfın en arkasından bile rahat okunabilmelidir.

  3. Basit Navigasyon: Menüler arasında kaybolunmamalıdır.

Aşağıda, basit bir "Ders Asistanı" arayüzü oluşturan temel kodları:

Dosya: lib/main.dart

Bu kodu projenizin main.dart dosyasına yapıştırın:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ETAP Eğitim Asistanı',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // ETAP koyu tema veya kurumsal renkler (Pardus mavisi)
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: const Color(0xFFF5F5F5),
        useMaterial3: true,
      ),
      home: const AnaEkran(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Ekran genişliğine göre dinamik boyutlandırma için
    var ekranGenisligi = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Pardus ETAP - Sınıf Modülü'),
        centerTitle: true,
        backgroundColor: Colors.blue[800],
        foregroundColor: Colors.white,
        elevation: 4,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Hoş Geldiniz',
                style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.black87),
              ),
              const SizedBox(height: 10),
              const Text(
                'Lütfen yapmak istediğiniz işlemi seçin',
                style: TextStyle(fontSize: 24, color: Colors.black54),
              ),
              const SizedBox(height: 60),
              
              // Yan yana büyük butonlar satırı
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _buyukMenuButonu(
                    icon: Icons.school, 
                    label: 'Konu Anlatımı', 
                    color: Colors.orange, 
                    onTap: () {
                      // Konu anlatımı sayfasına git
                      print("Konu Anlatımı Tıklandı");
                    }
                  ),
                  const SizedBox(width: 40), // Butonlar arası boşluk
                  _buyukMenuButonu(
                    icon: Icons.quiz, 
                    label: 'Test Çöz', 
                    color: Colors.green, 
                    onTap: () {
                      // Test sayfasına git
                    }
                  ),
                  const SizedBox(width: 40),
                  _buyukMenuButonu(
                    icon: Icons.draw, 
                    label: 'Beyaz Tahta', 
                    color: Colors.purple, 
                    onTap: () {
                      // Çizim alanını aç
                    }
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  // Tekrarlayan kodları önlemek için özel widget fonksiyonu
  Widget _buyukMenuButonu({required IconData icon, required String label, required Color color, required VoidCallback onTap}) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(20),
      child: Container(
        width: 250,
        height: 250,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: color.withOpacity(0.3),
              blurRadius: 15,
              offset: const Offset(0, 5),
            )
          ],
          border: Border.all(color: color.withOpacity(0.5), width: 2),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: 80, color: color),
            const SizedBox(height: 20),
            Text(
              label,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black87),
            ),
          ],
        ),
      ),
    );
  }
}

3. Bu Kodu Nasıl Çalıştırırsınız?

  1. VS Code terminalinde projenin olduğu klasörde şu komutu yazın:

    Bash:
    flutter run -d linux
    
  2. Bu komut, uygulamayı Linux masaüstü uygulaması olarak derler ve pencere modunda açar. Pardus üzerinde "native" (yerel) bir pencere gibi çalışacaktır.

4. Geliştirme İpuçları

  • Pencere Yönetimi: ETAP tahtaları genellikle yatay (landscape) kullanılır. bitsdojo_window paketini kullanarak uygulamanın açılışta tam ekran olmasını veya özel pencere çubuğu kullanmasını sağlayabilirsiniz.

  • Offline Çalışma: Okullarda internet kesintisi olabilir. İçerikleri (resim, PDF, video) uygulamanın içine gömmek (assets) veya yerel bir veritabanı (SQLite/Drift) kullanmak mantıklıdır.

Yorumlar

Bu blogdaki popüler yayınlar

Pardus ETAP 23 İçin Flutter ile Dijital "Öğrenci Seçici" Uygulaması

Uygulama: Pardus Logosunu Göster

Pardus ETAP 23 İçin Flutter ile Sanal Laboratuvar