Flutter, tek bir kod tabanından mobil, web ve masaüstü için güzel, yerel olarak derlenmiş uygulamalar oluşturmak için Google'ın UI araç takımıdır. Flutter, mevcut kodla çalışır, dünya çapındaki geliştiriciler ve kuruluşlar tarafından kullanılır ve ücretsiz ve açık kaynaktır.
Bu kod laboratuvarında, basit bir mobil Flutter uygulaması oluşturacaksınız. Nesne yönelimli koda ve değişkenler, döngüler ve koşullar gibi temel programlama kavramlarına aşinaysanız, kod laboratuvarını tamamlayabilirsiniz. Dart, mobil, masaüstü veya web programlama konusunda daha önce deneyim sahibi olmanıza gerek yoktur.
1. bölümde öğrenecekleriniz
iOS, Android, masaüstü (örneğin Windows) ve web'de doğal görünen bir Flutter uygulaması nasıl yazılır
Bir Flutter uygulamasının temel yapısı
İşlevselliği genişletmek için paketleri bulma ve kullanma
Daha hızlı bir geliştirme döngüsü için çalışırken yeniden yüklemeyi kullanma
Durum bilgisi olan bir widget nasıl uygulanır
Sonsuz, tembelce yüklenmiş bir liste nasıl oluşturulur
Bu codelab'in 2. bölümünde , etkileşim ekleyecek, uygulamanın temasını değiştirecek ve yeni bir sayfaya (Flutter'da rota denir) gitme yeteneği ekleyeceksiniz.
1. bölümde ne inşa edeceksiniz
Bir başlangıç şirketi için önerilen adları oluşturan basit bir uygulama uygulayacaksınız. Kullanıcı, en iyilerini kaydederek adları seçebilir ve seçimlerini kaldırabilir. Kod tembelce bir seferde 10 ad üretir. Kullanıcı kaydırdıkça daha fazla ad oluşturulur. Bir kullanıcının ne kadar ileri kaydırabileceği konusunda bir sınır yoktur.
Aşağıdaki animasyonlu GIF, uygulamanın, bölümün sonunda nasıl çalıştığını gösterir:
Bu laboratuvarı tamamlamak için iki yazılıma ihtiyacınız var: Flutter SDK ve bir düzenleyici . (Codelab, Android Studio kullandığınızı varsayar, ancak tercih ettiğiniz düzenleyiciyi kullanabilirsiniz.)
Aşağıdaki cihazlardan herhangi birini kullanarak codelab'i çalıştırabilirsiniz:
Bilgisayarınıza bağlı ve geliştirici moduna ayarlanmış fiziksel bir Android veya iOS cihazı
iOS simülatörü ( Xcode araçlarının yüklenmesini gerektirir)
Android Emulator ( Android Studio'da kurulum gerektirir)
Bir tarayıcı (hata ayıklama için Chrome gereklidir)
Windows , Linux veya macOS masaüstü uygulaması olarak
Basit, şablonlu bir Flutter uygulaması oluşturun. Aşağıdaki gibi startup_namer adında bir Flutter projesi oluşturun .
$ flutter create startup_namer
$ cd startup_namerİçeriğini değiştirin lib/main.dart. Tüm kodu silin lib/main.dartve ekranın ortasında "Merhaba Dünya" yazan aşağıdaki kodla değiştirin.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: Text('Hello World'),
),
),
);
}
} Daha az widget'ların değişmez olduğunu belirtin, bu onların özelliklerinin değişemeyeceği anlamına gelir; tüm değerler nihaidir.
Durum ful pencere öğeleri, pencere öğesinin ömrü boyunca değişebilecek durumu korur. StatefulWidgetDurum bilgisi olan bir pencere aracının uygulanması , bir sınıfın örneğini oluşturan en az iki sınıf gerektirir State. Nesnenin StatefulWidgetkendisi değişmezdir ve atılabilir ve yeniden oluşturulabilir, ancak Statenesne, parçacığın ömrü boyunca varlığını sürdürür.
Bu adımda, sınıfını RandomWordsoluşturan durum bilgisi olan bir pencere öğesi ekleyeceksiniz , . Daha sonra , mevcut durum bilgisi olmayan pencere aracının içinde bir alt öğe olarak kullanacaksınız .State_RandomWordsStateRandomWordsMyApp
Durum bilgisi olan bir pencere öğesi için ortak kod oluşturun.
Dosyanın dışında herhangi bir yere gidebilir MyApp, ancak çözüm onu dosyanın altına yerleştirir. içinde lib/main.dart, imlecinizi tüm kodlardan sonra konumlandırın, yeni bir satırdan başlamak için birkaç kez Return yazın. IDE'nizde yazmaya başlayın stful. StatefulDüzenleyici, bir widget oluşturmak isteyip istemediğinizi sorar . Kabul etmek için Return tuşuna basın . İki sınıf için ortak kod görünür ve imleç, durum bilgisi olmayan pencere aracınızın adını girmeniz için konumlanmıştır.
RandomWordsWidget'ınızın adı olarak girin .
Aşağıdaki kodda görebileceğiniz gibi, RandomWordswidget, Statesınıfını oluşturmaktan başka pek bir şey yapmıyor.
RandomWordsDurum bilgisi olan pencere aracının adı olarak girdikten sonra , IDE eşlik eden Statesınıfı otomatik olarak günceller ve onu adlandırır _RandomWordsState. Varsayılan olarak, Statesınıfın adının önüne bir alt çizgi eklenir. Bir tanımlayıcıya alt çizgi eklemek , Dart dilinde gizliliğiState zorunlu kılar ve nesneler için önerilen en iyi uygulamadır.
IDE ayrıca, durum sınıfını genişletmek için otomatik olarak günceller ve State<RandomWords>bu State, RandomWords. Uygulamanın mantığının çoğu burada bulunur— RandomWordswidget'ın durumunu korur. Bu sınıf, kullanıcı kaydırdıkça sonsuz büyüyen oluşturulan sözcük çiftlerinin listesini kaydeder ve bu laboratuvarın 2. bölümünde, kullanıcı kalp simgesini değiştirerek listeye ekledikçe veya listeden çıkardıkça sık kullanılan sözcük çiftlerini kaydeder.
Her iki sınıf da şimdi aşağıdaki gibi görünüyor:
class RandomWords extends StatefulWidget {
const RandomWords({ Key? key }) : super(key: key);
@override
State<RandomWords> createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
return Container();
}
}
build()içindeki yöntemi güncelleyin _RandomWordsState.
return Container();Aşağıdaki iki satırla değiştirin :
class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random(); // NEW
return Text(wordPair.asPascalCase); // NEW
}
}
MyAppAşağıdaki değişiklikleri yaparak sözcük oluşturma kodunu kaldırın :
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random(); // DELETE
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: const Center( // Add the const
//child: Text(wordPair.asPascalCase), // REPLACE with...
child: RandomWords(), // ...this line
),
),
);
}
}
Uygulamayı yeniden yükleyin. Uygulama, daha önce olduğu gibi davranarak, uygulamayı her yeniden yüklediğinizde veya kaydettiğinizde bir kelime eşleştirmesi göstermelidir.
İpucu : Çalışırken yeniden yükleme sırasında uygulamayı yeniden başlatmanız gerekebilecek bir uyarı görürseniz, uygulamayı yeniden başlatmayı düşünmelisiniz. Yanlış bir pozitif olabilir, ancak yeniden başlatma, değişikliklerinizin uygulamanın kullanıcı arayüzüne yansıtılmasını sağlar.
Sorunlar?
Uygulamanız düzgün çalışmıyorsa, tekrar yola çıkmak için aşağıdaki bağlantıdaki kodu kullanabilirsiniz.
lib/main.dart
Bu adımda, _RandomWordsStatekelime eşleştirmelerinin bir listesini oluşturup görüntülemek için genişleteceksiniz. Kullanıcı kaydırdıkça, liste (bir ListViewpencere öğesinde görüntülenir) sonsuza kadar büyür. Fabrika builderkurucusu ListView, istek üzerine tembelce bir liste görünümü oluşturmanıza olanak tanır.
_RandomWordsStateSınıfa bazı durum değişkenleri ekleyin .
_suggestionsÖnerilen kelime eşleştirmelerini kaydetmek için bir liste ekleyin . Ayrıca _biggerFontyazı tipi boyutunu büyütmek için bir değişken ekleyin.
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[]; // NEW
final _biggerFont = const TextStyle(fontSize: 18); // NEW
...
}
Ardından, sınıfın buildyöntemini güncelleyeceksiniz._RandomWordsState
Sınıf , anonim bir işlev olarak belirtilen bir fabrika oluşturucu ve geri çağırma işlevi olan ListViewbir oluşturucu özelliği sağlar . itemBuilderİşleve iki parametre iletilir: BuildContextve satır dizini, i. İndeks 0'dan başlar ve önerilen her kelime eşleştirmesi için fonksiyon her çağrıldığında bir kez artar. Bu model, kullanıcı kaydırdıkça öneri listesinin büyümeye devam etmesini sağlar.
buildiçin yöntemi güncelleyin_RandomWordsState.
_buildSuggestions()Doğrudan kelime oluşturma kitaplığını çağırmak yerine kullanmak için değiştirin .
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return const Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return ListTile(
title: Text(
_suggestions[index].asPascalCase,
style: _biggerFont,
),
);
},
);
}
Geri itemBuilderarama, önerilen sözcük eşleştirme başına bir kez çağrılır ve her öneriyi bir ListTile satırına yerleştirir. Çift satırlar için işlev ListTile, sözcük eşleştirme için bir satır ekler. Tek satırlar için işlev Divider, girişleri görsel olarak ayırmak için bir pencere öğesi ekler. Bölücünün daha küçük cihazlarda görülmesinin zor olabileceğini unutmayın.
Not : Sözdizimi 2'ye i ~/ 2bölünür ive bir tamsayı sonucu döndürür. Örneğin, liste [1,2,3,4,5]olur [0,1,1,2,2]. Bu, ListView'deki gerçek kelime eşleştirme sayısını, eksi bölücü widget'ları hesaplar.
Başlığı iki yerde değiştirerek buildyöntemini güncelleyin .MyApp
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
home: Scaffold(
appBar: AppBar(
title: const Text('Startup Name Generator'),
),
body: const Center(
child: RandomWords(),
),
),
);
}
Uygulamayı yeniden başlatın. Ne kadar ileri giderseniz gidin, kelime eşleşmelerinin bir listesini görmelisiniz.
pencereleriOS