İçerik
- 01. Hazırlanın
- 02. Herhangi bir sorunu düzeltin
- 03. Bir IDE bulun ve yeni bir projeye başlayın
- 04. Sanal cihazları kurun
- 04. Başlangıç uygulamasını test edin
- 06. Flutter’ın widget sistemini keşfedin
- 07. İçeriğinizi düzenleyin
- 08. Bazı varlıkları yükleyin
- 09. Bitir
Yıllar boyunca, geliştirici deneyimi ve performansında sürekli iyileştirmelerle çok sayıda platformlar arası mobil çerçeve olmuştur. Google'ın Flutter'ı, pakete yeni bir eklemedir ve özellikle ilginçtir, çünkü birçok çerçevenin (React Native gibi) yaptığı gibi bir JavaScript 'köprüsü' kullanmak yerine, gerçek yerel koda göre derler.
Aşağıdaki tanıtım videosunda nasıl çalıştığı hakkında biraz bilgi edinebilir veya Flutter kullanmaya başlamak için adım adım bir kılavuz için okumaya devam edebilirsiniz. Daha fazla tavsiye için, bir uygulamanın nasıl oluşturulacağını açıklayan eğitim koleksiyonumuza bakın. Veya bir site oluşturuyorsanız, rehberlerimizden bir web sitesi oluşturucu ve web barındırma hizmeti seçin. Deponuzdan memnun değil misiniz? İşte bazı bulut depolama seçenekleri.
Bu eğiticide, Flutter'ın nasıl kurulacağına bakacağız ve geliştirmemiz için macOS kullanarak çerçeveyi kullanarak uygulama oluşturmanın temellerini keşfedeceğiz. Daha önce programladığınızı ve Bash kabuğunu nasıl kullanacağınızı bildiğinizi, ancak mobil için geliştirmemiş olabileceğinizi varsayacağız.
01. Hazırlanın
Flutter'ı kullanabilmek için birkaç şeyi indirip yüklemeniz gerekecek:
- İOS desteği için Xcode
- Android için Android Studio desteği
- Android SDK (yeni bir proje oluşturduktan sonra Android Studio üzerinden indirin)
Tüm bunlara sahip olduğunuzda, Xcode ve Android Studio'yu çalıştırın, sundukları ek bileşenleri yükleyin ve çalıştıklarından emin olmak için yeni bir proje oluşturun.
Artık Flutter'ı kullanmaya hazırsınız. Flutter SDK'yı indirin. Yüklenmesini istediğiniz yere çıkarın. MacOS'un Flutter'ı çağırdığınız her yerde bulabilmesi için yolumuzu güncellememiz gerekiyor. Aç (veya oluştur) $ HOME / .bash_profile:
sudo atom $ HOME / .bash_profile
Şimdi flutter / bin dizinini $ PATH:
dışa aktar PATH = / Kullanıcılar / simon / dev / flutter / bin: $ PATH
Bash profilini yenilemek için bir kabuk komutu çalıştırın:
kaynak $ HOME / .bash_profile
Şimdi Flutter CLI'yi kullanmaya başlayabiliriz. Yapmanız gereken ilk şey, en son sürüme sahip olduğunuzdan emin olmaktır:
02. Herhangi bir sorunu düzeltin
Bu yapıldıktan sonra Flutter, ihtiyacınız olan her şeyin doğru bir şekilde kurulup kurulmadığını kontrol eden kullanışlı bir teşhis aracı sunar. Gerçekten kullanışlıdır:
flutter doktoru
Doktorun size söylediklerini not edin ve ortaya çıkan sorunlara yanıt verin. Ek geri bildirim almak ve buna göre hareket etmek için doktoru birkaç kez çalıştırmanız gerekebilir.
Araç Flutter, Android Araç Zinciri, iOS Araç Zinciri ve Android Studio'dan memnun olduğunda, gitmekte fayda var. Şimdilik bağlı cihazlar için endişelenmeyin.
Xcode, tam olarak kurulabilmesi için kabukta bazı ekstra adımlar gerektirebilir:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer brew install --HEAD libimobiledevice brew install ideviceinstaller brew install cocoapods pod setup
Ve Android Studio genellikle lisans sözleşmesinin şunları kabul etmesini gerektirir:
flutter doctor - android lisansları
03. Bir IDE bulun ve yeni bir projeye başlayın
Artık Flutter kuruldu, bir IDE'nin çalışmasını isteyeceksiniz. Android Studio ve IntelliJ için eklentiler mevcuttur. Kendi Flutter eklentisine de sahip olan VS Code ile devam edeceğiz.
VS Code'u başlatın ve Görünüm> Komut Paleti'ne tıklayın. "Yükle" yazın ve Uzantılar: Uzantıyı Yükle işlemini seçin. "Flutter" araması yapın ve Flutter eklentisini yükleyin. Tamamlandığında, VS Code'u yeniden başlatın.
Artık geliştirmeye başlamaya hazırız. Flutter: New Project seçeneğini seçerek Komut Paleti aracılığıyla yeni bir proje başlatın. Projenizi adlandırın, nereye kaydedeceğinizi seçin ve VS Code, yeni projeyi oluşturmak için Flutter'ı çağıracaktır.
04. Sanal cihazları kurun
Projemizi test etmek için, bir cihaz simülatörünün bize masaüstünde izin vermesini isteyeceğiz. VS Kodunun sağ alt köşesinde (mavi çubukta), Cihaz Yok yazan bir şey göreceksiniz. Daha önce mobil için geliştirdiyseniz, buna tıkladığınızda simülatörlerinizi Komut Paletinde göreceksiniz.
Simülatörünüz yoksa, iOS simülatörünü ilk kez açmak için terminalde aşağıdakileri çalıştırın:
açık -a simülatör
Daha sonra VS Code'u yeniden başlattığınızda kullanılabilen bir iOS simülatörü görmelisiniz.
Android daha karmaşıktır. Android Studio'yu yükleyin ve bir Android projesinin içinde Araçlar> Android> AVD Yöneticisi'ne tıklayın. Sanal Cihaz Oluştur'u seçin.
Taklit edilecek cihazı seçin - örneğin bir Google Pixel 2. İleri'yi tıklayın ve ayrıca indirmek için bir sistem görüntüsü (yani işletim sistemi sürümü) seçebilirsiniz. Bir sonraki sayfada, Öykünülmüş Performans altında, öykünücüde donanım grafik hızlandırmasını etkinleştirmek için Donanım - GLES 2.0'ı seçin. İşlemi bitirin.
Sanal cihazı Android Studio'da oluşturduktan sonra VS Code'u yeniden başlattığınızda Android emülatörünüzün VS Code'un cihaz listesinde iOS simülatörünün yanında göründüğünü göreceksiniz.
Şimdi, Cihaz Yok'u tıklarsanız, bir iOS veya Android cihaz seçebilirsiniz ve masaüstünüzde sanal bir telefon açılacaktır. Bir iPhone X simülatörü ile deneyin.
04. Başlangıç uygulamasını test edin
Şimdi simülatör çalışıyor, başlangıç uygulamasını test edebilirsiniz. F5'e basın veya Hata Ayıkla> Hata Ayıklamayı Başlat'ı tıklayın. Uygulama simülatöre yüklenecek ve onunla etkileşim kurmayı deneyebilirsiniz.Hemen gerçekleşmezse sabırlı olun, çünkü oluşturulması biraz zaman alabilir.
Aynısını Android'de yapmadan önce, projemiz için gradle bağımlılıkları yüklememiz gerekiyor (şu anda küçük bir Flutter nüansı). Proje kök dizinine gidin ve şunu çalıştırın:
android / gradlew
Ardından bir Android öykünücüsü açabilir ve projeyi iOS için yaptığınız gibi Hata Ayıklama modunda çalıştırabilirsiniz.
Flutter'ın harika bir özelliği, "çalışırken yeniden yüklemeyi" desteklemesidir - yani, kaynağınızı değiştirebilir ve değişiklikleri simülatöre hemen yansıtabilirsiniz. İçinde main.dart, iPhone X simülatörü çalışırken Uygulamam sınıfında birkaç değişiklik yapalım:
primarySwatch: Colors.green, home: new MyHomePage (title: 'Recipe Book'), =
Kaydettiğiniz anda değişikliklerin etkili olduğunu görmelisiniz.
06. Flutter’ın widget sistemini keşfedin
Henüz bahsetmediğimiz şey, Flutter'ın kullandığı Dart programlama dilidir. Dart, Google tarafından geliştirilen ve tüm Flutter geliştirmelerinde kullanılan, C tarzı sözdizimine sahip nesne yönelimli bir dildir. Zaten biraz web veya mobil geliştirme deneyiminiz varsa, bu size tamamen yabancı olmamalıdır.
Flutter'daki her şey, bir uygulamanın yapı taşları olan widget'lara dayanır. Daha önce React kullandıysanız, Flutter’ın yaklaşımı çok benzerdir ve widget'lar bileşenlere benzerdir. Esasen, uygulamanızın tamamı bir widget hiyerarşisine ayrılabilir.
Bu, içinde kolayca görülebilir. Uygulamam sınıf. Uygulamam bir StatelessWidget (bu, değişmez olduğu anlamına gelir). inşa etmek() geçersiz kıldığımız yöntem Flutter'a parçacığın nasıl işlenmesi gerektiğini söyler. Bu, React’ınkine benzer render () işlevi.
Yöntem bir MaterialApp Google'ın Materyal Tasarımını kullanan bir uygulamayı temsil eden widget. Bu da kendileri widget olan birkaç özelliğe sahiptir: ThemeData kullanılacak görsel stili tanımlar ve Benim ana sayfam aşağıda tanımlanan özel bir widgettır. main.dart uygulamanın gövdesini içeren dosya.
07. İçeriğinizi düzenleyin
Vatansızların aksine Uygulamam, Benim ana sayfam durum bilgisi olan bir pencere öğesidir. Bu, davranışının şu şekilde tanımlandığı anlamına gelir: _MyHomePageState sınıf, örneğin uygulamadaki düğmeye bastığınızda olduğu gibi bilgileri depolamasını ve buna göre değişmesini sağlar.
Şu anda birçok yerleşik widget'ı kullandığını görebilirsiniz. Flutter, düzen, düğmeler ve metin ekranı gibi genel şeyleri işlemek için sağlar. Uygulamamızın sunduğu şeyleri değiştirmek için bu sınıfta bazı değişiklikler yapalım.
class _MyHomePageState, StateMyHomePage'i genişletir> {@override Widget build (BuildContext context) {return new Scaffold (appBar: new AppBar (title: new Text (widget.title)),), body: new Container (decoration: new BoxDecoration (color: Colors). kahverengi [100]), alt: yeni RecipeWidget ())); }}
Mevcut içeriği elden çıkardık ve onu kahverengi bir Konteyner widget'ıyla değiştirdik, ancak konteynere yerleştirilecek özel bir widget (RecipeWidget) oluşturmamız da gerekiyor.
Class RecipeWidget, StatelessWidget'i genişletir {@override Widget build (BuildContext context) {ListWidget> widgets = new ListWidget> (); yeni ListView döndür (alt öğeler: parçacıklar); }}
08. Bazı varlıkları yükleyin
Ardından, uygulamaya ekleyebilmemiz için uygulamayla bazı varlıkları yükleyelim. Liste görünümü içindeki widget RecipeWidget. Bir uygulama için statik varlıklar şurada belirtilir: pubspec.yaml "flutter" bölümünün altında:
varlıklar: - img / breakfast.webp - img / curry.webp - img / pasta.webp
Ayrıca main.dart'ta, tarifler için küçük resim ve özet işlevi görmesi için resimleri dizelerle eşleştirerek basit bir veri yapısı oluşturacağız.
var tarifler = {'breakfast.webp': 'Güne bu besleyici kahvaltıyla başlayın.', 'pasta.webp': 'Kendi taze makarnanızı yaparak arkadaşlarınızı şaşırtın.', 'curry.webp': 'Gösteriş yapın zengin bir köri ile yemek pişirme becerileriniz. ',};
09. Bitir
Son olarak, güncelleyelim RecipeWidget tarifleri görüntüleyen bir widget listesi oluşturmak için. Kullanırız Image.asset dahil ettiğimiz statik varlıkları yüklemek için pubspec.yaml.
recetes.forEach ((thumb, caption) => widgets.add (new Container (child: new Padding (padding: new EdgeInsets.all (16.0)), child: new ListTile (önde: Image.asset ('img / "+ thumb) , genişlik: 80.0), başlık: Metin (başlık))), dekorasyon: yeni BoxDecoration (kenarlık: yeni Kenarlık (alt: yeni Kenarlık (renk: Renkler.brown)), renk: Colors.brown [200])))) ;
Umarım Flutter'ın uygulamaları oluşturmak için widget'ları nasıl kullandığına dair bir fikir edinmeye başlıyorsunuz. Cihazı döndürmek için simülatörü kullanmayı deneyin. Flutter düzeni, değişiklikleri otomatik olarak barındırır. Karşılaştırma için Android emülatöründeki uygulamayı deneyin.
Bu makale ilk olarak şurada yayınlandı: ağ, web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi. Satın Al sayı 310 veya abone ol.
