Flutter, mobil uygulama geliştiricilerinin birden fazla bileşeni bir araya getirerek kullanıcı arayüzleri oluşturmasını sağlayan bir kullanıcı arayüzü (UI) çerçevesidir. Flutter’daki tüm kullanıcı arayüzü bileşenleri, Widget adı verilen bir sınıftan türetilir.

Widget’lar, uygulamanızın görsel arayüzünü oluşturmak için kullanılan yapı taşlarıdır. Her widget, bir veya daha fazla çocuk widget’ı içerebilir ve bu çocuk widget’lar da kendileri de bir veya daha fazla çocuk widget’ı içerebilir. Bu şekilde, bir widget hiyerarşisi oluşturulur ve sonuçta, bir veya daha fazla bileşeni bir araya getirerek kompleks kullanıcı arayüzleri oluşturulur.

Flutter’daki widget’lar iki türde olabilir: stateless widget’lar ve stateful widget’lar.

Stateless widget’lar, oluşturulduktan sonra içeriği değiştirilemeyen widget’lar olarak düşünülebilir. Bir stateless widget, her zaman aynı görünümü oluşturur ve bir kullanıcının etkileşimleri veya uygulama durumundaki değişiklikler tarafından etkilenmez.

Stateful widget’lar ise, içerikleri kullanıcı etkileşimleri veya uygulama durumu değişiklikleri tarafından değiştirilebilen widget’lar olarak düşünülebilir. Bir stateful widget, içerdiği bir durum nesnesine dayanarak, kullanıcının etkileşimleri veya uygulama durumundaki değişiklikler tarafından tetiklenen bir değişiklikle yeniden oluşturulabilir.

İşte, basit bir Flutter widget örneği:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  final String title;

  MyWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        title,
        style: TextStyle(fontSize: 24),
      ),
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.blueGrey,
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

Bu örnek, bir Container bileşeni içinde bir Text bileşeni oluşturur. Container bileşeni, bir widget’ın boyutunu, yerleşimini ve görünümünü ayarlamak için kullanılabilen çok yönlü bir bileşendir. Bu örnekte, margin ve padding özellikleri, bileşenin kenar boşluklarını ve dolgusunu belirlerken, decoration özelliği, bileşenin arkaplanını ve şeklini belirler.

Bu örnek, bir stateless widget’dır, çünkü oluşturulduktan sonra içeriği değiştirilemez. performansı daha iyidir. fakat içeride olan bitenden habersizdir. dinleme yapmaz birsefer oluşturur ve yoluna devam eder.