Руководство Flutter StadiumBorder

StadiumBorder
Examples

1. StadiumBorder

StadiumBorder вдохновлен формой стадиона (stadium) (коробка с 2 полукругами на противоположных сторонах).

StadiumBorder часто используется с ShapeDecoration для рисования границ.

Если высота прямоугольника больше ширины, то два полукруга (semicircle) будут расположены по верхнему и нижнему краям. В противном случае они будут на левой и правой сторонах.

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

StadiumBorder constructor

const StadiumBorder(
  {BorderSide side: BorderSide.none}
)

2. Examples

Например: Использование StadiumBorder для 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")
)

Вы также можете использовать StadiumBorder для таких кнопок, как ElevatedButton, OutlinedButton и TextButton. Однако в этом случае StadiumBorder.side не будет работать, потому что он был перезаписан (override) 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).
    ),
  ),
)

Руководство Flutter StadiumBorder

1. StadiumBorder

2. Examples

Pуководства Flutter

Pуководства Flutter

Новейшие статьи