Kenarlığı Kullanma Kılavuzu Flutter

Programlamada Flutter, Kenarlığın kullanılması, UI öğeleriniz için iyi tanımlanmış ana hatlar oluşturmanın çok önemli bir parçasıdır. Kenarlık, resimler, kaplar ve düğmeler gibi öğeler için özel ana hatlar oluşturmanıza olanak tanır. Bu makalede, uygulamanızdaki öğeler için ana hatlar oluşturmak üzere Kenarlığın nasıl kullanılacağını keşfedeceğiz Flutter.

Temel Kenarlık

Border Sınıfı, belirli bir kenarlık oluşturmak için kullanabilirsiniz widget. Aşağıda bir dikdörtgen için kenarlık oluşturmaya bir örnek verilmiştir:

Container(  
  width: 100,  
  height: 100,  
  decoration: BoxDecoration(  
    border: Border.all(width: 2.0, color: Colors.blue), // Create a border with width 2 and blue color  
 ),  
)  

Farklı Kenarlarda Sınır

Ayrıca a öğesinin her bir tarafı için kenarlığı özelleştirebilirsiniz widget:

Container(  
  width: 100,  
  height: 100,  
  decoration: BoxDecoration(  
    border: Border(  
      left: BorderSide(width: 2.0, color: Colors.red),   // Left border  
      right: BorderSide(width: 2.0, color: Colors.green), // Right border  
      top: BorderSide(width: 2.0, color: Colors.blue),    // Top border  
      bottom: BorderSide(width: 2.0, color: Colors.yellow),// Bottom border  
   ),  
 ),  
)  

İle Sınırı Özelleştirme Radius

BorderRadius Kenarlığın köşelerini yuvarlamak için şunları kullanabilirsiniz:

Container(  
  width: 100,  
  height: 100,  
  decoration: BoxDecoration(  
    border: Border.all(width: 2.0, color: Colors.blue),  
    borderRadius: BorderRadius.circular(10.0), // Round corners with a radius of 10  
 ),  
)  

BoxDecoration ile birleştirme

Daha karmaşık kenarlık efektleri ve şekilleri oluşturmak için kullanımını Border ile birleştirebilirsiniz. BoxDecoration

 

Çözüm:

Kenarlığı kullanmak, Flutter UI öğeleriniz için özel ana hatlar oluşturmanın güçlü bir yoludur. Kenarlığın genişliğini, rengini ve köşelerini özelleştirerek uygulamanız için benzersiz ve ilgi çekici arayüzler oluşturabilirsiniz.