openplanning

Hướng dẫn sử dụng Flutter StadiumBorder

Xem thêm các chuyên mục:

1- StadiumBorder

StadiumBorder lấy ý tưởng từ hình dạng của một sân vận động (stadium) (Một hình hộp với 2 hình bán nguyệt ở 2 cạnh đối diện).
StadiumBorder thường được sử dụng với ShapeDecoration để vẽ viền.
Nếu hình chữ nhật có chiều cao lớn hơn chiều rộng thì 2 hình bán nguyệt (semicircle) sẽ nằm ở cạnh trên và cạnh dưới, ngược lại chúng sẽ nằm ở cạnh trái và phải.
  • TODO Link!
StadiumBorder constructor
const StadiumBorder(
  {BorderSide side: BorderSide.none}
)

2- Examples

Ví dụ: Sử dụng StadiumBorder cho một Container:
(ex1)
Container(
    width: 350,
    height: 200,
    alignment: Alignment.center,
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: StadiumBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    ),
    child: Text("Flutter")
)
Bạn cũng có thể sử dụng StadiumBorder cho các button như ElevatedButton, OutlinedButtonTextButton. Tuy nhiên trong trường hợp này StadiumBorder.side sẽ không làm việc vì 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( width: 3, color: Colors.green), // Work!
      shape: StadiumBorder (
          side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
      )
  ),
)
ElevatedButton (
  child: Text("ElevatedButton"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
      primary: Colors.red,
      onPrimary: Colors.white,
      shape:  StadiumBorder (
          side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
      )
  ),
)
ElevatedButton.icon(
  icon: Icon(Icons.thumb_up),
  label: Text("Like"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    shape: StadiumBorder(
        side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
    ),
  ),
)
// With ButtonStyle.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:  StadiumBorder(
        side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
    ),
  ),
)
OutlinedButton.icon (
  icon: Icon(Icons.star_outline),
  label: Text("OutlinedButton"),
  onPressed: () {},
  style: ElevatedButton.styleFrom( // returns ButtonStyle
    shape: StadiumBorder(
        side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
    ),
  ),
)
// With ButtonStyle.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: StadiumBorder(
        side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
    ),
  ),
)

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.