mydomain
No ADS
No ADS

Flutter StadiumBorder Tutorial with Examples

  1. StadiumBorder
  2. Examples

1. StadiumBorder

No ADS
StadiumBorder is inspired by the shape of a stadium (A box with 2 semicircles on opposite sides).
StadiumBorder is often used with ShapeDecoration to draw borders.
If the rectangle has height greater than width, the two semicircle shapes will be located on top and bottom edges. Otherwise they will be on the left and right sides.
StadiumBorder constructor
const StadiumBorder(
  {BorderSide side: BorderSide.none}
)

2. Examples

No ADS
Example: Using StadiumBorder for a 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")
)
You can also use StadiumBorder for buttons such as ElevatedButton, OutlinedButton and TextButton. However, in this case, StadiumBorder.side will not work because it was overwritten by 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).
    ),
  ),
)
No ADS

Flutter Programming Tutorials

Show More
No ADS