• Twitter
  • Instagram
  • slack-icon-black_edited_edited_edited
  • development_düzenlendi_düzenlendi
  • Gri LinkedIn Simge

© 2020 by mobiler.dev

Flutter ile Web Uygulaması Geliştirmek

iOS ve Android platformlar için native performanslı mobil uygulamalar geliştirme konusunda son ayların popüler uygulama geliştirme kiti Flutter ile ciddi bir başarı elde eden Google, aynı başarıyı sadece mobilde değil, masaüstü ve web alanlarda da yakalamak istiyor.


Ben de bu yazıda sizlere (daha önceleri Hummingbird olarak da anılan) "Flutter’ın Web Desteği" konusunda bilgiler sunacak ve sade bir kurumsal websitesinin nasıl hazırlanabileceği konusunda ufak ipuçları sunacağım.



Öncelikle bu web desteğinin henüz beta sürümde olduğunu hatırlatmak isterim. Ancak Flutter için paket edinme kaynağı olan pub.dev üzerindeki ihtiyaç duyulabilecek bir çok paketin web desteği için uyumlu hale gelmesiyle, yakın zamanda kararlı sürüme geçileceğini düşünüyorum. (Birkaç hafta önce Firebase ile direk bağlantı kurabilme imkanının sağlanması, bir çok Flutter geliştiricisinin iştahını artırdı)


Flutter web desteği için genel işleyiş şu şekilde: mobil uygulama geliştirmede yaptığımız gibi Dart programlama dili ile uygulamamızı yazmaya başlıyoruz, kodlama bitince “build” ederek, Flutter bizim için HTML, CSS JavaScript vb web dosyalarını oluşturuyor.  


O zaman vakit kaybetmeden hemen başlayalım:

İlk olarak web destekli bir proje oluşturmak için Flutter’ın güncel beta kanalına geçip, ardından web desteğini kendimizde aktif hale getirmemiz gerekiyor. Bunun için aşağıdaki üç komutu kullanıyoruz:


flutter channel beta

flutter upgrade

flutter config --enable-web


Bu işlemi başarıyla tamamladıysak flutter devices komutunu yazdığımızda mobil simulatör / cihazımıza ilave olarak aşağıdaki satılar da karşımıza çıkacaktır.

Chrome • chrome • web-javascript • Google Chrome 78.0.3904.108 Web Server • web-server • web-javascript • Flutter Tools


(Bu işlem sonrası kullandığınız kod editörünü kapatıp açmayı unutmayınız.)

Ben bu yazıda kod editörü olarak Visual Studio Code kullanacağım. Yeri gelmişken şunu da hatırlatmak gerekir ki Flutter’ı cazip kılan özelliklerden HotReload (anlık yenileme) web desteği için geçerli değil; HotRestart ile yetinmek zorundayız.


Artık web desteğimiz olduğuna göre, mobil uygulama projesi oluşturur gibi yeni bir proje oluşturabiliriz.


flutter create projeismi


(Mevcut bir projeye web desteği sağlamak istersek; ana proje dizininde  bu komutu çalıştırmamız yeterli: flutter create )


Malumunuz yeni projeler “Counter” isimli state kavramını basitçe anlatmayı hedefleyen örnek ile açılıyor.


Proje dizinini incelediğimizde ise farklı olarak “web” isimli klasörün ve içeriğinin eklenmiş olduğunu görüyoruz.



Dilersek projeyi bu varsayılan başlangıç haliyle hata ayıklama modunda çalıştırırsak karışımıza şöyle bir ekran gelecektir. Web için debug komutu:

flutter run -d chrome


Bu aşamada projemizi web desteğiyle çalıştırmış olduk. Yayınlama aşamasına kadarki süreç: Dart kodları, widget’lar, paketler vesaire... tamamen size kalmış. Ama yayınlama konusu öncesinde duyarlı tasarım (responsive design) konusunda da sizlere bilgiler sunmak isterim. Çünkü mobil uygulamalarda cihazlar genel olarak yaklaşık benzer oranlara sahip çözünürlüklere sahip olmasına rağmen, web sitelerinde bu boyut kullanıcı tarafından değiştirilebildiğinden ve de sitelere masaüstü ile mobil cihazlardan erişilebildiğinden duyarlı yani esnek bir tasarım yapılması şarttır.


Her çözünürlükteki ekranda aynı tasarımı kullanmak; okunabilirlik ve kullanışlılık gibi faktörleri devre dışına bırakabilir. O sebeple bazı durumlarda çözünürlüğe göre tasarım yapmamız gerekecek.

O zaman İlk olarak projemizi görüntüleyen kişinin hangi tipteki cihaza sahip olduğunu tespit etmeye çalışalım:


Bunu tespit edebilmek için dahili özel bir komut yok; o yüzden, ya bu konuda bize yardımcı olacak paketler kullanacağız ya da kendimiz mantık yürüterek ilerleyeceğiz:

(Paket olarak https://pub.dev/packages/responsive_builder ‘ı tavsiye ederim.)


Eğer kendiniz yapacaksanız fikir vermesi açısından yine de bu paketin kodlarını bir inceleyin derim:


Peki cihazın tespiti nasıl yapılıyor, o da ekranın genişliğini tespit ederek. (Bu paket 950 pikselin üzeri genişlikteki cihazın masaüstü olarak, 600 pikselin altındakileri cep telefonu olarak, arasındakileri ise tablet olarak gruplandırmış.). Burada cihazın ne olduğu önemli değil; mesele ilgili çözünürlükte uygulamanın düzgün gözükmesi ve işlevselliğini kaybetmemesidir.


Mesela; cihazlar için enum kullanmak çok iş görür

enum DeviceScreenType {

Desktop, Mobile, Tablet, Watch

}


Ekran genişliği nasıl tespit ediliyor o konuda da bilgi vermiş olayım:

double width = MediaQuery.of(context).size.width;

// yükseklik için ise width yerine height yazmak kafi


Tablet ve telefonlar için cihaz yönünü ise şu şekilde öğrenebiliyoruz:

MediaQuery.of(context).orientation


Bunların dışında Spacer, FittedBox, Expand, AspectRatio isimli widget’ları da muhakkak inceleyin.


Aklıma gelen bir başka tavsiye: GridView kullanacaksanız sütun sayılarını cihaza göre değiştirebilirsiniz. Örneğin; galeriniz için cep telefonunda 3 sütun, tablette 4 sütun, desktop'ta ise 7-8 sütun daha hoş bir görüntü ortaya çıkarabilir.


Elbette bu widget’lar yeterli olmayacak, ilave ihtiyaçlarınız olacak bu yüzden pub.dev’de web desteği olan paket ve eklentilere de göz atmayı unutmayın.



Sadece kurumsal bir site yapıyorsak, sadece responsive_builder ve url_launcher işimizi görür diye düşünüyorum. Şimdi ise bu bilgiler ışında hazırladığım bir web sitesinin linkini sizlerle paylaşıyorum. Mümkünse siteyi masaüstü ya da dizüstü bilgisayarınızda açın ve tarayıcının çözünürlüğünü (genişliğini) değişterek inceleyin. Nerede hangi widget kullanılmış tespit ve gözlemlemekte fayda var. (İlk ipucuyu ben vermiş olayım; en üstteki beyaz Bar'ı Appbar ve Tabbar ile oluşturdum)


http://www.se-teks.com


Projemizin tasarım ve testlerini tamamladıktan sonra sıra geldi yayınlamaya. Bunun için de tek bir komutumuz var:


flutter build web


Bu komutu çalıştırınca ana dizindeki “build isimli klasörümüzün içerisinde web isimli klasör oluşacaktır. Burada oluşacak potansiyel dosyalar resimdekilerdir.



Artık yayın için son aşama ise bu dosyaları sunucuya taşımanızdır. (Dilerseniz GithubPages ve FirebaseHosting’i ücretsiz kullanabilirsiniz.)


Flutter'ın web desteğinin en kısa sürede kararlı hale gelmesini temenni ederek yazıyı sonlandırırken, web ile uyumlu paketlere göz atmanız için pub.dev'i ziyaret etmeyi unutmamanızı hatırlatmak isterim


Oluşturduğumuz projenin github linki için: https://github.com/kaiserleka/flutterweb


https://pub.dev/flutter/packages?platform=web


#flutter #web #flutterweb #hummingbird

81 görüntüleme