Bir Ses Dosyası Flutter ile Birlikte Nasıl Kullanılır?

Günümüz insanlarının teknolojiye en hızlı erişim sağladıkları araçlar olan mobil uygulamalar, günden güne gelişim gösteriyor. Gösterdikleri bu gelişim sayesinde bizlerle daha fazla iletişime geçen bu uygulamaların, iletişim için kullandıkları en büyük araçlardan biri ise sesler oluyor. Bu yüzden yapılmış olan bir uygulamada doğru ses kullanımı, daha fazla kullanıcıya erişmeyi arttırıyor. Peki Flutter ile yapılmış olan bir uygulamada ses dosyalarımız nasıl kullanılır gelin biraz yakından bakalım.


Uygun Paket Seçimi

Paketler, normalde yapılması uzun sürecek ve geliştiriciyi yorması muhtemel işlemlerin tek bir seferde yazılıp birçok kişi tarafından kullanılabilmesini sağlayan araçlardır. Flutter için yazılmış olan birçok pakete pub.dev adresinden erişmek mümkün. Bizde şimdi ses dosyalarımızı kullanmak için bu adresten yararlanacağız. Arama kısmına ‘audio player’ yazalım ve ilk çıkan pakete girelim.


Paket Seçimi

blue-fire.xyz tarafından yayınlanmış olan ‘audioplayers’ paketi yüksek kullanıma ve popülerliğe sahip. Paket sayfasında biraz gezindikten sonra görüyoruz ki bu paket ile

  • İnternetteki herhangi bir dosyadan
  • Kullanıcının cihazında bulunan ses dosyalarını
  • Flutter projesindeki assets klasörü içinden
  • Bir byte dizisi biçimindeki sesi 

çalabiliriz. Biz projemiz içinde bulunan asset klasöründeki ses dosyalarımızı kullanmayı öğreneceğiz.


Paket Kurulumu

Paketimizi kurmak için ‘Installing’ kısmına gelelim. Burada görmüş olduğunuz gibi 2 tane basit adım bulunmakta,


Kurulumun 1.adımı

İlk adımda ‘pubspec.yaml’ dosyasında bulunan ‘dependencies’ kısmına audioplayers satırını eklemek. Ekledikten sonra tahmin ettiğiniz gibi ‘Pub Get’ diyerek yayınlayacağız. Yalnız burada hep yaptığımız uyarıyı tekrar yapmakta fayda var. Pubspec.yaml dosyasında girintilerin çok büyük önemi vardır. Bu yüzden satır ekleme işleminde yukarıdaki hiyerarşiyi bozmamakta fayda var.


Kurulumun 2.adımı

Projemize gelip ‘Get Dependencies’ dedikten sonra sıra kütüphanemizi eklemekte.


Kurulumun 3.adımı

Henüz kullanmadığımız için ‘Kullanılmayan yükleme’ hatası veriyor ama kullanmaya başladıktan sonra bu hatayı da gidermiş olacağız.


Paketin Projede Kullanımı

Şimdi tekrar ‘ReadMe’ sayfasına gelelim. Sayfayı biraz incelersek eğer ‘Audio Cache’ kısmını görmüş olacağız. Bu kısım bize paketimizi assets klasörü ile nasıl kullanacağımızı söyleyecek.


AudioCache

‘here’ kısmına tıklayalım ve kurulum bilgilerine erişelim.


Kullanımın 1.aşaması

Açılan Github sayfasında öncelikle bir değişken oluşturmamız, ardından oluşturduğumuz değişkenin ‘play’ metodunu kullanarak assets dosyamızdaki şarkının adını yazmamız gerektiği söyleniyor. O halde bizde bu adımları projemize uygulayalım. Fakat uygulamadan önce proje dosyalarımızda assets adında bir klasör oluşturup içine kullanmak istediğimiz müziği ekleyelim.


Kullanımın 2.aşaması

Şimdi ses dosyamızı ‘pubspec.yaml‘ dosyası aracılığı ile Flutter’a tanıtalım.


Kullanımın 3.aşaması

Şimdi sıra sesimizi kullanmaya geldi. Bunun için yönergede de yazdığı gibi önce bir değişken oluşturmalı, ardından play metoduyla birlikte butonumuza atamalıyız.


Kullanımın 4.aşaması

Final

Artık geldik işin en güzel tarafına. Bakalım yaptığımız bunca işlemden sonra uygulamamız istediğimiz şekilde çalışacak mı? İsterseniz bir test edelim.


Test Aşaması

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

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

class SesKullanimi extends StatelessWidget {
  SesKullanimi({Key? key}) : super(key: key);

  final oynatici = AudioCache();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextButton(
              onPressed: () {
                oynatici.play('jane-maryam.mp3');
              },
              style: ButtonStyle(
                overlayColor: MaterialStateColor.resolveWith(
                    (states) => Colors.transparent),
              ),
              child: Center(
                child: Container(
                  width: 500,
                  height: 500,
                  alignment: Alignment.center,
                  child: Text(
                    'SYNTA-X.COM',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 50,
                      color: Colors.black,
                    ),
                  ),
                  color: Colors.blue,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Mükemmel ! Her şey sorunsuz bir şekilde çalışıyor. Bundan sonra farklı yazı fontları veya resimler kullanıp uygulamanıza estetik katabilir veya kendinizi seslerin iletişim gücüne bırakabilirsiniz. Seçim sizin !

İnternet sitesi https://synta-x.com
Yazı oluşturuldu 19

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.