Inhaltsverzeichnis
Die Anleitung zu Flutter ContinuousRectangleBorder
View more Tutorials:


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