"Enter"a basıp içeriğe geçin

Flutter 101, hadi gelin Flutter ‘a yeni başlayanlar için püf noktalar

Flutter’a yeni başladınız ve püf noktaları öğrenmek veya mevcut bilginizi tazelemek istiyorsanız size bi kaç şey sunmaya çalışacağım.Hadi başlayalım!

Peki ya null sa?

bilgi ?? (null ise yapılacak)

String mesaj;
print(mesaj ?? "Mesaj alanı null olduğundan beni göreceksin");

IF else nereye kadar!

Her programcının ilk öğrendiği mantık bloklarından if else leri nasıl kısa kullanırım?

İşte en basit örneği!

int a = 5;
a == 5 ? print("evet) : print("5 e eşit değildir"); 

Sık kullanıldığı yerlere bir örnek verirsek

bool resimGoster = false;
child : resimGoster ? Image("resim adresi") : Container();
//Boş Container ile bu alanda bişey göstermedik.

String manipülasyonları

En çok kullandığımız veri tiplerinden birisi String peki nasıl manipüle edebiliriz?

String mesaj = "Droidim.com";
String yazar = "Pme"

print("Merhaba"); //"Merhaba" der konsola

print(mesaj); // "Droidim.com" çıktısı verir konsola

print("Bu yazı $mesaj 'a aittir"); //Bu yazı Droidim.com'a aittir.

print("Site" + mesaj + "yazar" + yazar); // SiteDroidim.comyazarPme 
//Dikkat edin aralarda boşluk yok o yüzden böyle bir çıktı verdi!

print("Site " + mesaj + " yazar " + yazar); // Site Droidim.com yazar Pme 

int sayi = 5;
print(sayi.toString()); // Konsola 5 yazar

print("Sayimiz : " + sayi.toString()); // Sayimiz : 5
//alternatif
print("Sayimiz : ${sayi + 1} ") ; //Sayinmiz : 6

//Daha güzel bir örnek verelim

class User{
String isim = "Droidim.com";
}

User kullanici = User();
kullanici.isim = "PME";
print("isim : ${kullanici.isim} dir ");

//isim : PME dir 

Sınıfı yazıya dökme ! => Class.toString()

Elimizdeki sınıfın içeriğinde ki verileri görmek istiyoruz yada int.toString gibi bir method tanımlayıp kendimize özel çıktı üreteceğiz.Buyrun bir Dart güzelliği.Unutmayalım her şey Object sınıfından türetilir.

https://api.dart.dev/stable/2.8.2/dart-core/Object-class.html#instance-methods

Burada Friend sınıfıda otomatik olarak Object sınıfından türetilmiştir.Bizde @override ile üst sınıftaki (Object) toString metodunu ezip kendi metodunumuzu yazmoş bulunmaktayız!

class Friend {
  String id;
  String userName;
  String email;
  String photoURL;
  String photoLocal;

  Friend({@required this.id, @required this.userName, @required this.email});

  @override
  String toString() {
    return " Arkadaşın id: ${this.id} ve kullanıcı adı: ${this.userName}";
  }
}

İşte sonucu:

(is) Bu bir String,int,bool veya x mi ? (Dart is)

https://dart.dev/guides/language/language-tour#type-test-operators

Elinizde bir veri var ama tipi ne bilmiyorsanız nasıl kontrol yapabiliriz?

void main() {
  int sayi = 5;
  if (sayi is int) {
    print("bu bir int veri tipindedir");
  } else {
    print("int veri tipinde değildir");
  }
}

Veri tipini biliyorum sende bil! (Dart as)

Eğer ki (nesne as User) ile nesne’nin bir User tipinde olduğunu belirtmez isek IDE miz bize .kullaniciAdi gibi parametreleri getirmez çünkü bu parametreler sadece User tarafında bulunmaktadır.

Dikkat edin!

Insan nesne = Insan(); deseydik alt taraftaki kodumuz hata fırlatıcaktı.

class Insan{
  String name = "Droidim";
}

class User extends Insan{
  String kullaniciAdi = "PME";
}

void main() {
  Insan nesne = User();
  if ((nesne as User).kullaniciAdi is String) {
    print("bu bir String veri tipindedir");
  } else {
    print("String veri tipinde değildir");
  }
}

Elimde String var bunu int yap,eğer uygunsa!

int donusturulmusHali = int.tryParse('12345');

Set (Her elemanı farklı liste)

List , map gibi değer tiplerini eminim ki duymuşsunuzdur, peki… Set?

elimizde bir Liste olduğunuz düşünelim


List<int> listemiz = [1,2];
listemiz.add(3); // listemiz 1 ,2 ,3 olur
listemiz.add(3); // listemiz 1 ,2 ,3 ,3 olur
print(listemiz.length); // çıktı 4 cevabını verir

görüldüğü gibi listemizde iki adet 3 rakamı var. Peki bu durumu birbirinden farklı elemanlar durumuna nasıl çeviririz?

 Set<int> listemiz = {1,2};
listemiz.add(3); // listemiz 1 ,2 ,3 olur
listemiz.add(3); // listemiz 1 ,2 ,3 olarak kalır ve eklenmez
listemiz.add(4); // 1 ,2 ,3,4 
print(listemiz.length); // çıktı 4 cevabını verir

Tanımlarken dikkat edin!

void main() {
  
Set<String> enGuzelGosterim = <String>{};
  

var names = <String>{};
names.add("Bu bir Set tipi referansıdır");
  
//Dikkat edin {} kullandıp tip belirtmezsek dart bunu Map olarak algılar.
var buBirMaptir = {}; 
  

}

daha detaylı bilgi

https://dart.dev/guides/language/language-tour#sets

Container …

Kullanmadığımız Flutter projesi yoktur heralde.Basit bir kutu ama her şekli alıyor.

Eğer herhangi bir child widget’ın yoksa => Mevcut alanı kaplamaya çalış

Eğer child parametrene bir widget girilmişse bu child widget’ı ile aynı genişlik ve yüksekliğe sahip ol!

Kenarları yuvarlatalım!

Container Widget ının önemli özelliklerinden birisi BoxDecaration

decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.all(Radius.circular(8))));
  }

