Flutter ile İlk Uygulamanı Yazmaya Hazır Mısın?(part 1)

I-GİRİŞ

Write Your First Flutter App, part 1

Bu yazının orijinal haline bu bağlantıdan ulaşabilirsiniz.

Flutter kısa sürede Android ve iOS için yüksek kalite de native arayüzler oluşturmak için kullanılan bir Google SDK’sıdır. Mevcut kod tabanıyla hem iOS hem Android için çalışmaktadır ayrıca pek çok geliştirici ve organizasyon tarafından kullanılmakta olup ücretsiz ve açık kaynak kodludur.

Bu codelab da basit bir Flutter uygulaması nasıl oluşturabiliriz bunu inceleyeceğiz. Haydi başlayalım!

1. Part 1 de Neler Öğreneceğiz?

• Android ve iOS için native görünüme sahip uygulamaları nasıl oluşturacağımızı,
• Bir Flutter uygulamasının yapısını,
• Fonksiyonelliği arttırmak için kullanılan paketlerleri,
• “Hot reload” özelliğini kullanarak nasıl hızlı bir şekilde uygulamamızı geliştirebileceğimizi,
• Bir Stateful Widget’i uygulamamızda nasıl kullanacağımızı,
• Son olarak ise sonsuz bir listeyi (ListView) nasıl kullanacağımızı öğreneceğiz.

2. Problem

Bir startup şirketi için isim öneren basit bir uygulama geliştireceğiz. Kullanıcı bu isimleri seçebilir veya seçmeyebilir ve en iyi seçeneleri kaydedebilir. Kodumuz tek seferde 10 adet isim oluşturmaktadır. Kullanıcı kaydırma işlemini gerçekleştirirken yeni isim grupları oluşturulur ve bu şekilde sonsuza dek kaydırma yaptırmak mümkün olur. Part1 sonunda uygulamımızın son hali aşağıdaki gibi olacaktır.

II- FLUTTER ORTAMIMIZI KURALIM

Bu codelab’i tamamlamak için iki şeye ihtiyacımız var.

• Flutter SDK
• Bir editör

Codelab da tercihen Android Studio kullanılmış ben ise Visual Studio Code kullanacağım. Ve son olarak uygulamamızın çalıştığını göebilmek için;

• Bilgisayarımıza bağlı fiziksel bir cihaz(Android, iOS),
• iOS simülatörü(XCODE için)
• Android emülatörü(Android Studio için)

oluşturmamız gerekmektedir.

III- İLK FLUTTER UYGULAMAMIZ

>> İlk projemizi açtığımızda bizi örnek bir uygulama karşılamaktadır. Haydi ilk projemizi açıp ilk uygulamızı test edelim o zaman.

• İlk olarak Command Palette’yi çağırıyoruz. View > Command Palette veya Ctrl+Shift+P
• Flutter yazıyoruz ve Flutter:New Project’i seçiyoruz.
• Projenizin adını(myapp) giriniz ve proje dizinimizi oluşturuyoruz.

• Daha sonra projemizin oluşturulmasını ve main.dart dosyasının gelmesini bekliyoruz.

İpucu: Eğer projemizi oluştururken IDE seçenek olarak “New Flutter Project” sunmuyorsa Flutter ve Dart eklentilerini eklediğinizden emin olun.

• Son olarak ise örnek projemizi F5 e basarak çalıştıralım.

Daha detaylı bilgi almak isterseniz veya Android/Intellıj ve XCode için Flutter’ın kendi dokümanlarını incelemenizi tavsiye ederiz.

Şimdi ise main.dart dosyamızın içini değiştirerek ekranın tam ortasına “Hello World” yazmayı deneyelim.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @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: const Text('Hello World'),
        ),
      ),
    );
  }
}

After run

1. Gözlemlerimiz

1. Bu örnekte bir material app oluşturduk. Material mobil ve web tasarımında kullanılan görsel tasarım dilidir ve Flutter zengin bir material dizayna sahiptir.
2. Main metodumuzda kullanılan “fat arrow” gösterimi ise fonksiyonları yazarken uzun uzun yazmak yerine tek satırda yazabileceğimiz fonksiyonlar oluşturma olanağı sunar.
3. Flutter da herşey bir widget’dır(Alignment, padding, layout…).
4. Scaffold Widget bize ana ekran için material library’de ki appbar, text ve body için sunulan özellikleri içeren bir widget ağacı sunar. Ve widget ağacımız complex bir hale gelebilir bir süre sonra.

IV- PAKET EKLEME

Bu adımda ise en çok kullanılan ingilizce kelimelerden birkaç binini içeren bir paket kullanacağız.

>> pubspec dosyası Flutter uygulamımızda assetleri yönetir. Şimdi pubspec.yaml dosyasına gidip dependencies kısmının altına english_words:3.1.0 paketini ekliyoruz.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words: ^3.1.0   # bu satırı ekledik

