Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme framework’üdür. Flutter, kullanıcı arayüzü tasarımı için birden fazla widget sağlar ve bunlardan biri de “Container” adlı widget’dır. Container, bir kutu şeklinde bir widget’dır ve diğer widget’leri içerebilir veya onları sarmalayabilir. Bu makalede, Flutter Container widget’i hakkında ayrıntılı bilgi vererek, bazı örnekler sunacağım.
Flutter Container Widget’inin Temel Kullanımı
Container widget’i, genellikle bir widget ağacındaki diğer widget’leri sarmalamak veya bir düzeni ayarlamak için kullanılır. Container widget’i birçok özellik sunar, ancak temel özellikleri şunlardır:
- “color” özelliği: Container’ın arka plan rengini ayarlar.
- “padding” özelliği: Container’ın içeriğine eklenen boşlukları belirler.
- “margin” özelliği: Container’ın diğer widget’lere olan uzaklığını belirler.
- “alignment” özelliği: Container’ın içindeki widget’ların hizalamasını belirler.
Container’ın diğer özellikleri arasında boyut, kenar boşluğu, şekil, gölge ve dekorasyon yer alır. Bu özelliklerin hepsi, Container’ı diğer widget’lerin yerleştirilmesi ve düzenlenmesi için çok kullanışlı hale getirir.
İşte basit bir örnek:
|
1 2 3 4 5 |
Container( color: Colors.blue, padding: EdgeInsets.all(16.0), child: Text('Merhaba Dünya!'), ); |
Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve içine bir metin widget’i yerleştirildi. Container’ın arka plan rengi “blue” olarak ayarlandı ve içeriğe eklenen boşluk “16.0” olarak belirlendi. Sonuç olarak, Container’ın içindeki metin widget’i mavi arka plan üzerinde görünecektir.
Container Widget’inin Diğer Özellikleri
Container widget’i, birçok özellik sunar ve burada bazı örnekler vermek istiyorum:
Boyut
Container widget’i, genişlik ve yükseklik gibi boyut özelliklerini ayarlamak için kullanılır. Bu özellikler, genellikle içeriği saran veya sardığı diğer widget’lerin boyutuna bağlıdır.
|
1 2 3 4 5 6 |
Container( width: 200.0, height: 200.0, color: Colors.red, child: Text('Ben bir kutuyum!'), ); |
Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve genişlik ve yükseklik özellikleri “200.0” olarak ayarlandı. Container’ın arka plan rengi “red” olarak belirlenen ve içinde bir metin widget’i yerleştirildi. Sonuç olarak, Container’ın boyutu 200×200 piksel olarak ayarlandı ve içeriği kırmızı arka plan üzerinde görünecektir.
Şekil
Container widget’i, şekil özelliği ile farklı şekillerde oluşturulabilir. Örneğin, “BoxDecoration” sınıfı ile bir dairesel kutu oluşturabilirsiniz.
|
1 2 3 4 5 6 7 8 9 |
Container( width: 150.0, height: 150.0, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.green, ), child: Text('Ben bir daireyim!'), ); |
Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve “BoxDecoration” sınıfı kullanılarak şekil özelliği “BoxShape.circle” olarak ayarlandı. Container’ın boyutu 150×150 piksel olarak ayarlandı ve içindeki metin widget’i yeşil arka plan üzerinde görünecektir.
Kenar Boşluğu ve Gölge
Container widget’i, kenar boşluğu ve gölge özellikleri ile stilize edilebilir. “BoxDecoration” sınıfı ile kenar boşluğu ve gölge özelliklerini ayarlayabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Container( width: 200.0, height: 200.0, decoration: BoxDecoration( color: Colors.yellow, borderRadius: BorderRadius.circular(10.0), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.5), spreadRadius: 2, blurRadius: 5, offset: Offset(0, 3), ), ], ), child: Text('Ben bir kutuyum!'), ); |
Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve “BoxDecoration” sınıfı kullanılarak arka plan rengi “yellow” olarak ayarlandı. Kenar boşluğu “borderRadius” özelliği ile yuvarlatıldı ve gölge “boxShadow” özelliği ile belirlendi. Sonuç olarak, Container’ın boyutu 200×200 piksel olarak ayarlandı ve içindeki metin widget’i sarı arka plan üzerinde görünecektir.
Örnek Proje
Aşağıdaki örnek proje, Container widget’i ile ilgili farklı özellikleri göstermektedir. Projede, Container widget’i kullanılarak bir kart tasarımı oluşturulmuştur. Bu projede, Container widget’i, arka plan rengi, kenar boşluğu, gölge, şekil ve hizalama özellikleri kullanılmıştır.
|
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Container Örnekleri', home: Scaffold( appBar: AppBar( title: Text('Flutter Container Örnekleri'), ), body: Center( child: Container( width: 300, height: 150, margin: EdgeInsets.symmetric(vertical: 10), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 2, blurRadius: 5, offset: Offset(0, 3), ), ], ), child: Row( children: [ Container( width: 100, height: 150, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.only( topLeft: Radius.circular(10), bottomLeft: Radius.circular(10), ), ), child: Icon( Icons.check, color: Colors.white, size: 50, ), ), SizedBox( width: 20, ), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Başlık', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, ), ), SizedBox( height: 10, ), Text( 'İçerik', style: TextStyle( color: Colors.grey, fontSize: 16, ), ), ], ), ), ], ), ), ), ), ), ); |
İlk Yorumu Siz Yapın