betacode

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

View more Tutorials:

1- StadiumBorder

StadiumBorder вдохновлен формой стадиона (stadium) (коробка с 2 полукругами на противоположных сторонах).
StadiumBorder часто используется с ShapeDecoration для рисования границ.
Если высота прямоугольника больше ширины, то два полукруга (semicircle)  будут расположены по верхнему и нижнему краям. В противном случае они будут на левой и правой сторонах.
  • TODO Link!
  • TODO Link!
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).
    ),
  ),
)

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.