Osmanlı Türkçesi Matbu'dan Rika'ya Dönüştürücü Uygulaması

Pardus ETAP yüklü akıllı tahtalar dokunmatik özellikleri (touchscreen) ve Linux tabanları sayesinde Flutter uygulamaları için mükemmel bir ortamdır.

İstediğiniz "Matbu'dan Rika'ya Dönüşüm" efektini, iki farklı fontu (yazı tipini) üst üste bindirip, bir Slider (kaydırma çubuğu) aracılığıyla opaklıklarını (saydamlıklarını) değiştirerek yapabiliriz. Slider sağa kaydıkça Matbu fontu silikleşirken, Rika fontu belirginleşir. Bu yöntem, görsel olarak harflerin şekil değiştiriyormuş gibi görünmesini sağlar.

1. Ön Hazırlık ve Mantık

Bu uygulamanın çalışması için elinizde iki adet font dosyasına ihtiyacınız var:

  1. Matbu Font: Pardus'un kendi fontu veya standart bir font (Arial, Roboto vb.).

  2. Rika Font: Rika el yazısını simüle eden .ttf veya .otf uzantılı bir font dosyası (İnternetten "Rika font" veya "Ottoman handwriting font" şeklinde bulabilirsiniz).

Font Dosyasını İndirme

Öncelikle ilgili web sitesinden font dosyasını bilgisayarımıza indirmemiz gerekiyor.

  1. klavye.osmanlica.online adresine gidin.

  2. Sayfada "Osmanlıca Font İndir" başlığını bulun.

  3. Altındaki "İndir" butonuna tıklayın.

  4. Dosya, bilgisayarınızın İndirilenler klasörüne inecektir.

    • Not: Dosya .zip (sıkıştırılmış) formatında inebilir. Eğer öyleyse, dosyaya sağ tıklayıp "Buraya Ayıkla" diyerek içindeki .ttf veya .otf uzantılı font dosyasını dışarı çıkarın.


2. Proje Kurulumu

Terminali açın ve projeyi oluşturun:

Bash:
flutter create rika_donusturucu
cd rika_donusturucu

Linux masaüstü desteğini açtığınızdan emin olun (Pardus için):

Bash:
flutter config --enable-linux-desktop

3. Fontları Tanımlama (pubspec.yaml)

Proje klasörünüzün içinde assets ve onun içinde fonts adında klasörler oluşturun. İndirdiğiniz Rika fontunu (örneğin eKalemDuz-Regular_150.ttf) buraya atın.

pubspec.yaml dosyasını açın ve font ayarlarını şu şekilde düzenleyin:

YAML:
flutter:
  uses-material-design: true

  # Fontları buraya ekliyoruz
  fonts:
    - family: Matbu
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf # Veya sistem fontunu kullanabilirsiniz, burası opsiyoneldir.
    - family: Rika
      fonts:
        - asset: assets/fonts/eKalemDuz-Regular_150.ttf # Buraya indirdiğiniz fontun tam adını yazın

4. Uygulama Kodları (lib/main.dart)

Aşağıdaki kodu lib/main.dart dosyanıza kopyalayın. Kod, akıllı tahta kullanımına uygun olarak büyük boyutlu butonlar ve metinler içerecek şekilde tasarlanmıştır.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Matbu - Rika Dönüştürücü',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: const Color(0xFFF5F5F5), // Gözü yormayan açık gri
      ),
      home: const ConverterScreen(),
    );
  }
}

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

  @override
  State<ConverterScreen> createState() => _ConverterScreenState();
}

class _ConverterScreenState extends State<ConverterScreen> {
  // Slider değerini tutan değişken (0.0 = Matbu, 1.0 = Rika)
  double _sliderValue = 0.0;
  
  // Ekranda gösterilecek metin
  final TextEditingController _textController = TextEditingController(text: "Pardus Etap");