Fat Arrow => bu ne yahu ?

ontap : (){
print("bir işlem yaptım");
}

//Fat Arrow kullanırsak 

onTap : () => print("bir işlem yaptım"),

Daha güzel bir kullanım 🙂

onTap() { 
return roketiAtesle ? print("ateşledik roketi") : print("roket ateşlenmedi"),}

Yerine

onTap() => roketiAtesle ? print("ateşledik roketi") : print("roket ateşlenmedi"),

Fat arrow bizim için işleri kısaltan bir operatördür.Yani

Spread Operator … ve Null Aware Spread Operator …?

Ben : Elimde listeler var bunları Widget içerisinde birleştirmek istiyorum.

Dart : tamam

Null Aware Spread Operator …?

Widget’lar arasında aynı boşluğu oluşturma => Wrap()

Bir çok farklı widget var elinizde ama aralarında ki boşlukları belli bir genişlikte olmasını istiyorsunuz peki nasıl yapabiliriz?

Her widget a Padding mi atasak?

Aralara SizedBox mu yerleştirsek?

yada…

Wrap widget’ının güzelliğini mi kullansak?

Wrap(
  spacing: 10, // yatay boşluk
  runSpacing: 50, // dikey boşluk
   //direction: Axis.vertical, // Dikey sırala
  children: <Widget>[
     Text('child 1'),
     Text('child 2'),
     Text('child 3'),
     Text('child 4'),
     Text('child 5'),
     Text('child 6'),
     Text('child 7'),
     Text('child 8'),
  ]
);

Canlı örnek!

Text overFlow hatası veriyor nasıl ayarlıcam?

Elinizdeki Text widget’ı bulunduğu yerden taşıyor mu? Eminimki FittedBox işinize yarıyacak

FittedBox u anladıysak geldi sıra kullanımına

Çözüm basit ! FittedBox() işini çözecek.Tek yapman gereken

FittedBox(child: Text("Bu yoğurdu sarımsaklasak da mı saklasak, sarımsaklamasak da mı saklasak?" );

Tabi burada dikkat edilmesi gereken nokta ise yazının uzunluğu eğer çok uzun ise , FittedBox() bize karınca yazısına benzeyen bir görüntü sunacaktır.

Alternatif olarak

Text("Bu yoğurdu sarımsaklasak da mı saklasak, sarımsaklamasak da mı saklasak?" 
,overflow: TextOverflow.ellipsis);

Diğer TextOverFlow seçenekleri için TextOverFlow. yazıp ctrl+space yapman yeterli 🙂

Asenkron işlemler Async > await

Elimizde uzun sürecek bir işlem var ve bunun beklemesi lakin arayüzün donmaması gerekiyor.Bu tip durumlar için dart bize async ve await eşini sunmakta.

İngilizce resmi kaynağa bakmayanı dövüyorlar 🙂

https://dart.dev/codelabs/async-await

Şimdi hemen bir örnek yapalım

void main() async {
  print("hazırlanıyor");
  int parcalananAtomSayisi = await atomuParcala();
  print("işlem tamamlandı " + parcalananAtomSayisi.toString());
}

Future<int> atomuParcala() async{
  await Future.delayed(Duration(seconds: 1));
  print("atom parçalandı !");
  return 2;
}

çıktı

hazırlanıyor

atom parçalandı !

işlem tamamlandı 2

Hazır yazının sonuna geldik ,Cem KARACA’nın da dediği gibi “Bekle Beni”

    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir