Flutter - Başlamak Çok Kolay

Javascript çok iyi geliştiğinden, Angular kullanarak Ionic gibi hibrit mobil uygulama çerçeveleriyle karşılaştık. Ardından, React Native ve NativeScript, Java ya da Swift bilgisi olmadan yerel mobil uygulamalar yapmanıza olanak tanıyan sahneye çıktı.

İyonik başlangıçta tanrısal bir icattı, ancak React Native hızla ele geçirdi. Sonra Telerik, NativeScript'i tanıttı ancak bence bu büyük bir etki yaratmadı.

Bu seçenekler olmadan mobil uygulamalar yapabilir miyiz? Cehennem evet! Bu makale, ilk Flutter uygulamanızı oluşturmanıza yol açacaktır (eğer henüz değilse).

Flutter, Google’ın yerel uygulamalar oluşturmanıza olanak sağlayan yeni alfa projesidir. Flutter bir alfa projesi olduğundan, üretim geliştirme için önerilmemiştir. (Ama kimin umurunda? ¯ \ _ (ツ) _ / ¯)

Amaç: Flutter ve Firebase ile alışveriş listesi uygulaması.

Yüklemeniz Gerekenler

Flutter: Bu linkten flutter yükleyin. Kurulum adımlarını takip etmeyi unutmayın, ayrıca eklentileri de yükleyin. Eğer atlarsanız kıçından ağrı alabilirler

Xcode: Bir Mac kullanıyorsanız, buradaki uygulama mağazasından alabileceğiniz Xcode'a ihtiyacınız olacak. Ayrıca Flutter uygulamanızın iOS tarafını geliştirmek için Xcode'a ihtiyacınız var.

Android Studio: Flutter uygulamasının Android tarafını geliştirmek için kesinlikle buna ihtiyacın var. Buradan al.

IDE: VSCode'u ana metin editörüm olarak kullanıyorum ve bunun için Flutter & Dart eklentileri var, ancak Flutter gelişimi için Intellij IDEA'yı tavsiye ediyorum. Bir Flutter uygulaması geliştirmek için eksiksiz araçlara sahiptir. Yani buradan al.

Örnek Uygulamanın Çalışmasını Sağlama

IDE'yi başlatın ve Yeni Proje Oluştur'a tıklayın, ardından soldan Çırpınan'ı seçin.

Daha önce de söylediğim gibi, kurulum adımlarını atladıysanız, Flutter seçeneğini göremeyebilirsiniz. Öyleyse geri dön

Tavsiyeme uymayanlar için, hadi!

Kalan şeyleri istediğiniz gibi doldurun.

Java seçeneği Android dili için varsayılandır, ancak iOS dilini Swift olarak değiştirdim, çünkü Objective-C hakkında hiçbir fikrim yok;

Şimdi iskelet uygulaması ile hazırsınız. Lütfen tüm yorum satırlarını kaldırın, çünkü onları yararlı bulmuyorum. Ayrıca floatingActionButton öğesini, gövde içeriğini ve _incrementCounter yöntemini kaldırın.

Şimdi temiz bir iskeleniz var

Arayüzü oluşturalım

Sınıfta yeni bir son dize oluşturun ve Material App ve home widget başlığının yerini değiştirin. Ayrıca uygulamanın renk örneğini kırmızı olarak değiştirdim. Bunu sevdim !
Şimdi bu güzelliğe sahipsin ve koşuyor musun?

_MyHomePageState uygulamasında, düzenlenebilir metin alanı için denetleyici olan son bir TextEditingController oluşturun.

son TextEditingController _textController = new TextEditingController ();

daha sonra kullanıcı girişi ile harika şeyler yapmak için _handleSubmitted yöntemini oluşturun

void _handleSubmitted (Dize metni) {
    
}

ve son olarak, altta giriş kabı oluşturmak için bu kodu ekleyin.

