openplanning

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

  1. StadiumBorder
  2. Examples

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

Các hướng dẫn lập trình Flutter

Show More