Stack widget’i, diğer widget’ların üstüne konumlandırılmasına olanak tanıyan bir widget’dır. Genellikle Overlay, GridView, ListView veya Row/Column gibi widget’ların içinde kullanılır.
İşte basit bir örnek:
|
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 50 51 52 53 54 |
import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Stack Örneği'), ), body: Stack( children: [ Positioned( left: 50, top: 50, child: Container( width: 100, height: 100, color: Colors.blue, ), ), Positioned( right: 50, top: 50, child: Container( width: 100, height: 100, color: Colors.green, ), ), Positioned( left: 50, bottom: 50, child: Container( width: 100, height: 100, color: Colors.orange, ), ), Positioned( right: 50, bottom: 50, child: Container( width: 100, height: 100, color: Colors.red, ), ), ], ), ); } } |
Bu örnekte, Stack widget’i, dört farklı Container widget’ını içerir. Her bir Container widget’ı, farklı bir renk ve farklı bir konumda yer alır. Positioned widget’ı, her bir Container widget’ını belirli bir konuma yerleştirir.
Stack widget’ı, diğer widget’ların üstüne konumlandırılabilmesi nedeniyle çok yönlü bir widget’dır. Örneğin, bir resim veya video oynatıcı widget’ı, Stack widget’ı içinde konumlandırılabilir ve üstüne farklı widget’lar eklenebilir.
Flutter’da Stack widget’ının birçok farklı kullanımı ve özelliği vardır. Umarım bu örnekler size başlangıçta yardımcı olmuştur.
Bir resim widget’ı ve bir metin widget’ını Stack widget’ı içinde konumlandırma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Stack( children: [ Image.asset('assets/images/flower.jpg'), Positioned( bottom: 10, left: 10, child: Text( 'Güzel Çiçek', style: TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold, ), ), ), ], ) |
Bir video oynatıcı widget’ı ve üstünde bir düğme widget’ı Stack widget’ı içinde konumlandırma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Stack( children: [ VideoPlayerWidget(), Positioned( top: 10, right: 10, child: FloatingActionButton( onPressed: () {}, child: Icon(Icons.play_arrow), ), ), ], ) |
Bir resim widget’ı, bir ikon ve bir metin widget’ını Stack widget’ı içinde konumlandırma:
|
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 |
Stack( children: [ Image.asset('assets/images/background.jpg'), Positioned( top: 50, left: 10, child: Icon( Icons.favorite, color: Colors.white, size: 50, ), ), Positioned( top: 100, left: 10, child: Text( 'Flutter', style: TextStyle( color: Colors.white, fontSize: 36, fontWeight: FontWeight.bold, ), ), ), ], ) |
Bu örnekler, Stack widget’ının nasıl kullanılabileceği konusunda farklı fikirler vermektedir. İhtiyaçlarınıza göre Stack widget’ını kullanarak, farklı widget’ların üst üste konumlandırılmasıyla, çok çeşitli tasarımlar yapabilirsiniz.
İlk Yorumu Siz Yapın