>> Paket çekme işlemimizde tamamlandıktan sonra yeni paketimizi lib/main dizini içine alıyoruz. Yeşil çizili ve açık renkli görünmesinin sebebi henüz bu paketin kod içerisinde hiç kullanılmamasıdır.

Son olarak ise “Hello World” yazdırmak için kullandığımız Text‘i kullanarak random olarak üretilen startup isimlerini ekrana yazdıralım.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random(); // bu satırı ekledik
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(    
          //child: Text('Hello World'),   // bu satırı silip
          child: Text(wordPair.asPascalCase),  // bu satırı ekledik.
        ),
      ),
    );
  }
}

hot reload

sembolünü kullanarak VS Code ve Android Studio da Hot Reload yapabiliriz. Ayrıca Visual Code da ise bunu Ctrl+F5 ile de kolayca yapabiliyoruz.

After hot reload

V- STATEFUL WİDGET EKLEME

Stateless Widget’lar immutable’dır. Yani özellikleri değiştirilemez, durum değişikliği söz konusu değildir.Tüm değerler sabittir(final). Stateful Widget’lar da ise widget var olduğu süre boyunca state’ deki değişikliklerle kendilerini yeniden oluşturan widgetlardır ve stateful widget kullanabilmemiz için en az iki classa ihtiyaç duyarız:

• Stateful Widget class
• State class

Bu adımda ise uyulamamıza bir statuful widget ekleyeceğiz.Widgetımızın adı “ RandomWords” ve state classımızın adı ise “ RandomWordsState” olacak şekilde classlarımızı yazalım…

Sınıflarımızı yazdıktan sonra IDE bize bir şeylerin eksik ya da yanlış olduğunu söyleyecek.

Bu hatanın sebebi build fonksiyonunun bulunmamasıdır. Build fonksiyonunu ekleyip içini ise yapmak istediğimiz işlemlerle dolduracağız.

Daha sonra ilk yazdığımız Stateless widgetı da düzenleyerek uygulamamızı geliştirmeye devam edelim.

class RandomWordsState extends State<RandomWords> {
  @override                                  //... bu satırdan
  Widget build(BuildContext context) {
    final WordPair wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }                                         // buraya kadar ekledik.
}

İpucu: Eğer widget_test.dart sayfasında hata alıyorsanız class ismini kontrol ediniz.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   // final WordPair wordPair = WordPair.random();  // bu satırı 
  // siliyoruz.                                                  
  
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text(wordPair.asPascalCase), // bu satırı silip
          child: RandomWords(),   // ... bu satır ekliyoruz.
        ),
      ),
    );
  }
}

VI- LISTVIEW OLUŞTURMA

Bu adımda ise random olarak oluşan kelimeleri bir listview ile düzenli ve sıralı bir şekilde kaydırarak görebileceğimiz şekilde oluşturalım.

>> İlk olarak _suggestions adında bir List tanımlayalım. Ayrıca yazı tipi boyutunu büyütmek için _biggerFont değişkeni tanımlayalım.

Daha sonra ise _buildSuggestions() isimli yeni bir fonksiyon yazıyoruz. Bu fonksiyonumuz kelimelerin doğru bir şekilde eşleşmesini sağlayacaktır. Ayrıca Listview classımız itembuilder — iki parametre alır. Bunlar BuildContext, ve bir iterator’dür(sayac). İterator 0'dan başlar ve fonksiyon her çağrıldığında 1 artar. — Bu şekilde kullanıcı listview’i her kaydırdığında iterator 1 artarak sonsuza kadar devam eder.

class RandomWordsState extends State<RandomWords> {
  // Bu iki satırı ekleyelim.
  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18); 
  ...
}

>> Şimdi ise aşağıda verilen _buildSuggestions fonksiyonunu RandomWordsState classına yerleşirelim._buildSuggestionsfonksiyonu her kelime çifti için 1 kez _buildRowfonksiyonun çağırır.

Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemBuilder: (BuildContext _context, int i) {
        if (i.isOdd) {
          return Divider();
        }

        final int index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

>> RandomWordsState’e bir _buildRowişlevi ekleyelim.

Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

>> Scaffold, temel Material dizayn gibi görsel tasarımı ayarlayalım.

@override
  Widget build(BuildContext context) {
    //final wordPair = WordPair.random(); // bu iki satırı... 
    //return Text(wordPair.asPascalCase); // ... siliyoruz.

    return Scaffold (                   // buradan... 
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );                                // ... buraya kadar ekliyoruz.
  }

>> Son olarak ise başlığı ve home’u RandomWords çağıracak şekilde değişiklikleri yapalım.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }

Part 1’ in sonuna geldik :) Part 2 de ise mevcut uygulamamızın üstüne yeni şeyler ekleyerek devam edeceğiz.

Bu yazıyı sonuna kadar okuduğunuz için teşekkür ederim. Önerileriniz ve sorularınız için yorum bırakabilir veya twitter üzerinden benimle iletişime geçebilirsiniz ve aşagıdaki linkten de kodların bütün haline erişebilirsiniz.

AjdaAkter/flutter-codelabs