Я делаю Container (), я дал ему границу, но было бы неплохо, чтобы границы были закругленными.

Вот что у меня сейчас:

Container(
      width: screenWidth / 7,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.red[500],
        ),
      ),
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: [
            Text(
              '6',
              style: TextStyle(
                  color: Colors.red[500],
                  fontSize: 25),
            ),
            Text(
             'sep',
              style: TextStyle(
                  color: Colors.red[500]),
            )
          ],
        ),
      ),
    );

Я попытался поместить на него ClipRRect, но это обрезает границу. Есть ли решение для этого?

Karel Debedts

Ответов: 9

Ответы (9)

Попробуйте использовать свойство borderRadius from BoxDecoration

Что-то вроде

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

просто поместите это в контейнер

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(30))
  ),
)

Ключевым моментом здесь является добавление BorderRadius:

Container(    
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[340],
     ),
     borderRadius: BorderRadius.all(Radius.circular(35),
   ),
   child: `enter code here`
),
Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      border: Border.all(
        color: HexColor('#C88A3D'),
        width: 3.0
      )
    ),
    child: Container(
      decoration: new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      color: Colors.white,),
    )
  ),

Вы можете использовать ClipRRect Виджет:

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )

Можно так использовать. Если вам нужна граница для всех углов, вы можете использовать как показано ниже.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(12.0),
    ),
  ),
),

Если вам нужны закругленные границы только для выбранных сторон, вы можете использовать, как показано ниже.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
      topRight: Radius.circular(10),
    ),
  ),
  child: Text('Text'),
),

Чтобы создать полный круг, просто используйте свойство shape:

Container(
   padding: const EdgeInsets.all(4),
   decoration: BoxDecoration(
     shape: BoxShape.circle,
     color: Colors.black,
   ),                            
   child: Icon(
      Icons.add,
      size: 15.0,
      color: Colors.white,
     ),
                               
                                

Here is picture

Улучшение для приведенного выше ответа.

Контейнер (
  украшение: BoxDecoration (
    граница: Border.all (
      цвет: Colors.red [500],
    ),
   borderRadius: BorderRadius.circular (20) // используйте вместо BorderRadius.all (Radius.circular (20))
  ),
  ребенок: ...
)

Чтобы полностью обвести:

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
      ),
    )

Чтобы сделать круг в выбранных точках:

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0)),
      ),
      child: Text("hello"),
    ),

или

  Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: ...
    )

2022 WebDevInsider