  @override
  Widget build(BuildContext context) {
    // Akıllı tahta için büyük font boyutu
    const double fontSize = 120.0;

    return Scaffold(
      appBar: AppBar(
        title: const Text("Matbu'dan Rika'ya Dönüştürücü"),
        centerTitle: true,
        backgroundColor: Colors.blueGrey[900],
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: [
            // --- 1. Metin Giriş Alanı (Öğretmen metni değiştirebilsin diye) ---
            TextField(
              controller: _textController,
              decoration: const InputDecoration(
                labelText: "Dönüştürülecek Metni Yazın",
                border: OutlineInputBorder(),
                filled: true,
                fillColor: Colors.white,
              ),
              style: const TextStyle(fontSize: 24),
              onChanged: (val) {
                setState(() {}); // Yazı değiştikçe ekranı güncelle
              },
            ),
            
            const Spacer(),

            // --- 2. Dönüşüm Alanı (Stack ile üst üste bindirme) ---
            // Bu alan iki metni üst üste koyar. Opacity ile geçiş sağlanır.
            Center(
              child: Stack(
                alignment: Alignment.center,
                children: [
                  // Katman 1: MATBU (Basılı) Harfler
                  // Slider sağa gittikçe bu silinir (Opacity azalır)
                  Opacity(
                    opacity: 1.0 - _sliderValue,
                    child: Text(
                      _textController.text,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: fontSize,
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        // Eğer özel matbu font varsa: fontFamily: 'Matbu',
                      ),
                    ),
                  ),

                  // Katman 2: RİKA (El Yazısı) Harfler
                  // Slider sağa gittikçe bu belirir (Opacity artar)
                  Opacity(
                    opacity: _sliderValue,
                    child: Text(
                      _textController.text,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: fontSize,
                        color: Colors.blueAccent, // Farkı belli etmek için hafif renk farkı
                        fontFamily: 'Rika', // pubspec.yaml'da tanımladığımız font ailesi
                      ),
                    ),
                  ),
                ],
              ),
            ),

            const Spacer(),

            // --- 3. Kontrol Alanı (Slider) ---
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(color: Colors.black12, blurRadius: 10, spreadRadius: 2)
                ],
              ),
              child: Column(
                children: [
                  Text(
                    "Dönüşüm Oranı: %${(_sliderValue * 100).toInt()}",
                    style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10),
                  Slider(
                    value: _sliderValue,
                    min: 0.0,
                    max: 1.0,
                    activeColor: Colors.blueAccent,
                    inactiveColor: Colors.grey[300],
                    thumbColor: Colors.blueGrey[900],
                    onChanged: (newValue) {
                      setState(() {
                        _sliderValue = newValue;
                      });
                    },
                  ),
                  const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("MATBU", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                      Text("RİKA", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, fontFamily: 'Rika')),
                    ],
                  )
                ],
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

Kaynak Kod: https://github.com/nuritiras/rika_donusturucu

5. Pardus'ta Çalıştırma

Kodları kaydettikten sonra terminalden şu komutu vererek uygulamayı Pardus üzerinde test edebilirsiniz:

Bash:
flutter run -d linux

Akıllı Tahta İçin İpuçları:

  • Font Hizalaması: Matbu font ile Rika fontunun harf genişlikleri farklı olabilir. Kodda TextAlign.center ve Stack kullanarak bunları merkeze hizaladım, böylece kelime uzasa bile merkezden dönüşüm gerçekleşir.

  • Dokunmatik Kontrol: Flutter'ın Slider bileşeni dokunmatik ekranlarda (Pardus ETAP) sorunsuz çalışır.

  • Renk Seçimi: Rika fontunu hafif mavi (Colors.blueAccent) yaptım. Böylece öğrenci sadece şekil değişimini değil, hangi fontun hangisi olduğunu renk değişimiyle de algılayabilir. İsterseniz ikisini de siyah yapabilirsiniz.

Sonraki Adım: Uygulamayı Pardus üzerinde "çift tıklanabilir" bir program haline getirmek veya .deb paketi oluşturmak 

Pardus ETAP üzerinde uygulamanızı bir kurulum dosyasına (.deb) dönüştürmek, uygulamanın diğer tüm tahtalara kolayca yüklenmesini ve "Başlat" menüsünde ikonunun görünmesini sağlar.

