Die Anleitung zu Flutter ContinuousRectangleBorder

View more Tutorials:

Anleitungen Flutter

ContinuousRectangleBorder
Examples
side
borderRadius

Kostenlose Website zum Sprachenlernen:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.

Facebook

1- ContinuousRectangleBorder

ContinuousRectangleBorder erstellt einen rechteckigen Rand mit glatten kontinuierlich Übergängen zwischen gerade Kanten und abgerundeten Ecken.

ContinuousRectangleBorder constructor


const ContinuousRectangleBorder(
  {BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero}
)

Im Grunde ist die Verwendungsweise von ContinuousRectangleBorder gleich wie RoundedRectangleBorder. Sie erstellt einen rechteckigen Rand mit der gerundeten Ecke. Allerdings sind die durch ContinuousRectangleBorder erstellten abgerundeten Ecke glatter.

Flutter RoundedRectangleBorder

2- Examples

Z.B: Verwenden Sie ContinuousRectangleBorder für einen Container:

(ex1)


Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

Verwenden Sie den Operator Addition ( + ) um 2 ShapeBorder zur Erstellung eines kombinierten Rand zu additiern:

(ex2)


Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(16.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      ) + ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 20,
              color: Colors.green
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

3- side

side - bietet die Parameter für den Rand wie Farbe, Breite, und Stil an.


BorderSide side: BorderSide.none

BorderSide constructor


const BorderSide (
    {Color color: const Color(0xFF000000),
    double width: 1.0,
    BorderStyle style: BorderStyle.solid}
)

TODO Link?

Hinweis: Das Property ContinuousRectangleBorder.side arbeitet mit ElevatedButton, TextButton und OutlinedButton nicht. Es wird durch ButtonStyle.side überschrieben.

4- borderRadius

borderRadius - bietet Sie den Wert für den 4-Ecken-Radius des Rechtecks an.


BorderRadiusGeometry borderRadius: BorderRadius.zero

TODO Link?


Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.zero,
              topLeft:   Radius.zero,
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(45)
          ),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

View more Tutorials:

Anleitungen Flutter