Panduan Menggunakan Border in Flutter

Dalam Flutter pengaturcaraan, menggunakan Sempadan adalah bahagian penting dalam mencipta garis besar yang jelas untuk elemen UI anda. Sempadan membolehkan anda membuat garis besar tersuai untuk elemen seperti imej, bekas dan butang. Dalam artikel ini, kami akan meneroka cara menggunakan Border untuk membuat garis besar untuk elemen dalam Flutter aplikasi anda.

Sempadan Asas

Anda boleh menggunakan Border kelas untuk membuat sempadan untuk widget. Di bawah ialah contoh mencipta sempadan untuk segi empat tepat:

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  
 ),  
)  

Sempadan pada Sisi Berbeza

Anda juga boleh menyesuaikan sempadan untuk setiap sisi 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  
   ),  
 ),  
)  

Menyesuaikan Sempadan dengan Radius

Anda boleh gunakan BorderRadius untuk membulatkan sudut sempadan:

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  
 ),  
)  

Menggabungkan dengan BoxDecoration

Anda boleh menggabungkan penggunaan Border dengan BoxDecoration untuk mencipta kesan dan bentuk sempadan yang lebih rumit.

 

Kesimpulan:

Menggunakan Border in Flutter ialah cara yang berkesan untuk membuat garis besar tersuai untuk elemen UI anda. Dengan menyesuaikan lebar, warna dan sudut sempadan, anda boleh mencipta antara muka yang unik dan menarik untuk aplikasi anda.