Flutter Eğitimi Bölüm 1: Sıfırdan bir Flutter uygulaması oluşturun

Flutter eğitim serisinin ilk bölümü olan Flutter uygulamasını oluşturmaya nasıl başlayacağınızı öğrenin.

Bölüm 1: Sıfırdan bir çarpıntı uygulaması nasıl oluşturulur

Bu eğitim dizisinde, titremeyi kullanarak bir e-ticaret mobil uygulamasının nasıl oluşturulacağı konusunda size adım adım rehberlik edeceğiz. Mobil uygulama Aviacommerce platformu için açık kaynaklı bir uygulama olacaktır. Öğretici, flutter çerçevesinin önemli kavramlarını tanıtmak için bu uygulamaya odaklanacaktı.

Bu eğitim, flutter eğitim serisinin ilk bölümü: -

  1. Sıfırdan bir çarpıntı uygulaması oluşturma
  2. Çırpınan bir uygulama nasıl düzenlenir (yakında)
  3. Çırpınan veriler nasıl düzenlenir (yakında)
  4. Flutter'taki verileri listeleme (yakında)

Devam ettikçe içerikle ilgili daha fazla güncelleme.

Blog, sayfa düzenlerinin nasıl oluşturulacağını ve adım adım nasıl tanıtılacağını açıklayacaktır. Doğruca koda dalmak için, tüm proje AviaCommerce çatısı altında Github'da mevcuttur. Çatal ve oynamaktan çekinmeyin.

AviaCommerce olarak, yazılım geliştirmeyi yeniden tanımlayan yeni çerçeveler arıyoruz. Ekibimiz, ilk beta sürümünden bu yana Flutter'daki etkinliğini yakından takip ediyor.

Google nihayet, iOS ve Android için tek bir kod tabanından güzel, yerel deneyimler yaratmak için UI araç setinin ilk kararlı sürümü olan Flutter 1.0'ı duyurdu.

Flutter, geliştirme ortamını ayarlamak için istisnai bir belgeye sahiptir. Başlamak için bu resmi kurulum kılavuzunu izleyin.

Kurulum tamamlandıktan sonra, yeni bir test projesiyle başlayabiliriz. Flutter için eksiksiz ve entegre bir IDE deneyimi sunduğundan Android Studio'yu tercih ediyorum. Android Studio, Dart için bir editör eklentisi gerektirecek.

Android Studio'yu başlatın. Yeni Flutter tabanlı projenin başlatılması için bir seçenek görebilirsiniz.

Yapılandırma listesinden Flutter Uygulamasını seçin.

İlk Flutter uygulamanız için süslü bir isim düşünün. Ya da benim gibi şeyleri adlandırmakta kötüyseniz zamanlayıcı ile gidin .

İşlemdeki son bir adım, iletişim kutusu sizden uygulama paketinin adını soracaktır.

Bu adımdan sonra, Flutter SDK uygulama için bir başlangıç ​​dizin yapısı oluşturacaktır. Tüm eylem lib klasörünün içine girer ve main.dart, uygulama yürütülmesinde başlangıç ​​noktasıdır.

Flutter'da her şey bir widget. Bir Flutter uygulamasındaki resimler, simgeler ve metinlerin tümü widget. Diğer widget'ları düzenleyen, sınırlayan ve hizalayan satırlar, sütunlar ve ızgaralar gibi mizanpaj öğeleri bile widget'lerdir.

İşin iyi yanı, Flutter SDK'nin burada uygulamanın kökeninde etkileşimli bir pencere öğesi oluşturmasıdır. İşleri biraz kolaylaştırmak için, bunu kaldıralım ve en az düzeyde tasarıma (Hello World!) Başlayalım.

Main.dart dosyanız şöyle görünmelidir:

Android öykünücüsünü başlatmak, “Hello World!” Adlı bir metin widget'ı ile açılır.

Odaktaki widget'ı burada görün. Arayüzün olmasını istediğimiz gibi ortaya çıkarmak için MaterialApp'in gövdesini değiştirmeye çalışacağız. Orijinal versiyon aşağıda gösterilmiştir.

Flutter'daki mizanpaj öğeleri (widget'ler), tek bir widget'i barındırıp barındırmadıklarına veya bir widget dizisini tutabilmelerine bağlı olarak geniş bir şekilde iki kategoriye ayrılabilir. Konteyner, Dolgu, birincisine aittir; Satır, Sütun vb. İkincinin altına düşer.

Üç tip metin widget'ı içeren bir Satır düzeni tanıtın.

Devam etmeden ve bileşenleri şekillendirmeden önce, DRY ilkesini izleyebilmek için stille başa çıkacak yeni bir widget oluşturmanız önerilir.

Üç çocuğu aynı dosyada tanımlanmış özel bir widget'la değiştirin. Main.dart dosyası şimdi olur

Zamanlayıcı şu anda biraz yumuşak görünüyor. Kullanıcı arayüzlerinde çok iyi değilim ama elimizden gelenin en iyisini yapalım. Metin widget'ini bir Konteynerin içine paketleyin ve Konteyner'i arka plan rengiyle ve öğeleri dışarıda bırakmak için dolgu malzemesiyle süsleyin.

Ayrıca, eylemleri zamanlayıcı üzerinde üç tarz metin widget'ının altındaki işlemleri gerçekleştirmek için bir düğme ekleyin. Değiştirilen kod bu gibi görünüyor.

İşte uygulamanın en ayrılmaz parçası - devlet. Durum zamanlayıcının geçerli değerini ve zamanlayıcının etkin olup olmadığını (çalışıyor) tutar. Devletin korunmasından sorumlu olan ve aynı zamanda widget ağacını oluşturmaktan sorumlu olan TimerState sınıfını buldum.

Düğmeye basmak, aktif değişkendir.

Dart, zaman uyumsuz işlemler için zarif bir modül ile birlikte geliyor. Zamanlayıcı sınıfını saniyeleri artırmamıza yardımcı olmak için kullanabiliriz. Değiştirilmiş TimerAppState aşağıda açıklanmıştır. Not: Asenkron modülde Timer sınıfı ile belirsizliği önlemek için Timer sınıfını TimerApp olarak yeniden yapılandırdık.

Uygulamanın şimdi tamamen işlevseldir. Main.dart kodunun tamamı burada bulunabilir. Umarım Flutter çerçevesinin temellerini temizler.

FLUTTERFORUM: FLUTTER DEV HANGOUT BİR YERDE BİR YER

FlutterForum, flutter geliştiricilerin takıldığı ve sohbet ve sorulara katıldığı bir yerdir.

https://flutterforum.co adresini ziyaret edin

Bu eğitimden memnun kaldıysanız, lütfen düğmesini tıklayın ve başkalarının bulmasına yardımcı olmak için paylaşın! Aşağıda yorum yapmaktan çekinmeyin.