Flutter Dersleri #2 - LayoutBuilder Kullanımı

Flutter LayoutBuilder Nedir?

LayoutBuilder responsive tasarım oluşturmak için en sık kullanılan widget'lardan bir tanesidir.

LayoutBuilder widget'ı, parent widget'a göre uyumlanarak -parent widget'ı tamamen kaplayarak- child widget'ların ihtiyaç duyduğu boxConstraints parametresini dinamik olarak sağlar.
Bu parametre kullanılarak daha düzgün ve responsive tasarımlar ortaya çıkarılabilir.

LayoutBuilder

LayoutBuilder parametre olarak, geriye Widet dönecek bir method bekler. builder isimli bu method BuildContext ve BoxConstraints olmak üzere iki parametre sağlar.

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints boxConstraints) => childWidget,
    )

BoxConstraints parametresi paret widget ile alakalı size değerlerine ulaşıp; bu değerlere göre child widget'ları sayfa üzerinde yerleştirmede kolaylık sağlar.

boxConstraints.maxHeight
boxConstraints.maxWidth
boxConstraints.minHeight
boxConstraints.minWidth
boxConstraints.hasInfiniteHeight
boxConstraints.hasInfiniteWidth

Basit bir kullanım ile Flutter LayoutBuilder Kullanımı dersini burada noktalıyoruz, sonraki derslerde görüşmek üzere.

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints boxConstraints) {
        if (boxConstraints.maxWidth > 500) {
          return getLargeDesign();
        } else {
          return getNormalDesign();
        }
      },
    )

Sorularınızı ve isteklerinizi yorum bölümünden iletebilirsiniz.

Kaynak:

• flutter.dev