Adım Adım Flutter’da Galeriden Fotoğraf Seçme Nasıl Yapılır?

Merhabalar. Bugünkü yazımda sizlere Flutter uygulamanıza galeriden bir fotoğrafı nasıl seçebileceğimizi anlatacağım.

Galeriden bir fotoğraf seçip bunu ekranımızda görmek için iki pakete ihtiyacımız var. Öncelikle kullanıcıdan izin almalıyız. Daha sonra fotoğrafı seçmeliyiz. Kullanıcıdan nasıl izin alacağımızla alakalı yazdığım yazıya buradan ulaşabilirsiniz.

KURULUM

Paketimizi buradan indiriyoruz ve pubspec.yaml dosyasına ekliyoruz. pubspec.yaml dosyasına ekleme yaptıktan hemen sonra flutter clean daha sonra flutter pub get yapmayı unutmayınız.

IOS cihazlar üzerinde çalışıyorsak info.plist dosyasına NSPhotoLibraryUsageDescription eklemek zorundayız. <key> olarak bunu ekliyoruz ve <string> olarak da bir açıklama yapıyoruz. Bunu yapmamızın nedeni kullanıcıya neden bu izni istediğimizle alakalı bir açıklama yapmaktır. Bunu yapmadığımız takdirde ios cihazlarda galeriye erişim sağlayamayız.

BAŞLAYALIM

Uygulamamıza gelecek olursak, ekranda bir tane buton bir tane de fotoğrafı yerleştireceğimiz alan yapacağım. Alttaki kod parçası ekranımı çizen ana Widget’ım.

imagePicker paketini kullanmak için class içerisinde ImagePicker class’ından bir değişken oluşturacağım. Galeriden bir fotoğraf seçtiğimiz zaman bunun bir path değeri olacak. Bu path değerinin de class tarafından bilinmesi için şimdilik boş bir string değeri oluşturuyorum.

showImageWidget() diye tanımladığım Widget’ı çizmeye başlayalım.

Burada dikkat ettiğim nokta selectedImagePath değerim boş ise yani bir fotoğraf seçilmemişse ekran boş kalmasın diye bir Icon yerleştirdim. Eğer ki kullanıcı fotoğraf seçerse selectedImagePath değerim artık boş olmayacak ve Image.file Widget’ını çizecektir. Image.file, Image.network gibi birkaç tane Image Widget’ı olduğunu kodlarken görüyoruz. Image.file kullanmamızın sebebi telefonun kendi dosyaları içerisinden bir Image çizeceğimizden kaynaklanmaktadır. Şimdi selectImageButtonWidget() olarak tanımladığımız butonumuzu kodlayalım.

Butondaki onTap kodunu kodlarken kullanıcıdan gerekli izinlerin alınmış olduğunu kabul ediyorum. Eğer ki izinleri henüz kullanıcıdan istemediyseniz kod çalışmayacaktır. Önce izin istemeniz gerekir. İzinlerin nasıl istendiğiyle alakalı yazıya buradan ulaşabilirsiniz.

Yazmış olduğumuz kodda en başta ImagePicker class’ından tanımlamış olduğumuz picker değişkenini kullanmamız gerekiyor. picker.pickImage ile kullanıcının storage’ına erişiyoruz, await ile kullanıcı bir işlem yapmadan alt bloğa geçmesini engellemiş oluyoruz. Kullanıcının iki ihtimali bulunuyor. Ya hiçbir şey seçmeyecek ya da herhangi bir şeyler seçecek. Seçmediği durumda image değişkenimiz null geliyor. Bu durumda herhangi bir şey yapmıyoruz. Eğer ki bir fotoğraf seçilmişse seçilen fotoğrafın değerleri image değişkenine atanıyor. image.path ile biz bu fotoğrafın yolunu almış bulunuyoruz. Bu yolu da ilk başta tanımlamış olduğumuz String değişkenine atıyoruz ve setState ile ekranı yeniden çiziyoruz. Bu sayede showImageWidget artık Image.file Widget’ını çiziyor.

Flutter’da galeriden bir fotoğraf seçme işlemini açıklamaya ve anlatmaya çalıştım. Uygulamanın kaynak kodlarına buradan ulaşabilirsiniz. İyi çalışmalar dilerim.