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

RoundedRectangleBorder
Examples
side
borderRadius

1. RoundedRectangleBorder

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

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

RoundedRectangleBorder constructor

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

2. Examples

Пример: Использование 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),
    ),
  ),
)

3. side

side - предоставляет параметры, связанные с границей, такие как цвет, ширина, стиль.

BorderSide side: BorderSide.none

BorderSide constructor

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

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

Примечание: Свойство RoundedRectangleBorder.side не будет работать с ElevatedButton, TextButton и OutlinedButton, оно переопределяется (override) ButtonStyle.side. (См. примеры выше).

4. borderRadius

borderRadius - Обеспечивает значения радиуса 4 углов прямоугольника.

BorderRadiusGeometry borderRadius: BorderRadius.zero

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

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