Flutter’da, bir Widget’ın boyutunu, yalnızca kendisini veya çocuklarını kullanarak belirlemek bazen yeterli olmayabilir. Bu durumda, Flutter’da Expanded Widget’ını kullanabilirsiniz. Bu Widget, belirli bir alanı doldurmak için mevcut tüm boşlukları kullanır. Bu makalede, Flutter’da Expanded Widget’ının nasıl kullanılabileceğini ve bir örnek uygulama oluşturmayı göstereceğim.
Expanded Widget Nedir?
Expanded, bir Widget’ın belirli bir alanı doldurmak için mevcut tüm boşluğu kullanmasına izin veren bir Widget’dır. Expanded Widget, bir satır veya sütun gibi bir düzenleyici içinde kullanılabilir ve Widget’ların her biri için belirli bir alan tahsis edilir. Eğer kullanılan tüm alan, kullanılabilir alanı aşarsa, Expanded Widget’ı kullanarak Widget’lar bu boşluğu doldurabilir.
Expanded Widget aynı zamanda Flex veya Row/Column widget’ları gibi esnek düzenleyicilerde de kullanılabilir. Bu Widget’lar, yalnızca kullanılabilir alanın belirli bir yüzdesini kullanarak bir Widget’ın boyutunu belirleyebilir. Ancak, Expanded Widget, tüm kullanılabilir alanı kullanarak Widget’ın boyutunu belirler.
Flutter Expanded Widget Nasıl Kullanılır?
Flutter Expanded Widget, bir sütun veya satır içinde kullanılarak Widget’ların belirli bir alan tahsis edilmesine izin verir. Örneğin, bir satırın çocukları, ekranda belirli bir alanı kaplamalıdır. Expanded Widget, bu boşluğu kullanarak Widget’ın boyutunu genişletir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Row( children: <Widget>[ Expanded( child: Text('Expanded 1'), ), Expanded( child: Text('Expanded 2'), ), Expanded( child: Text('Expanded 3'), ), ], ), |
Yukarıdaki örnekte, Expanded Widget’ları bir satırda kullanarak her bir Text Widget’ın belirli bir alan tahsis edilmesi sağlanmıştır. Expanded Widget, tüm kullanılabilir alanı kullandığı için, her bir Text Widget, eşit boyutlara sahip olacaktır.
Flutter Expanded Widget Örnek Uygulama
Aşağıdaki örnek uygulama, Expanded Widget’ın kullanımını gösterir. Bu uygulama, birkaç resmin ekranda belirli bir alanı kaplamasını sağlar.
|
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 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Expanded Widget Demo', home: Scaffold( appBar: AppBar( title: Text('Expanded Widget Demo'), ), body: SafeArea( child: Column( children: <Widget>[ Expanded( child: Container( color: Colors.blueGrey, child: Image.network( 'https://images.unsplash.com/photo-1553178504-5 ), ), ), Expanded( child: Container( color: Colors.amber, child: Image.network( 'https://images.unsplash.com/photo-1527353756000-1f7f0e8e0d7d' ), ), ), Expanded( child: Container( color: Colors.deepPurple, child: Image.network( 'https://images.unsplash.com/photo-1536305220829-48b1d4b0ad3d' ), ), ), ], ), ), ), ); }} |
Bu örnek uygulama, birkaç resmi ekranda belirli bir alanı kaplayacak şekilde görüntüler. Expanded Widget, her resim için belirli bir alan tahsis eder ve kullanılabilir alanın tümünü kullanarak resimleri ekranda genişletir.
# Sonuç
Flutter Expanded Widget, Widget’ların belirli bir alanı doldurmasına izin vererek ekranın kullanılabilir alanını en iyi şekilde kullanmalarına olanak tanır. Bu Widget, bir sütun veya satır içinde kullanılabilir ve diğer Widget’larla birlikte kullanılarak ekranı maksimum kapasiteyle kullanır. Yukarıdaki örneği ve örnek uygulamayı kullanarak, Flutter Expanded Widget’ını nasıl kullanabileceğinizi anlamış olmalısınız.
İlk Yorumu Siz Yapın