Widget _createInputContainer () {
        yeni Konteyner döndür
          marj: const EdgeInsets.symmetric (yatay: 16,0),
          çocuk: yeni Satır (
            çocuklar: 
              yeni Esnek (
                çocuk: yeni TextField (
                    denetleyici: _textController,
                    onSubmitted: _handleSubmitted,
                    dekorasyon: yeni InputDecoration.collapsed (
                        hintText: "Bir şeyler ekle"),
                ),
            ),
            yeni Konteyner (
                çocuk: yeni IconButton (
                    renk: renkler
                    simge: yeni Simge (Icons.list),
                    onPressed: () {}),
            ),
            yeni Konteyner (
                çocuk: yeni IconButton (
                    renk: renkler
                    simge: yeni Simge (Icons.send),
                    onPressed: () {}),
            ),
        ],
    ),
);
}

Şimdiye kadar iyi yapıyoruz! İnput Giriş öğesi, liste düğmesi için bir kap oluşturduk ve kinda düğmesini gönderdik. onPressed fonksiyonlar şimdilik boş, daha sonra üzerinde çalışacağız.

Şimdi İskele'nin cesedine geri dönelim. Gövde kodunu şu şekilde düzenleyin:

gövde: yeni Sütun (
  çocuklar: 
      yeni Esnek (
          alt: yeni ListView.builder (
              dolgu: yeni EdgeInsets.all (8.0),
              ters: yanlış
              itemBuilder: (_, int index) => null,
              itemCount: 1,
          ),
      ),
      yeni bölücü (yükseklik: 1.0),
      yeni Konteyner (
          dekorasyon: yeni BoxDecoration (
              renk: Theme.of (bağlam) .cardColor),
          child: _createInputContainer (),
      ),
  ],
)

Tamam, şimdi vücut neredeyse hazır. Bir liste var, liste öğeleriyle girdi elemanlarımız arasında bir ayırıcı var. Gördüğünüz gibi _createInputContainer () widget'ı bir konteynerin çocuğu olarak kullandım. Kodunuzu temiz ve düzenli tutmak için güzel bir yol.

Bu noktaya kadar hepinizin iyi olduğuna inanıyorum

Dürüst olmak gerekirse, bu benim ilk eğitimim bu yüzden çok heyecanlıyım. Özel ders yolumun anlaşılabilir olup olmadığından emin değilim ama inanıyorum ki

Yapılması Gerekenler Hakkında Konuşalım

  1. _HandleSubmitted yönteminin içinde oluşturun.
  2. Gönderilen metni yeni liste öğesi olarak ekle ve görüntüle.
  3. Listemizi kullanıcı dostu interaktif liste yapın.
  4. Firebase veritabanını projeye ekleyin.

Hadi yuvarlanalım!

Kullanıcı girişini idare eden sıradan bir uygulama düşünürsek, akılda çıkan ilk şey gönderimden sonra girişi temizlemektir

void _handleSubmitted (Dize newItem) {
    _textController.clear ();
}

ve gönder düğmesini farklı

yeni Konteyner (
    çocuk: yeni IconButton (
        renk: renkler
        simge: yeni Simge (Icons.send),
        onPressed: () {
            _handleSubmitted (_textController.text) // bunu değiştir
        }),
),

Artık kullanıcılar girdiyi gönderebiliyor ve uygulama girişi ele alabiliyorsa, girişten sonra giriş alanını temizler.

Şimdi liste öğelerini görüntüleyen bir Widget oluşturacağız. İlk önce tek bir öğeyi temsil eden bir widget yaratmalıyız. Bir StatelessWidget oluşturalım ve ListItem olarak isimlendirelim ve _MyHomePageState dışına koyalım.

sınıf ListItem, StatelessWidget'ı genişletir
    Öğesini ({this.itemName});
    son Dize itemName;
    @Override
    Widget oluşturma (BuildContext bağlamı) {
    yeni Konteyner döndür
        marj: const EdgeInsets.symmetric (dikey: 10,0),
        
    );
}
}

Yeni bir Konteynırda, 10.0 değerinde simetrik dikey kenar boşluğu belirledik, aksi takdirde liste öğeleri birbirine çok yakın görünür. Güzel şeyler istiyoruz ha? Endişelenme, daha sonra daha fazla stil ekleyeceğiz.

Sonra alt öğe olarak, alt öğelerini yatay bir dizide gösteren bir Satır pencere aracı ekleyeceğiz.

