Cодержание
Руководство Flutter StadiumBorder
View more Tutorials:


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

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

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

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