Flutter File and Image Upload Project
Herkese merhabalar, Projenizde profil fotoğrafınızı güncellemek istediniz mi? Güncellemek istediğiniz zaman fotoğraf çekip yüklediniz mi ya da yeni bir var olan fotoğrafı eklemeyi denediniz mi? Sizden bir belge yüklenmesi gereken durumda peki ya ne yaptınız? Dilerseniz bunların hepsinin cevabını bulmak için ilerleyelim..
Projelerimizde fotoğraf/dosya seçip yüklemek artık son zamanlarda sıkça kullanılan ve dikkat çeken bir özellik olarak göze çarpmakta. Flutter ile biz de rahat ve kolay bir kullanım ile ekleyebiliyoruz.
İlk adımımız projemizde iki tane paket yardımıyla bu adımları sağlayacağımız için bunları ekliyoruz. Resimlerimiz için image_picker ve dosyalarımız için file_picker kütüphanelerini kullanıyoruz.
Projemizi oluşturmaya başlıyoruz. Klasör yapımız aşağıdaki gibi model, text ve view sınıflarımızı oluşturuyoruz.
Projemize başlarken paketlerimizi ekledikten sonraki adımımız model sınıfımızı oluşturuyoruz. Burdaki model oluşturmadaki amacımız resim ve dosyalarımız tiplerini belirterek seçtiğimiz zaman nasıl doldurulacağı, ekranda nasıl değer alacağı olarak yardımcı oluyoruz.
Model
Burada model içinde oluşturduğumuz ;
imagePath : Modelimiz içerisinde imagePath degişken yardımıyla resimlerin yolunu model içinde tanımlayarak dolduruyoruz.
filePickerResults : Modelimiz içerisinde filePickerResults dosyalarımız için (örneğin pdf dosyalarınız) bunları çekmek için gerekli modeli burada dolduruyoruz.
imagePaths : Modelde doldurulan bu değişkenimiz ile galeriden seçtiğimiz çoklu resimler için List tipinde tutmamazı sağlıyor.
imageItem : XFile tipinde özgü imageItem değişkeni ile resmimizin kaynağından (kamera) çekmemize yardımcı olur.
değişkenlerimiz ile model sınıfımızı tamamlıyoruz.
View
İlk aşamada sayfamızda, resim ve dosyalarımızı yansıtma adımına geçtiğimizde ise setState ile resim/dosya açma(ekranda gösterme) temel işlemi için ara bağlantı sağlayarak ekrana yansıtma işlemini gerçekleştirerek amacımızı adımı sağlıyoruz.
void _updateItems(FilePickerNavigateModel model) {
setState(() {
imagePath = model.imagePath;
imagePaths = model.imagePaths;
filePickerResults = model.filePickerResults;
});
}Burada setState işlemimize referans değeri olarak modeli vererek, model içindeki değerlerle dolmasını sağlıyoruz ve yapacağı işlemi buna göre gerçekleştiriyor.
Dosya/resimleri seçme işlemimize gelirsek eğer _fileUpload butonu ile gerçekleştiriyoruz. Burada diğer bir önemli nokta butonu custom hale getirerek herhangi bir projenizde değişkenleri değiştirerek rahatlıkla kullanabilirsiniz.
FileUploadButton ile beraber istenilen resim ya da dosyaları istenilen kaynak dosyasında açıyor. Resim seçilecekse galeriden seçmek ya da kamera ile çekerek resim yükleyebiliyoruz. Dosya yüklenilecekse telefon dosyalarına erişim ordaki pdf veya izin verilen formattaki dosyaları yüklenebiliyor. Burada çoklu ve tekli seçim olduğu gibi dosya formatıda seçebilebiyor(.pdf , mp4 mp3 etc).
final void Function(FilePickerNavigateModel result) onResult;Buton içerisindeki onResult sayesesinde custom butonu sayfamızda çağırdığımız yerde istediğimiz sonucu vermesi için kullanıyoruz ve sayfa içerisinde buna göre yönlendirme yapıyoruz.
Anlatmak istediğim burada görüldüğü gibi onResult ile resimleri yükleme işlemini tıklanıyor. Ve seçme işlemini başlatıyoruz.
Bizim sayfamızda alttan açılan bir showModalBottomSheet ile beraber açılan ekran ile beraber kullanıcıya seçip yaptırabiliyoruz.
Ardından kullanıcı yönlendirmesine göre;
- File(Dosya) Yükleme
Dosya yükleme adımında:
şeklinde onTap içerisinde kütüphanemiz yardımıyla seçimize başlıyoruz. FilePicker.platform ile telefonumuzda kaynağa erişip ardında detaylara geçiyoruz. Seçip işleminde aloowMultiple ile çoklu dosta seçimine izin veriyor, allowedExtensions ile beraber de seçeçeğimiz dosyaların formatını sadece pdf olması gerektiğini belirtiyoruz. Ardından model dosyamıza yönelndirerek tipini ve seçilen dosyanın proje içerisinde modelimizde dolduruyoruz.
- Image (Resim) Seçme/Çekme Yüklemek
Resim çekip/yükleme adımını iki seçenekte yapıyoruz.
1. olarak telefonumuz kendisinde olan galeriden resim yükleme işlemidir. Bu adımda kütüphanemiz yardımıyla galeriye erişerek çoklu resim seçilebilmektedir. seçilen dosyayı modele kaydederek sonrasında ekranda yanstılıcaktır.
2. olarak da eğer anında fotoğraf çekip yükleme kısmında kaynak olarak kameraya erişip fotoğrafı çekip yine modele kaydederek sayfamıza yükleme işlemimizi tamamlar.
Sırasıyla butonumuza basıp aksiyonumuz ile kaynağından seçme işlemini yaptık. Şimdi sırada seçtiğimiz dosyayı sayfamızda göstermek isteriz.
Yeni widget olarak oluturduğumuz bu sayfamız içerisinde seçilen dosyaların pathını tutarak listview ile döndürerek sayfamızda yansıtma işlemini tamamlayacağız.
Burada Image.file tipinde File türü içeren seçtiğimiz dosyaları ekranda sıralı bir şekilde görme işlemini tamamlıyoruz.
Ve işlemimizi tamamlamış oluyoruz.
Peki bunlar yapılırken resim ya da dosyadının boş/null gelme durumunu düşündük mü? Eğer modelimizde değer yoksa ekranda ne olacak? Bunun için view klasörümüzde ekranda gösterdiğimiz bölümde bunu kontrolünü sağlıyoruz.
Kod bloğunda olduğu gibi resimi çekeceğimiz imagePaths ve dosya(file) çekeceğimiz filePickerResults boş olmadığı eşitliğini yaparak eşitse boş bir sizedbox atarak sayfamızda bu şekilde gösteriyoruz.
Resim (Image)
Dosya(File)
Resim ve pdf dosyalarımız butona basılıp seçildikten sonra ekranımızda şekildeki gibi gözükmektedir. Ekranda gösterim biçimi istediğimiz gibi şekillendirebiliriz. Benim örneğim sıralı liste şeklinde dosyalar yana sıralanmaktadır.
Bu yazımında sonuna gelirken herkese okuduğu için teşekkür ederim. Yazının kaynak kodlarına github linki buradan ulaşabilirsiniz. 🍀
Github:
