Flutter Web uygulamasını Peanut ile Github Pages’e Dağıtma
Giriş
2018 Aralık’ta Hummingbird projesi Londra’da ki Flutter Live etkinliğinde duyuruldu. Sonrasında ise 2019 Mayıs’ta, Google IO 2019 etkinliğinde ise Flutter for Web’le tanıştık. Flutter Web ile ufak ufak denemelerim oldu. Github Pages ile de statik web sitelerinizi ücretsiz dağıtabiliyorsunuz. Bu yazımda bu akışı baştan sona anlatmak istedim, iyi okumalar.
Nasıl yüklenir?
Minimum Flutter 1.5.4 ve Dart 2.3 sisteminizde kurulu olmalı. Editörünüzdeki Dart ve Flutter eklentilerini de güncelleyin. Flutter’ı güncellemek için bu komutu kullanabilirsiniz.
flutter upgrade
Web Projesi Yaratmak
Visual Studio Code’un komut paletinde (Ctrl + Shift + P) Flutter: New Web Project’i seçerek web uygulamamızı yaratıyoruz.
Projemizin yapısı böyle. Fark ettiyseniz 2 tane main dosyamız var. Bizim işimiz lib’in içindeki main.dart ile.
Bu bildiğimiz Flutter kodu, tek küçük bir fark ile. Üstteki importa bakarsanız flutter değil flutter_web yazdığını görürsünüz. Bu henüz Flutter Web’in, ana Flutter projesi ile birleşmediğini gösteriyor.
Normal Flutter projelerinde gelen counter örneğini kopyalayalım.
lib/main.dart
Butonumuzdaki artı ikonu gözükmüyor. Bu sorunu halledip güzel de bir font ekleyip Github Pages’e dağıtıma geçelim.
web klasörüne assets isimli bir klasör açıp, içinde de FontManifest.json isimli bir dosya açalım.
FontManifest.json dosyası
MaterialIcons ailesi tahmin ettiğiniz gibi material ikonlar için, diğeri ise opsiyonel. Bu benim kendi seçtiğim bir font. https://fonts.google.com/ adresinde bulunabilir. Anton-Regular.ttf dosyasını veya herhangi bir fontu indirdikten sonra web/assets klasörüne kopyalayıp, sonra da FontManifest.json’da böyle ekleyebilirsiniz. Daha sonrasında main.dart’ta fontFamily’i Anton olarak belirliyorum, gelmişken brightness’ı da değiştiriyorum.
Github Pages’e dağıtmak
Evet buraya kadar Flutter Web ile ufak bir deneme yaptık, ikonları hallettik ve bir de font ekledik. Artık bu uygulamamızı Github Pages’a yollayabiliriz.
Github’ta bir repo yarattım. Sonrasında ise projemin içindeyken
git init
Yazıp git reposunu başlatıyorum. Github’taki repoyu bu localdeki repoma bağlıyorum
git remote add origin https://github.com/mirkancal/medium_article_peanut.git
Değişikliklerimi kaydedip commitliyorum ve Github’a yolluyorum.
git add .
git commit -m “initial”
git push origin master
Peanut
Github Pages sizin için gh-pages branchini githubkullaniciadin.github.io/repoadi ücretsiz host ediyor. Bunun için öncelikle Flutter Web projemizi inşa etmemiz gerek. Daha sonrasında build klasörünü gh-pages branchine kopyalayıp Github’a atabiliriz.
Fakat projenizi sürekli güncellediğinizi düşündüğünüzde bu iş işkenceye dönüşüyor. Peanut burada devreye giriyor. Peanut yazıyorsunuz ve gh-pages branchinize projenizin çıktılarını atıyor ve commitliyor. Size de sadece bunları pushlamak kalıyor.
pub global activate peanut
ile peanut’ı kuruyoruz. Sonrasında peanut yazmamız yeterli. İstersek -m ile varsayılan commit mesajını değiştirebiliriz.
peanut -m “my first build”
Eğer debug mode’ta çalışmakta olan projenizi durdurmazsanız üstteki komut döngüye girebilir. Sonrasında ise gh-pages branchine geçmeden bunları şu komutla pushlayabiliriz.
git push origin — set-upstream gh-pages
Her şey başarı ile sonuçlandığında, environment kısmında 1 yazdığını göreceksiniz.
Repounun linki: https://github.com/mirkancal/medium_article_peanut/
Yaptığımız uygulama: http://mirkancal.github.io/medium_article_peanut/
Bir başka Flutter Web projesi: https://www.mirkancaliskan.com/coin_web/
Bu ilk Flutter yazımda geri bildirimleri için
’e teşekkür ederim. Sorularınızı Twitter @mirkancal ve linkedin üzerinden yazabilirsiniz, sağlıcakla kalın.
