Polish 20201030 173323620 01
Ekim 30, 2020

Flutter Ders 1 – Flutter Widgets Kavramı Nedir?

ile Zexon-dev

Flutter’da Widget kavramına giriş yaptığımız durumda öğrenmemiz gereken bazı esas noktalar bulunmaktadır. İlk öne bunlara kısaca değinelim.

Flutter Widgets Nedir?

Widget yapısını kısaca açıklayacak olursak flutterın tamamı nerdeyse Widgets kavramından oluşuyor.Neden Flutter ? Flutter Kurulum ve Programlama Mantığı bahsettiğim gibi  hepsi aslında iç içe mantıktan oluşuyor.Bu iç içe mantık bize ezber değilde direkt sonuç odaklı işlem yapmamızıa olanak sağlıyor.Şimdi gelin Visual Studio  Code üzerinden bir göz atalım.


Flutter Widgets Örneği:

Ctrl+shift+p kombinasyonları ile bir yeni içerik oluşturdum ve adını widgets diye koydum.

Dikkat edin dosya oluşturuken ilk harfi küçük olmak zorunda çünkü flutter küçük büyük harf duyarlıdır.Baş harfini büyük verirseniz sizi uyaracaktır. Burda main kodundan  sonra hepsini sildim.

Flutter Widgets

Flutter Visual Studio Code


Açılış ekranı bu şekilde Sarı ile işaretlediğim yerlere bakacak olursanız en başta bulunan WIDGETS burada aslinda yazdıgım sekilde olması(widget) lazım bu sekilde gorünmesinin sebebi visual studio code. İkinci sarı olan kısım ise Lib dosyalamayı yaptığımız kısım. Gerekli yerlerde özel dosyalar oluşturulur.

flutter dersleri

Futter Stateless Widget

Burada bazı bilmediginiz yerler olmuş olabilir bu zamanla oturacaktır dersleri iyice dinlerseniz profesyonel bir mobil uygulama geliştiricisi olabilirsiniz ve istediginiz uygulamayı yaparsınız.


Flutter ,yukarıdada bahsettigimiz gibi widgetlardan olusuyordu.Diger widgetlerın 2 ana widgettan oluşuyordu.(inheritance).

  • Stateless Widgets
  • Stateful Widgets

Flutter Stateless Widgets Nedir?

Stateless Widgets  kıcasaca mahsetmek gerekirse eğer. Onu cağırdıgınız zaman bir işlev yapmayan ,yükü ağır olmayan , sabit sayfalarda kullanılınır.

Örneğin:  IconIconButton, ve  Text  widgetlarında kullanılınır .Kod yapısı aşşağıdaki gibidir.

Bknz:Flutter Stateless Widget | Flutter.dev

import 'package:flutter/material.dart';

void main() {
  runApp(Widgetstry());//hatalı Kullanımdır
}

class Widgetstry extends StatelessWidget {
  const widgetstry({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
    );
  }
}

Flutter Stateful Widget Nedir?

Statefull, Stateless widgetın aksine daha yoğun isler ve hareket gerektiren durumlarda  kullanırız.Veri alama veri çekme  , kullanıcı eylemi vb.

Örneğin: CheckboxRadioSliderInkWellForm, ve TextField gibi etkileşimli ,dinamik , widgetlar kullanılınır.

flutter dersleri

Flutter Statefull Widget

Kod örnegi aşşağıdaki gibidir.

import 'package:flutter/material.dart';

void main() {
  runApp(Widgetstry());//hatalı kullanımdır
}

class Widgetstry extends StatefulWidget {
  widgetstry({Key key}) : super(key: key);

  @override
  _WidgetstryState createState() => _WidgetstryState();
}

class _WidgetstryState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(

        
      ),
    );
  }
}

Flutterda Widgetsları daha iyi anlamak icin bir video koyuyorum.(en)