Flutter’da Wrap widget’ı, diğer widget’ları sığdıramadığınız zamanlarda veya farklı boyutlardaki widget’ları bir araya getirip düzenlemek istediğinizde kullanabileceğiniz bir widget’tır. Wrap widget’ı, belirli bir eksen üzerinde, satırlara veya sütunlara bölünmüş çocuk widget’larını yönetir. Bu sayede, widget’larınızın birbirleriyle çakışmasını önler ve ekrana daha iyi bir yerleşim sağlar.
Wrap widget’ı, diğer layout widget’larından farklı olarak belirli bir boyuta sahip değildir. Yani, içindeki widget’ların boyutlarına göre otomatik olarak genişler veya daralır. Wrap widget’ı, özellikle birden fazla farklı boyuttaki widget’ı düzenlemek istediğiniz zamanlarda kullanışlıdır.
Aşağıda, Wrap widget’ını kullanarak örnek bir uygulama gösterilmektedir. Bu örnekte, farklı boyutlardaki 10 adet kutuyu bir Wrap widget’ı içinde düzenleyeceğiz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Wrap Widget Örneği', home: Scaffold( appBar: AppBar( title: Text('Wrap Widget Örneği'), ), body: Wrap( spacing: 10.0, runSpacing: 20.0, children: <Widget>[ _buildBox(50.0, 50.0, Colors.red), _buildBox(100.0, 75.0, Colors.green), _buildBox(75.0, 100.0, Colors.blue), _buildBox(125.0, 50.0, Colors.yellow), _buildBox(50.0, 125.0, Colors.orange), _buildBox(75.0, 75.0, Colors.purple), _buildBox(125.0, 125.0, Colors.black), _buildBox(100.0, 50.0, Colors.grey), _buildBox(50.0, 100.0, Colors.pink), _buildBox(75.0, 125.0, Colors.teal), ], ), ), ); } Widget _buildBox(double width, double height, Color color) { return Container( width: width, height: height, color: color, child: Center( child: Text( '${width.toInt()} x ${height.toInt()}', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), ), ), ); } } |
Yukarıdaki örnekte, Wrap widget’ı Scaffold widget’ının içinde kullanılmakta ve spacing ve runSpacing özellikleri kullanılarak aralıklar ayarlanmıştır. spacing, widget’lar arasındaki yatay boşlukları belirlerken, runSpacing ise widget’lar arasındaki dikey boşlukları belirler. children özelliği, içindeki widget’ların listesini alır.
_buildBox fonksiyonu, her bir kutunun boyutunu, rengini ve içindeki metni ayarlamak için kullanılır.
Sonuç olarak, Wrap widget’ı ile farklı boyutlardaki widget’ları bir araya getirip düzenleyebilirsiniz. Bu sayede, ekrana daha iyi bir yerleşim sağlayabilirsiniz. Wrap widget’ı, diğer layout widget’larından farklı olarak, widget’larınızın boyutlarına göre otomatik olarak genişleyebilir veya daralabilir. spacing ve runSpacing özellikleri, aralıkları ayarlamak için kullanışlıdır.
İlk Yorumu Siz Yapın