Hướng dẫn và ví dụ Flutter RoundedRectangleBorder

RoundedRectangleBorder
Examples
side
borderRadius

1. RoundedRectangleBorder

RoundedRectangleBorder được sử dụng để tạo ra một đường viền hình chữ nhật với các góc tròn. Nó thường được sử dụng với ShapeDecoration để vẽ hình hộp với các góc tròn.

ShapeBorder
OutlinedBorder
Border
CircleBorder
ContinuousRectangleBorder
StadiumBorder
BoxBorder
InputBorder
BorderDirectional
BeveledRectangleBorder
OutlineInputBorder
UnderlineInputBorder

RoundedRectangleBorder constructor

const RoundedRectangleBorder(
    {BorderSide side: BorderSide.none,
    BorderRadiusGeometry borderRadius: BorderRadius.zero}
)

2. Examples

Ví dụ: Sử dụng RoundedRectangleBorder cho một Container.

(ex1)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: RoundedRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

Sử dụng toán tử cộng ( + ) để cộng 2 ShapeBorder để tạo ra một viền kết hợp:

(ex2)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: RoundedRectangleBorder (
          borderRadius: BorderRadius.circular(16.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      ) + RoundedRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 20,
              color: Colors.green
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

Ví dụ: Sử dụng RoundedRectangleBorder để định hình dạng cho một ElevatedButton:

ElevatedButton(
  child: Text("ElevatedButton"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    primary: Colors.red,
    onPrimary: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

Chú ý: Property RoundedRectangleBorder.side sẽ không làm việc với ElevatedButton, TextButton và OutlinedButton, nó bị ghi đè (override) bởi ButtonStyle.side.

ElevatedButton(
  child: Text("ElevatedButton"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    primary: Colors.red,
    onPrimary: Colors.white,
    side: BorderSide(color: Colors.green, width: 3), //  Work!
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(32.0),
        side: BorderSide(color: Colors.yellow, width: 3) // (Not working - Read note!!)
    ),
  ),
)

ElevatedButton.icon(
  icon: Icon(Icons.thumb_up),
  label: Text("Like"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)
// with side:
ElevatedButton.icon(
  icon: Icon(Icons.thumb_up),
  label: Text("Like"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    side: BorderSide(color: Colors.green, width: 3),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

OutlinedButton.icon (
  icon: Icon(Icons.star_outline),
  label: Text("OutlinedButton"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)
// with side:
OutlinedButton.icon (
  icon: Icon(Icons.star_outline),
  label: Text("OutlinedButton"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    side: BorderSide(width: 2.0, color: Colors.green),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

3. side

side - Cung cấp các thông số liên quan tới viền chẳng hạn như mầu sắc, chiều rộng, kiểu dáng.

BorderSide side: BorderSide.none

BorderSide constructor

const BorderSide (
    {Color color: const Color(0xFF000000),
    double width: 1.0,
    BorderStyle style: BorderStyle.solid}
)

Hướng dẫn và ví dụ Flutter BorderSide

Chú ý: Property RoundedRectangleBorder.side sẽ không làm việc với ElevatedButton, TextButton và OutlinedButton, nó bị ghi đè (override) bởi ButtonStyle.side. (Xem thêm ví dụ ở phía trên).

4. borderRadius

borderRadius - cung cấp giá trị bán kính 4 góc của hình chữ nhật.

BorderRadiusGeometry borderRadius: BorderRadius.zero

Hướng dẫn và ví dụ Flutter BorderRadiusGeometry

borderRadius (ex1)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: RoundedRectangleBorder (
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.zero,
              topLeft:   Radius.zero,
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(45)
          ),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)