çocuk: yeni Satır (
    crossAxisAlignment: CrossAxisAlignment.start, // onun güzel;)
     çocuklar: 
         yeni sütun (
             crossAxisAlignment: CrossAxisAlignment.start,
              çocuklar: 
                  yeni Konteyner (
                      child: new Metin (itemName), // bu madde adıdır
                   ),
              ],
          ),
     ],
),

Peki, bu ListItem widget'ının kodunun tamamı şöyle görünür:

sınıf ListItem, StatelessWidget'ı genişletir
    Öğesini ({this.itemName});
    son Dize itemName;
    @Override
    Widget oluşturma (BuildContext bağlamı) {
        yeni Konteyner döndür
            marj: const EdgeInsets.symmetric (dikey: 10,0),
            çocuk: yeni Satır (
                crossAxisAlignment: CrossAxisAlignment.start,
                çocuklar: 
                    yeni Esnek (
                        yeni sütun (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        çocuklar: 
                            yeni Konteyner (
                                child: new Metin (itemName),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        );
    }
}

Tamam, şimdi _MyHomePageState’e geri dönelim, bu satırı ekleyin

son Liste  _shopItems =  [];

Şimdilik, alışveriş listesi öğelerini bir Liste widget'ında tutacağız. Uygulamadan çıktıktan sonra, bu liste tekrar boş olacağını biliyorum, bu yüzden Firebase’in yapılacaklar listesine girdik why

Sevgili _handleSubmitted metodumuz bizi bekliyor. Bu noktada biraz dikkat etmesi gerekiyor.

void _handleSubmitted (Dize newItem) {
    _textController.clear ();
    if (newItem.trim (). uzunluk> 0) {
        ListItem listItem = yeni ListItem (
            itemName: newItem, // ListItem widget'ımızı sıfırlayın ve kullanıcının girişini örnek değeri olarak atayın.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Bu nesnenin iç durumunun değiştiğini çerçeveye bildirin.
    }
}

Ve bu bölümün son adımı olarak, ana widget'ımızın gövdesindeki ListView'a gidin

alt: yeni ListView.builder (
    dolgu: yeni EdgeInsets.all (8.0),
    ters: yanlış
    itemBuilder: (_, int index) => _shopItems [index], // bunu değiştir
    itemCount: _shopItems.length, // bunu değiştir
),

Bu değişiklikten önce, itemBuilder’ın işlev gövdesini boş olarak gördük. Belirtilen _shopItems dizininde liste öğesi oluşturmak için değiştirdik ve itemCount'u _shopItems uzunluğuna değiştirdik.

Bunu canlı deneyelim:

Uygulamayı test etmek için yalnızca iPhone X kullandığımı fark ettim. İşte uygulamadan Google Pixel 2 XL enstantanesi. Harika görünüyor

Sanırım ne zaman yeni bir öğe eklesem, her şey en üste ekleniyorsa dışında her şey çok iyi çalışıyor. Diğer şeyler üzerinde çalışırken çözerim

Bu yazıda bir mola vermek istiyorum çünkü okuyucuların her şeyi bir öğretici tarafından sıkılmak istemem. Buraya kadar güzel şeyler yaptığımıza inanıyorum

Bir sonraki makalede, tarih / saat uygulayacağız, öğeyi sileceğiz, ayarlanan öğeyi, Firebase veritabanını ve banyo malzemeleri veya mutfak eşyaları gibi belirli alışveriş listelerini uygulayacağız. Eğlenceli olacak ve bunun için benim sözüm var.

Daha önce de belirttiğim gibi, bu şimdiye kadarki ilk eğitimim. Bu yüzden bana yorum ve önerilerinizi söyleyin. Ben bir öğretici yazma güçlü veya zayıf yönlerimi duymak isterdim ve kendimi kesinlikle geliştiririm !!

Öğreticiyi okurken ve uygularken, kodumla veya kodunuzla ilgili herhangi bir sorun yaşarsanız, benimle temas kurmaktan çekinmeyin; size yardımcı olmak için elimden geleni yapacağım.

Instagram | E-posta