İlk Flutter uygulamanızı yazın

1. Giriş

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:



2. Flutter ortamınızı kurun

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

3. Başlangıç ​​Flutter uygulamasını oluşturun

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'),
        ),
      ),
    );
  }
}  

4. Durum bilgisi olan bir widget ekleyin

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

6. Sonsuz kaydırmalı bir ListView oluşturun

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




2 görüntüleme0 yorum

Son Paylaşımlar

Hepsini Gör

1- CSS Peeper Herhangi bir sayfanın kullandığı yazı tiplerini ve renklerini bul. Görselleri, gifleri ve ikonları indir Herhangi bir element için CSS detaylarına göz at.

1. Dijital Vitrininizi Oluşturun İşletmenizin Google'da fark edilmesini sağlayın. Ücretsiz bir Google Benim İşletmem profili oluşturarak Google Arama ve Haritalar'da müşterilerle bağlantı kurun. Avant

1. Özgün ve İlgi Çekici Reklam Metinleri Yazma Kullanıcı avantajlarına odaklanan mesajlar oluşturun. Nedeni: Kullanıcılar kendi ihtiyaçlarına hitap eden reklamlarla etkileşim kurar. Başlık ve açıklama