Блог

Кто-то знает, как сделать мягкий радиус границы, что-то в этом роде :

Возможно ли это вообще с помощью Флаттера, я не могу понять, как это сделать.

Вы можете достичь этого, используя borderRadius свойство decoration внутренней части a Container .

Например:

 Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
     Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.elliptical(20, 10)),
      ),
    ),
    Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
    ),
  ],
),
 

даст такой результат

с другой стороны, если вы хотите иметь другой цвет для границы, вы можете попробовать это, установив цвет в border свойстве decoration свойства в Container :

 Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            border: Border.all(
              color: Colors.red,
            ),
          ),
          child: Center(
            child: Text('Content...'),
          ),
        ),
      ],
    ),
),
 

в результате этого получается

Вы можете использовать clipRect.

 ClipRRect(
    // Change border radius and type(.zero, .roundrect, or absolute values) to get your desired effect
    borderRadius: BorderRadius.circular(8.0),
    child: Container(color: Colors.grey),
)