Flutter da Bir Widget’ın Parent Uzunluk ve En Bilgisine Nasıl Ulaşırız?

Flutter da Bir Widget’ın Parent Widget’ının Uzunluk ve En Bilgisine Nasıl Ulaşırız?

Merhaba,

Bu yazıda, Flutter geliştirirken sık sık ihtiyaç duyduğumuz bir özelliğin kullanımını anlatacağım. Tasarladığımız bir widgetın ekrandaki konumunu belirlemek için ya da  uygulama akışı esnasında widget üzerindeki değişiklikleri gerçekleştirebilmek için bazen parent widget’ın boyutlarına, konumuna vb gibi özelliklerine ihtiyaç duyarız. Bu işi yapabilmek için kullanmamız gereken widget ise LayoutBuilder( ) olacaktır.

Şimdi bir örnek üzerinden kullanımını anlatalım:

Örneğin bir Container içerisinde bir başka Container kullanacağız ve child Container’ın boyutları her zaman parent widget’ın boyutlarına bağlı olarak değişecek. Dolayısıyla parent Container ın sahip olduğu boyutların bilinmesi gerekir. Bunun cevabını ise LayoutBuilder( ) a sorarak öğreneceğiz. LayoutBuilder kendisinin parent widget’ının özelliklerine erişebilmemizi sağlıyor. Eğer boyutlarının parent a göre değişmesini istediğimiz widget ı LayoutBuilder ile sarmalarsak istediğimiz sonuca ulaşırız. Aşağıdaki örnek ile daha iyi anlamaya çalışalım:

Container(
   width: _mainWidth,
   height: _mainHeight,
   color: Colors.blue,
   child: Center(
       child: LayoutBuilder(
           builder: (BuildContext context, BoxConstraints constraints) {
           return Container(
              width: constraints.maxWidth / 2,
              height: constraints.maxHeight / 2,
              color: Colors.yellow,
           );},
        ),
    ),
 ),

Yukarıdaki örnekte iç içe bulunan Container ların boyutlarının birbirine bağlı olduğunu görebiliriz. İçerideki Container’ın parent Container’ın boyutlarından 2 kat daha küçük olduğunu görüyoruz. Bu örnekte width ve height değerleri programın başında atanmış fakat programınızın akışına göre bu değişebilir ve parent in boyutları değişken olabilir. Bu durumlarda boyut bilgilerini ancak LayoutBuilder ile almanız mümkün olacaktır. LayoutBuilder bir builder fonksiyonu çağırır, bu fonksiyon ile parent’ın boyutlarına kolaylıkla erişebilir. 

constraints.maxHeight ve maxWidth ile bu özelliklere erişebiliriz. 

Projenin tamamına aşağıdaki github linkinden erişebilirsiniz:

https://github.com/aedemirsen/FlutterTutorials/tree/main/layout_builder_example

İyi çalışmalar.