ETAP İçin Örnek Proje Tasarımı
Akıllı tahtalar için uygulama geliştirirken dikkat etmeniz gereken 3 altın kural vardır:
Büyük Butonlar: Öğretmen veya öğrenci tahtaya parmakla dokunacağı için butonlar büyük olmalıdır.
Yüksek Kontrast: Sınıfın en arkasından bile rahat okunabilmelidir.
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:
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?
VS Code terminalinde projenin olduğu klasörde şu komutu yazın:
Bash:flutter run -d linuxBu 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_windowpaketini 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
Yorum Gönder