Руководство Flutter RoundedRectangleBorder
View more Tutorials:
RoundedRectangleBorder можно использовать для создания прямоугольного контура с закругленными углами. Он часто используется с ShapeDecoration, чтобы нарисовать коробку с закругленными углами.

- TODO Link!
- TODO Link!
RoundedRectangleBorder constructor
const RoundedRectangleBorder( {BorderSide side: BorderSide.none, BorderRadiusGeometry borderRadius: BorderRadius.zero} )
Пример: Использование RoundedRectangleBorder для Container.

(ex1)
Container( width: 300, height: 150, decoration: ShapeDecoration( color: Colors.white, shape: RoundedRectangleBorder ( borderRadius: BorderRadius.circular(32.0), side: BorderSide( width: 10, color: Colors.blue ) ) ), child: Center( child: Text( "Flutter", style: TextStyle(fontSize: 50) ) ), )
Используем оператор сложения (+), чтобы добавить 2 ShapeBorders для создания ассоциативной границы:

(ex2)
Container( width: 300, height: 150, decoration: ShapeDecoration( color: Colors.white, shape: RoundedRectangleBorder ( borderRadius: BorderRadius.circular(16.0), side: BorderSide( width: 10, color: Colors.blue ) ) + RoundedRectangleBorder ( borderRadius: BorderRadius.circular(32.0), side: BorderSide( width: 20, color: Colors.green ) ) ), child: Center( child: Text( "Flutter", style: TextStyle(fontSize: 50) ) ), )
Пример: Используем RoundedRectangleBorder для формирования ElevatedButton:

ElevatedButton( child: Text("ElevatedButton"), onPressed: () {}, style: ElevatedButton.styleFrom( // returns ButtonStyle primary: Colors.red, onPrimary: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(32.0), ), ), )
Примечание: Свойство RoundedRectangleBorder.side не работает с ElevatedButton, TextButton и OutlinedButton. Он переопределяется (override) ButtonStyle.side.

ElevatedButton( child: Text("ElevatedButton"), onPressed: () {}, style: ElevatedButton.styleFrom( // returns ButtonStyle primary: Colors.red, onPrimary: Colors.white, side: BorderSide(color: Colors.green, width: 3), // Work! shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(32.0), side: BorderSide(color: Colors.yellow, width: 3) // (Not working - Read note!!) ), ), )

ElevatedButton.icon( icon: Icon(Icons.thumb_up), label: Text("Like"), onPressed: () {}, style: ElevatedButton.styleFrom( // returns ButtonStyle shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(32.0), ), ), ) // with 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: RoundedRectangleBorder( borderRadius: BorderRadius.circular(32.0), ), ), )

OutlinedButton.icon ( icon: Icon(Icons.star_outline), label: Text("OutlinedButton"), onPressed: () {}, style: ElevatedButton.styleFrom( // returns ButtonStyle shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(32.0), ), ), ) // with 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: RoundedRectangleBorder( borderRadius: BorderRadius.circular(32.0), ), ), )
side - предоставляет параметры, связанные с границей, такие как цвет, ширина, стиль.
BorderSide side: BorderSide.none
BorderSide constructor
const BorderSide ( {Color color: const Color(0xFF000000), double width: 1.0, BorderStyle style: BorderStyle.solid} )
- TODO Link!
Примечание: Свойство RoundedRectangleBorder.side не будет работать с ElevatedButton, TextButton и OutlinedButton, оно переопределяется (override) ButtonStyle.side. (См. примеры выше).
borderRadius - Обеспечивает значения радиуса 4 углов прямоугольника.
BorderRadiusGeometry borderRadius: BorderRadius.zero
- TODO Link!

borderRadius (ex1)
Container( width: 300, height: 150, decoration: ShapeDecoration( color: Colors.white, shape: RoundedRectangleBorder ( 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) ) ), )