Flutter Web uygulamasını Peanut ile Github Pages’e Dağıtma

Mirkan
Mirkan
Jun 9 · 3 min read

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.

project directory

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

Flutter Web

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.

final

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.

Github ekran görüntüsü


Bu ilk Flutter yazımda geri bildirimleri için Muhammed Salih Guler’e teşekkür ederim. Sorularınızı Twitter @mirkancal ve linkedin üzerinden yazabilirsiniz, sağlıcakla kalın.

Mirkan

Written by

Mirkan

İzmir’den Flutter mühendisiyim. Stackoverflow’da Flutter sorularını cevaplamayı seviyorum.

Flutter Türkiye

Flutter SDK için Türkçe ve İngilizce kaynaklarin yayinlayan topluluk

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade