- Basit bir Container widget’i oluşturarak arkaplan rengini belirleme:
1 2 3 |
Container( color: Colors.blue, ) |
- Container widget’ini bir resimle doldurma:
1 2 3 4 5 6 7 8 |
Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/my_image.jpg'), fit: BoxFit.cover, ), ), ) |
- Padding eklemek için Container widget’ini kullanma:
1 2 3 4 |
Container( padding: EdgeInsets.all(16.0), child: Text('Merhaba Flutter!'), ) |
- Kenar boşlukları eklemek için Container widget’ini kullanma:
1 2 3 4 |
Container( margin: EdgeInsets.symmetric(vertical: 16.0), child: Text('Merhaba Flutter!'), ) |
- Daire şeklinde bir Container oluşturma:
1 2 3 4 5 6 7 8 |
Container( width: 100.0, height: 100.0, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.blue, ), ) |
- Bir çerçeve eklemek için Container widget’ini kullanma:
1 2 3 4 5 6 |
Container( decoration: BoxDecoration( border: Border.all(color: Colors.blue, width: 2.0), ), child: Text('Merhaba Flutter!'), ) |
- Dikey hizalama için Container widget’ini kullanma:
1 2 3 4 5 6 7 8 9 10 |
Container( height: 200.0, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Merhaba'), Text('Flutter'), ], ), ) |
- Yatay hizalama için Container widget’ini kullanma:
1 2 3 4 5 6 7 8 9 10 |
Container( height: 200.0, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Merhaba'), Text('Flutter'), ], ), ) |
- Opaklık eklemek için Container widget’ini kullanma:
1 2 3 4 |
Container( color: Colors.blue.withOpacity(0.5), child: Text('Merhaba Flutter!'), ) |
- Kenarlıkların yuvarlatılması için Container widget’ini kullanma:
1 2 3 4 5 6 7 |
Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10.0), color: Colors.blue, ), child: Text('Merhaba Flutter!'), ) |
Container widget’ini kullanarak yuvarlak bir arka plan oluşturma:
1 2 3 4 5 6 7 |
Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.blue, ), child: Text('Merhaba Flutter!'), ) |
Border’ın belirli bir kenarında farklı bir renk kullanma:
1 2 3 4 5 6 7 8 9 10 11 |
Container( decoration: BoxDecoration( border: Border( left: BorderSide(color: Colors.red, width: 4.0), top: BorderSide(color: Colors.blue, width: 2.0), bottom: BorderSide(color: Colors.green, width: 2.0), right: BorderSide(color: Colors.yellow, width: 4.0), ), ), child: Text('Merhaba Flutter!'), ) |
Arka plan rengini gradient ile ayarlama:
1 2 3 4 5 6 7 8 9 10 |
Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.blue, Colors.green], ), ), child: Text('Merhaba Flutter!'), ) |
Bir gölge efekti eklemek için Container widget’ini kullanma:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Container( decoration: BoxDecoration( color: Colors.blue, boxShadow: [ BoxShadow( color: Colors.grey, blurRadius: 5.0, spreadRadius: 1.0, offset: Offset(0.0, 1.0), ), ], ), child: Text('Merhaba Flutter!'), ) |
İçeriği çerçeveye yerleştirerek özel bir tasarım oluşturma:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Container( decoration: BoxDecoration( border: Border.all(color: Colors.blue, width: 2.0), borderRadius: BorderRadius.circular(10.0), ), padding: EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Başlık', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)), SizedBox(height: 8.0), Text('Açıklama', style: TextStyle(fontSize: 16.0)), ], ), ) |
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 |
Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Expanded( child: Container( color: Colors.amberAccent, child: Center(child: Text("Kutu 1")), ), ), Expanded( child: Container( color: Colors.blue, child: Center(child: Text("Kutu 1")), ), ), Expanded( child: Container( color: Colors.tealAccent, child: Center(child: Text("Kutu 1")), ), ), Container( height: 500.0, color: Colors.pink, child: Center(child: Text("Kutu 1")), ), ], ) |
İlk Yorumu Siz Yapın