Ön uç web geliştiricisi olarak başladım ve sonra Çarpıntı geliştirici. Flutter'ı daha kolay benimsememe yardımcı olan bazı kavramlar olduğunu düşünüyorum. Farklı olan bazı yeni kavramlar da vardı.

Bu makalede, deneyimlerimi paylaşmak ve kavramların nasıl aktarıldığını ve yeni kavramların nasıl öğrenilebilir olduğunu göstererek bir ekosistemi diğerine tercih etme konusunda felç hisseden herkese ilham vermek istiyorum.

Aktarılan Kavramlar

Bu bölüm, ön uç web geliştirme ve Flutter'ın benzediği yerleri gösterir. Flutter'ı başlatırsanız, zaten sahip olduğunuz ve sizin için bir avantaj olan becerileri açıklar.

1. Kullanıcı Arayüzlerini (UI'ler) Uygulamak

Belirli bir kullanıcı arabirimini ön uç web'de uygulamak için HTML öğeleri oluşturur ve bunları CSS ile biçimlendirirsiniz. Kullanıcı arabirimlerini Flutter'da uygulamak için widget'ları ve onlarla stil özellikleri.

CSS gibi, Color Dart'ta sınıf “rgba” ve “hex” ile çalışır. Ayrıca CSS gibi, Flutter da boşluk ve boyut birimleri için piksel kullanır.

Flutter'da, neredeyse tüm CSS özellikleri ve değerleri için Dart sınıfları ve numaralandırmalarımız var. Örneğin:

Flutter'da ayrıca Column ve Row widget'lar. Bunlar için Flutter eşdeğeri display: flex CSS'de. Yapılandırmak için justify-content ve align-items kullandığın stiller MainAxisAlignment ve CrossAxisAlignment özellikleri. ayarlamak için flex-grow stil, etkilenen alt öğeyi/parçacıkları sarın. Column/Row, içinde Expanded or Flexible.

Gelişmiş kullanıcı arayüzleri için Flutter, CustomPaint sınıf - ne olduğunu Flutter için Canvas API web geliştirme içindir. CustomPaint herhangi bir kullanıcı arayüzünü istediğiniz gibi çizmeniz için size bir ressam verir. genellikle kullanacağınız CustomPaint gerçekten karmaşık bir şey istediğinizde. Ayrıca, CustomPaint bir widget kombinasyonu çalışmadığında gidilecek yoldur.

2. Çoklu Geliştirme Ekran Çözünürlükleri

Web siteleri tarayıcılarda, mobil uygulamalar ise cihazlarda çalışır. Hal böyle olunca her iki platform için de geliştirme yaparken platformu göz önünde bulundurmalısınız. Her platform aynı özellikleri (kamera, konum, bildirimler vb.) farklı şekillerde uygular.

Bir web geliştiricisi olarak, web sitenizin yanıt verebilirliğini düşünürsünüz. Web sitenizin daha küçük ve daha geniş ekranlarda nasıl göründüğünü ele almak için medya sorgularını kullanırsınız.

Mobil web geliştirmeden Flutter'a geçerken, MediaQuery yardımcı sınıf.  MediaQuery sınıf size mevcut cihazı verir orientation (manzara veya portre). Ayrıca size mevcut görünümü verir size, devicePixelRatio, diğer cihaz bilgilerinin yanı sıra. Bu değerler birlikte size mobil cihazın yapılandırması hakkında bilgi verir. Bunları, mobil uygulamanızın çeşitli ekran boyutlarında nasıl göründüğünü değiştirmek için kullanabilirsiniz.

3. Hata Ayıklayıcılar, Düzenleyiciler ve Komut Satırı Araçları ile Çalışma

Masaüstü tarayıcılarda geliştirici araçları bulunur. Bu araçlar arasında bir denetçi, bir konsol, bir ağ monitörü vb. bulunur. Bu araçlar web geliştirme sürecini iyileştirir. Flutter'ın da kendi DevTools. Diğer özelliklerin yanı sıra widget denetçisi, hata ayıklayıcısı, ağ monitörü vardır.

IDE desteği de benzerdir. Visual Studio Code, web geliştirme için en popüler IDE'lerden biridir. VS Code için web ile ilgili birçok uzantı vardır. Flutter da VS Kodunu destekler. Yani geçiş yaparken IDE'yi değiştirmenize gerek yok. VS Code için Dart ve Flutter uzantıları vardır. Flutter, Android Studio ile de iyi çalışır. Hem Android Studio hem de VS Code, Flutter DevTools'u destekler. Bu IDE entegrasyonları, Flutter takımını eksiksiz hale getirir.

Çoğu ön uç JavaScript çerçevesi, kendileriyle birlikte gelir. komut satırı arabirimi (CLI). Örneğin: Açısal CLI, React Uygulaması Oluşturun, Vue CLI'si, vb. Flutter ayrıca özel bir CLI. Flutter CLI, Angular projeleri oluşturmanıza, oluşturmanıza ve geliştirmenize izin verir. Flutter projelerini analiz etmek ve test etmek için komutlara sahiptir.

Yeni Olan Kavramlar

Bu bölüm, web geliştirmede daha kolay olan veya mevcut olmayan Flutter'a özgü kavramlardan bahseder. Flutter'a girerken aklınızda bulundurmanız gereken fikirleri açıklar.

Kaydırma Nasıl Yapılır?

Web için geliştirme yaparken, varsayılan kaydırma davranışı web tarayıcıları tarafından işlenir. Yine de, kaydırmayı CSS ile özelleştirmekte özgürsünüz (kullanarak overflow).

Flutter'da durum böyle değil. Widget grupları varsayılan olarak kaydırma yapmaz. Widget gruplarının taşabileceğini hissettiğinizde, kaydırmayı proaktif olarak yapılandırmanız gerekir.

Flutter'da, kaydırmaya izin veren özel widget'ları kullanarak kaydırmayı yapılandırırsınız. Örneğin: ListView, SingleChildScrollView, CustomScrollView, vb. Bu kaydırılabilir widget'lar, kaydırma üzerinde size büyük kontrol sağlar. İle birlikte CustomScrollView, uygulama içinde uzman ve karmaşık kaydırma mekanizmalarını yapılandırabilirsiniz.

Flutter tarafında, kullanarak ScrollViews kaçınılmazdır. Android ve iOS var ScrollView ve UIScrollView kaydırmayı işlemek için. Flutter'ın, oluşturma ve geliştirici deneyimini birleştirmenin bir yoluna ihtiyacı var. ScrollViews, fazla.

Belge yapısının akışı hakkında düşünmeyi bırakmak ve bunun yerine uygulamayı bir cihazın yerel boyama mekanizmaları için açık bir tuval olarak düşünmek yardımcı olabilir.

2. Geliştirme Ortamınızı Ayarlama

En basit web sitesini oluşturmak için bir dosya oluşturabilirsiniz. .html uzantısını seçin ve bir tarayıcıda açın. Flutter o kadar basit değil. Flutter'ı kullanmak için Flutter SDK'yı yüklemiş olmanız gerekir. ve Flutter'ı bir test cihazı için yapılandırdı. Bu nedenle, Android için Flutter'ı kodlamak istiyorsanız, şunları yapmanız gerekir: Android SDK'yı kurun. Ayrıca en az bir Android cihazı (bir Android Emülatörü veya fiziksel bir cihaz) yapılandırmanız gerekecektir.

Bu, Apple cihazları (iOS ve macOS) için de geçerlidir. Flutter'ı bir Mac'e yükledikten sonra, daha ileri gitmeden önce Xcode'u kurmanız gerekir. Flutter'ı iOS'ta test etmek için en az bir iOS simülatörüne veya bir iPhone'a da ihtiyacınız olacak. Masaüstü için Flutter da önemli bir kurulum. Windows'ta, Windows Geliştirme SDK'sını Visual Studio ile kurmanız gerekir (VS Code değil). Linux'ta daha fazla paket kuracaksınız.

Flutter, ekstra kurulum olmadan tarayıcılarda çalışır. Sonuç olarak, hedef cihazlar için ekstra kurulumu gözden kaçırabilirsiniz. Çoğu durumda, mobil uygulama geliştirme için Flutter kullanırsınız. Bu nedenle, en azından Android veya iOS kurmak istersiniz. Flutter ile birlikte gelir flutter doctor emretmek. Bu komut, geliştirme kurulumunuzun durumunu bildirir. Bu şekilde, gerekirse kurulumda ne üzerinde çalışacağınızı bilirsiniz.

Bu, Flutter'daki gelişimin yavaş olduğu anlamına gelmez. Flutter güçlü bir motorla birlikte gelir. bu flutter run komutu, kodlama sırasında test cihazına sıcak yeniden yüklemeye izin verir. Ama sonra basmanız gerekecek R aslında sıcak yeniden yüklemek için. Bu bir sorun değil. Flutter'ın VS Kodu uzantısı dosya değişikliklerinde otomatik olarak yeniden yüklemeye izin verir.

3. Paketleme ve Dağıtım

Web sitelerini dağıtmak, mobil uygulamaları dağıtmaya kıyasla daha ucuz ve daha kolaydır. Web sitelerini dağıttığınızda, bunlara alan adları aracılığıyla erişirsiniz. Bu alan adları genellikle yıllık olarak yenilenir. Ancak bunlar isteğe bağlıdır.

Günümüzde birçok platform ücretsiz barındırma hizmeti sunmaktadır.

Örneğin: DigitalOcean size ücretsiz bir alt alan adı verir .ondigitalocean.com.

Bir dokümantasyon web sitesi oluşturuyorsanız bu alan adlarını kullanabilirsiniz. Markalaşma konusunda endişelenmediğiniz zamanlarda da kullanabilirsiniz.

Flutter'ın mobil uygulamalarla dolu dünyasında, çoğu durumda uygulamanızı genellikle iki yere dağıtırsınız.

Bu platformların her birinde bir geliştirici hesabı açmanız gerekir. Bir geliştirici hesabına kaydolmak için bir ücret veya abonelik ve kimlik doğrulaması gerekir.

App Store için Apple Developer programına kaydolmanız gerekir. bakım yapman gerekiyor yıllık 99$ abonelik. Google Play için bir tek seferlik 25$ ödeme hesap için.

Bu mağazalar, incelenen her uygulamayı yayınlanmadan önce inceler.

Ayrıca, kullanıcıların uygulama güncellemelerini kolayca tüketmediğini de unutmayın. Kullanıcılar, yüklü uygulamaları açıkça güncellemelidir. Bu, herkesin bir web sitesinin en son dağıtılan sürümünü görebildiği web'in aksine.

Dağıtılan uygulamaları yönetmek, dağıtılan web sitelerini yönetmekten nispeten daha zordur. Ancak bu sizi korkutmamalı. Sonuçta, her iki mağazada da dağıtılan milyonlarca uygulama var, böylece sizinkini de ekleyebilirsiniz.

Flutter Üzerine Ek Düşünceler

Flutter, masaüstü, mobil veya web uygulamaları oluşturmak için platformlar arası bir araçtır. Flutter uygulamaları piksel açısından mükemmeldir. Flutter, hedef platformdan bağımsız olarak her uygulamada aynı kullanıcı arayüzünü boyar. Bunun nedeni, her Flutter uygulamasının Flutter motorunu içermesidir. Bu motor, Flutter UI kodunu işler. Flutter, her cihaz için bir tuval sağlar ve istediğiniz gibi boyamanıza olanak tanır. Motor, olayları ve etkileşimleri yönetmek için hedef platformla iletişim kurar.

Flutter etkilidir. Yüksek performans seviyelerine sahiptir. Bunun nedeni Dart ile oluşturulmuş olması ve Dart'ın özelliklerinden yararlanmasıdır.

Bu pek çok avantajıyla Flutter, birçok uygulama için iyi bir seçimdir. Platformlar arası uygulamalar, üretim ve bakım sırasında paradan ve zamandan tasarruf sağlar. Ancak Flutter (ve platformlar arası çözümler) bazı durumlarda optimum bir seçim olmayabilir.

Kullanıcıların uygulamanızla birlikte platform geliştirici araçlarını kullanmasını istiyorsanız Flutter'ı kullanmayın. Buradaki platform geliştirici araçları, Android geliştirici seçenekleri gibi cihaza özel araçlar anlamına gelir. Ayrıca tarayıcı geliştirici araçlarını da içerir.

Tarayıcı uzantılarının web sitesiyle etkileşime girmesini bekliyorsanız, Flutter for web'i kullanmayın.

Ayrıca, içerik ağırlıklı web siteleri için Flutter kullanmayın.

Sonuç

Bu, ön uç web geliştirmeden Flutter ile çalışmaya kadar uzanan becerilerin bir incelemesiydi. Bir web geliştiricisi olarak öğrenmeniz gereken uygulama geliştirme kavramlarını da tartıştık.

Flutter, web geliştiricileri için daha basittir çünkü ikisi de UI'lerin uygulanmasını içerir. Flutter'ı başlatırsanız, size iyi bir geliştirici deneyimi sunduğunu göreceksiniz. Flutter'ı bir deneyin! Mobil uygulamalar oluşturmak için kullanın ve elbette ne yaptığınızı sergileyin.

Şerefe!