Vodič za korištenje obruba u Flutter

U Flutter programiranju, korištenje obruba ključni je dio stvaranja dobro definiranih obrisa za vaše elemente korisničkog sučelja. Obrub vam omogućuje izradu prilagođenih obrisa za elemente kao što su slike, spremnici i gumbi. U ovom članku ćemo istražiti kako koristiti Border za stvaranje obrisa za elemente unutar vaše Flutter aplikacije.

Osnovna granica

Klasu možete koristiti Border za stvaranje granice za određeni widget. Ispod je primjer stvaranja obruba za pravokutnik:

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

Granica na različitim stranama

Također možete prilagoditi obrub za svaku stranu 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  
   ),  
 ),  
)  

Prilagodba granice s Radius

Možete koristiti BorderRadius za zaokruživanje kutova obruba:

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

Kombinacija s BoxDecoration

Možete kombinirati korištenje Border sa BoxDecoration za stvaranje zamršenijih efekata obruba i oblika.

 

Zaključak:

Korištenje okvira Flutter moćan je način za stvaranje prilagođenih obrisa za elemente korisničkog sučelja. Prilagodbom širine, boje i kutova obruba možete izraditi jedinstvena i privlačna sučelja za svoju aplikaciju.