Bunun için en pratik yöntem, Flutter topluluğunun geliştirdiği flutter_to_debian paketini kullanmaktır. Manuel yöntemlere göre çok daha hızlı ve hatasızdır.

İşte adım adım Matbu-Rika Dönüştürücü uygulamanızı Pardus kurulum paketine dönüştürme rehberi:

1. Gerekli Paketin Eklenmesi

Projenizin olduğu klasörde terminali açın ve flutter_to_debian paketini geliştirici bağımlılığı olarak ekleyin:

Bash:
flutter pub add --dev flutter_to_debian

2. Yapılandırma Ayarları

Projenizin ana dizininde (pubspec.yaml ile aynı yerde) debian adında bir klasör ve içine debian.yaml adında bir dosya oluşturmanız gerekiyor.

Bunu yapmak yerine, terminale şu komutu yazarak otomatik şablon oluşturabilirsiniz:

Bash:
dart run flutter_to_debian:main

Bu komut size bazı sorular sorabilir veya doğrudan dosyaları oluşturabilir. Eğer oluşturmazsa, projenizin ana dizinine debian.yaml adında bir dosya oluşturun ve içine şu bilgileri yapıştırın:

YAML:
app_name: rika_donusturucu
maintainer: Adiniz Soyadiniz <email@adresiniz.com>
version: 1.0.0
package_name: rika-donusturucu
section: education
priority: optional
architecture: all
essential: false
description: Matbu harfleri Rika el yazisina donusturen egitim uygulamasi.
# Uygulamanın çalışacağı komut (genelde proje ismiyle aynı olur)
exec_name: rika_donusturucu
# İkon yolu (Projenizde assets/icon.png olduğunu varsayıyoruz, yoksa oluşturun)
icon: assets/icon.png

> Not: Projenizin assets klasörüne uygulamanız için güzel bir icon.png (512x512 piksel önerilir) koymayı unutmayın. Bu ikon tahtanın menüsünde görünecektir.

3. Linux İçin Derleme (Build)

Önce uygulamanın son halini "Release" modunda (hata ayıklama modları kapalı, optimize edilmiş haliyle) derleyelim:

Bash:
flutter build linux --release

4. .deb Paketini Oluşturma

Şimdi büyülü komutu çalıştırıyoruz. Bu komut, derlenen dosyaları alır, gerekli Linux ayarlarını yapar ve size tek bir kurulum dosyası verir:

Bash
dart run flutter_to_debian:main

İşlem bittiğinde terminal size .deb dosyasının nerede oluşturulduğunu söyleyecektir. Genellikle şu yolda olur: debian/dist/rika-donusturucu_1.0.0_amd64.deb

5. Pardus ETAP Üzerinde Kurulum

Artık elinizde bir .deb dosyası var!

  1. Dosya yöneticisinden debian/dist klasörüne gidin.

  2. Oluşan .deb dosyasına çift tıklayın.

  3. Pardus Paket Kurucu açılacaktır. "Yükle" butonuna basın.

  4. Şifrenizi (veya öğretmen şifresini) girin.

Kurulum bittikten sonra Başlat menüsüne (veya Uygulama Izgarasına) gidip "Rika" diye arattığınızda uygulamanızın ikonunu göreceksiniz. Tıkladığınızda tam ekran olarak açılacaktır.

Sıradaki Adım: Uygulamaya "siyah tahta üzerine tebeşir efekti" veya "defter çizgileri" gibi görsel arka planlar eklemek ister misiniz? Bu, öğrenciler için daha tanıdık bir ortam oluşturabilir.

Uygulamaya "siyah tahta üzerine tebeşir efekti" veya "defter çizgileri" gibi görsel arka planlar eklemek, öğrenci deneyimini zenginleştirecek harika bir dokunuş olacaktır. Bunu iki temel yöntemle yapabiliriz:

1. Yöntem: Görsel Dosyası Kullanarak Arka Plan (Tavsiye Edilen)

Bu yöntem, gerçekçi bir "siyah tahta" veya "defter yaprağı" görselini uygulamanızın arka planı olarak kullanır. Uygulanması en kolay ve görsel açıdan en başarılı yöntemdir.

