Flutter: Native Kamera Yönlendirme ve Galeriden Fotoğraf Seçme

Muhammet ÖMER
HardwareAndro
Published in
3 min readAug 26, 2020
Photo by Josh Power on Unsplash

Herkese merhaba 👋 Bu yazımda sizlere Flutter’da, fotoğraf çekimi için telefonunuzun native kamera uygulamasına nasıl yönlendirebileceğinizi veya galerinizden nasıl fotoğraf seçebileceğinizi göstereceğim.

Projenizde, kamera işlemlerini çok yoğun olarak kullanmıyorsanız Flutter’ın camera eklentisini kullanmanızı önermiyorum. Henüz hazır olmadığını düşünüyorum. Çok fazla özellik sunamıyor ne yazık ki. Bu özelliklere örnek vermek gerekirse telefonunuzun flaş özelliği dahil değil, otomatik focus veya tıklanıldığında focus özelliği mevcut değil. Zoom özelliği de bulunmuyor. Bu gelişmeleri takip etmek isterseniz buraya tıklayarak ilgili alana ulaşabilirsiniz.

Yukarıda bir ifade kullandım “…kamera işlemlerini çok yoğun olarak kullanmıyorsanız…” burada yoğun işleme örnek vermek gerekirse Instagram uygulamasında bulunan kamera alanını hepimiz az çok görmüş veya kullanmışızdır. Burada renk efektleri, boomerang özelliği ve benzeri bir çok özellik mevcut.

Bizim tek isteğimiz fotoğraf çekip yüklemek ise image_picker kütüphanesini kullanarak telefonumuzda bulunan kamera uygulamasına yönlendirerek fotoğrafı çektikten sonra yükleyebiliriz. Evet bu kadar basit.

Haydi Başlayalım 🚀

Projemizde bulunan pubspec.yaml dosyamızı açalım. Ardından dependencies alanına image_picker isimli kütüphanemizi ekleyelim.

Güncel sürümü için lütfen image_picker kütüphanesinin bulunduğu websiteyi ziyaret ediniz.

pubspec.yaml

Dikkat etmemiz gereken birkaç husus bulunuyor.

  • Android :

Android API sürümü 29+ ise projemiz içerisindeki AndroidManifest.xml dosyamızda <application> etiketi içerisine android:requestLegacyExternalStorage="true" eklenmelidir.

Daha fazla detay için Storage updates in Android 11 dokümanını inceleyebilirsiniz.

AndroidManifest.xml
  • iOS :

iOS cihazları için bu ifadeleri projemizde bulunan ios > Runner > Info.plist dosyamıza eklememiz gerekmektedir.

<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string><key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string><key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

Info.plist

UI tarafında geliştirmelerimizi tamamlıyoruz.

Örnek olması açısından hızlı bir tasarım oluşturdum.

uygulama kullanıcı arayüzü

Fonksiyonu Oluşturalım 📷

Projemize değişken olarak aşağıdaki satırı ekleyelim.

değişken

onImageButtonPressed Fonksiyonu

Bu fonksiyonumuz ImageSource tipinde bir parametre içeriyor. Bu parametre ise Enum cinsinden oluşmaktadır. İki seçenek bulunmakta:

  • camera: Cihazın kamerasını açarak kullanıcının yeni bir fotoğraf çekmesine izin verir.
  • gallery: Cihazın fotoğraf galerisini açarak kullanıcının bir fotoğraf seçmesine izin verir.

getImage Fonksiyonu

Bu fonksiyonumuz ile birlikte kamera ile çekilen veya galeriden seçilen fotoğrafı elde etmemizi sağlıyor.

Bu fonksiyon içerisinde yapmak istediğimiz işlemleri gerçekleştirebiliriz. Örneğin PickedFile tipinde bir liste oluşturduktan sonra seçilen fotoğrafları bu listeye ekleyebiliriz.

fonksiyon

Son olarak oluşturduğumuz fonksiyonu, butonlara bağlandıktan sonra kullanabiliriz.

butonlar

Sonuç 🎉

Uygulamamız aşağıdaki gibi sonuç vermektedir.

uygulama sonucu

Buraya kadar zahmet göstererek, yazıyı okuyarak zaman ayırdığınız ve sabırla sonuna kadar geldiğiniz için teşekkür ederim, umarım faydalı olmuştur.

Bana aşağıdaki adreslerden ulaşabilirsiniz:

--

--

Muhammet ÖMER
HardwareAndro

Computer Engineer | Mobile Application Developer | Traveler