Die Anleitung zu Flutter StadiumBorder

StadiumBorder
Examples

1. StadiumBorder

StadiumBorder nimmt die Idee von der Form eines Stadions (stadium) (eine Box mit 2 Halbkreisen auf gegenüberliegenden Seiten).

StadiumBorder wird häufig mit ShapeDecoration verwendet um die Grenze zu malen

Wenn das Rechteck die Höhe höher als die Breite ist, befinden sich die beiden Halbkreisformen am oberen und unteren Rand, andernfalls befinden sie sich auf der linken und rechten Seite

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

StadiumBorder constructor

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

2. Examples

Z.B: Verwenden Sie StadiumBorder für einen 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")
)

Sie können StadiumBorder für die Button wie ElevatedButton, OutlinedButton und TextButton verwenden. Allerdings in diesem Fall macht StadiumBorder.side das nicht denn es durch ButtonStyle.side überschrieben wird.

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

Die Anleitung zu Flutter StadiumBorder

1. StadiumBorder

2. Examples

Anleitungen Flutter

Anleitungen Flutter

Neueste Artikel