Adımlar:

  1. Görsel Hazırlığı: İnternetten "blackboard texture" (siyah tahta dokusu) veya "lined paper texture" (çizgili kağıt dokusu) şeklinde arama yaparak yüksek çözünürlüklü, telif hakkı olmayan bir görsel bulun ve blackboard.jpg gibi bir isimle assets/images/ klasörüne kaydedin.

  2. pubspec.yaml Güncellemesi: Görseli projeye tanıtın.

YAML:
flutter:
  assets:
    - assets/images/blackboard.jpg

  1. Kodu Güncelleyin (lib/main.dart): ConverterScreen'in body kısmını, arka plan görseli olan bir Container ile sarmalayın.

Dart:
class _ConverterScreenState extends State<ConverterScreen> {
  // ... değişkenler aynı ...

  @override
  Widget build(BuildContext context) {
    const double fontSize = 120.0;

    return Scaffold(
      // AppBar'ı şeffaf yapıyoruz ki arka plan bütünlüğü bozulmasın
      appBar: AppBar(
        title: const Text("Matbu'dan Rika'ya Dönüştürücü"),
        centerTitle: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      // extendBodyBehindAppBar: true, // Gerekirse AppBar'ın arkasına da yayılabilir

      // Tüm içeriği arka plan görseli olan bir Container içine alıyoruz
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/blackboard.jpg"), // Görselin yolu
            fit: BoxFit.cover, // Görselin ekranı kaplamasını sağlar
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Column(
            children: [
              // --- 1. Metin Giriş Alanı ---
              TextField(
                controller: _textController,
                decoration: InputDecoration(
                  labelText: "Dönüştürülecek Metni Yazın",
                  labelStyle: const TextStyle(color: Colors.white70), // Etiket rengi
                  // Çerçeve ve dolgu renklerini tebeşir efektine uygun hale getiriyoruz
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white54),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                  fillColor: Colors.white10,
                  filled: true,
                ),
                style: const TextStyle(fontSize: 24, color: Colors.white), // Yazı rengi beyaz
                onChanged: (val) { setState(() {}); },
              ),
              
              const Spacer(),

              // --- 2. Dönüşüm Alanı ---
              Center(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    // Katman 1: MATBU (Basılı) Harfler
                    Opacity(
                      opacity: 1.0 - _sliderValue,
                      child: Text(
                        _textController.text,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: fontSize,
                          color: Colors.white, // Beyaz tebeşir
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),

                    // Katman 2: RİKA (El Yazısı) Harfler
                    Opacity(
                      opacity: _sliderValue,
                      child: Text(
                        _textController.text,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: fontSize,
                          // Rika için hafif sarımtırak bir tebeşir rengi seçtik
                          color: Color(0xFFFFEB3B), 
                          fontFamily: 'Rika',
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              const Spacer(),

              // --- 3. Kontrol Alanı (Slider) ---
              // ... Slider kısmını da koyu temaya uygun hale getirebilirsiniz ...
              Container(
                 // ...
                 decoration: BoxDecoration(
                   color: Colors.white24, // Yarı saydam beyaz arka plan
                   // ...
                 ),
                 child: Column(
                   children: [
                     Text(
                       "Dönüşüm Oranı: %${(_sliderValue * 100).toInt()}",
                       style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
                     ),
                     // ... Slider ve diğer Text'ler için de color: Colors.white ekleyin
                   ],
                 ),
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

2. Yöntem: Flutter ile Çizim (Defter Çizgileri İçin)

Bu yöntem, basit ve tekrarlayan desenler (örneğin çizgili kağıt) için daha uygundur. Bir resim dosyası kullanmak yerine çizgileri kodla çizer.

Adım: CustomPaint widget'ı ve ona özel bir CustomPainter sınıfı kullanarak arka plana çizgiler çizebilirsiniz.

Hangi yöntemi seçerseniz, uygulamanın geri kalan renklerini (metin rengi, buton rengi vb.) yeni arka plana uygun olacak şekilde güncellemeyi unutmayın. Örneğin, siyah tahta üzerinde beyaz veya açık sarı renkli metinler ("tebeşir" gibi) kullanılmalıdır.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

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

Resim
Eğitim teknolojilerinin merkezinde yer alan Pardus ETAP (Etkileşimli Tahta Projesi), sınıflarda verimliliği artırmak için güçlü araçlar sunar. Bu yazıda, öğretmenlerin ders içi etkileşimi artırmak, sözlüye kalkacak öğrenciyi adil bir şekilde seçmek veya sunum sırasını belirlemek için kullanabileceği "Dijital Öğrenci Seçici" uygulamasını Flutter ile nasıl geliştireceğinizi adım adım anlatacağız. Bu uygulama şunları yapabilecek: Excel'den Liste Yükleme: e-Okul listelerini saniyeler içinde içeri aktarma. Görsel Seçim: Heyecan verici bir çark arayüzü ile seçim yapma. Ses Efektleri: Dönme ve alkış sesleri ile sınıf atmosferini canlandırma. Sonuç Ekranı: Seçilen öğrenciyi büyük bir pencerede ilan etme. Bölüm 1: Geliştirme Ortamının Hazırlanması Pardus üzerinde Flutter ile masaüstü uygulama geliştirebilmek için temel derleme araçlarına ihtiyacımız vardır. Terminali açın ve aşağıdaki komutları sırasıyla uygulayın. 1. Sistem Gereksinimleri Bash: sudo apt update sudo apt insta...
Devamı

Uygulama: Pardus Logosunu Göster

Resim
Bu örnek, öğrencilere veya izleyicilere State Management (Durum Yönetimi) ve Asset Management (Dosya Yönetimi) konularını öğretmek için mükemmeldir. İşte önceki projenin üzerine inşa edeceğimiz "Butona Basınca Logoyu Göster/Gizle" eğitimi: Bu bölümde, projemize dışarıdan bir resim dosyası eklemeyi ve bir butona tıklayarak ekranın durumunu değiştirmeyi (setState) öğreneceğiz. 1. Hazırlık: Logoyu Projeye Ekleme Flutter'da resim kullanmak için önce bir klasör oluşturmalı ve resmi oraya koymalıyız. Proje klasörünüzün ( ilk_pardus_uygulamam ) içinde, lib klasörüyle aynı seviyede (ana dizinde) assets adında yeni bir klasör oluşturun. İnternetten bir Pardus logosu indirin (veya herhangi bir resim) ve adını pardus_logo.png yaparak bu assets klasörünün içine atın. Dosya yapısı şöyle görünmeli: Plaintext: ilk_pardus_uygulamam/ ├── assets/ │ └── pardus_logo.png ├── lib/ │ └── main.dart ├── pubspec.yaml ... 2. Tanımlama: pubspec.yaml Ayarı Flutter'a "Benim bir re...
Devamı

Pardus ETAP 23 İçin Flutter ile Sanal Laboratuvar

Resim
Pardus ETAP (Etkileşimli Tahta Arayüzü Projesi), okullardaki akıllı tahtalar için tasarlanmış, Linux tabanlı (Debian) bir işletim sistemidir. Flutter'ın Linux Desktop desteği sayesinde, tek bir kod tabanıyla hem yüksek performanslı hem de dokunmatik ekranlara (akıllı tahtalara) tam uyumlu uygulamalar geliştirebilirsiniz. Eğitim teknolojilerinde etkileşim, öğrenmeyi kalıcı hale getiren en önemli unsurdur. Bu makalede, Pardus ETAP 23 yüklü etkileşimli tahtalarda çalışacak, öğrencilerin güvenle deney yapabileceği bir Sanal Laboratuvar uygulamasının Flutter ile nasıl geliştirileceğini adım adım inceleyeceğiz. 1. Neden Pardus ETAP ve Flutter? Pardus ETAP: Okullarda yaygın olarak kullanılan, güvenli ve açık kaynaklı bir işletim sistemidir. Flutter: Google'ın UI kiti, Linux masaüstü uygulamaları için "birinci sınıf" (first-class) destek sunar. Akıllı tahtaların donanımını (GPU) verimli kullanarak 60 FPS akıcı animasyonlar sağlar. 2. Geliştirme Ortamının Hazırlanması Pard...
Devamı