Flutter dar contorno arredondado

Estou a fazer um contentor, dei-lhe uma fronteira, mas seria bom ter fronteiras arredondadas.

isto é o que eu tenho agora (ver imagem)

Https://drive.google.com/file/d/1AJ8ytjuUBCDX6mLBE3jmNyJdt7lTGBeW/view?usp=sharing

Container(
      width: screenWidth / 7,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.red[500],
        ),
      ),
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: <Widget>[
            Text(
              '6',
              style: TextStyle(
                  color: Colors.red[500],
                  fontSize: 25),
            ),
            Text(
             'sep',
              style: TextStyle(
                  color: Colors.red[500]),
            )
          ],
        ),
      ),
    );
Tentei colocar cliprect sobre ele, mas isso elimina a fronteira. Existe uma solução para isto? Obrigado antecipadamente!!!

Author: Karel Debedts, 2019-09-03
Source

6 answers

Tente usar a propriedade borderRadius de BoxDecoration

Algo como

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)
 130
Author: Evaldo Bratti, 2019-09-03 20:43:30
Para torná-lo completamente circular. 
Container(
      
      decoration: BoxDecoration(
        
        shape: BoxShape.circle
      ),
Para o fazer circular em locais seleccionados. 
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"),
    ),

Ou 

  Container(
   decoration: BoxDecoration(
    
   borderRadius: BorderRadius.all(Radius.circular(20))
 ),
 child: ...
)
 13
Author: S.R Keshav, 2020-08-11 10:01:28 
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,),
    )
  ),
 1
Author: Sachit Gagneja, 2020-10-25 22:52:59

Aumento para a resposta acima.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)
 0
Author: hsul4n, 2020-08-11 09:45:13

A chave aqui é adicionar um BorderRadius:

Container(    
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[340],
     ),
     borderRadius: BorderRadius.all(Radius.circular(35),
   ),
   child: `enter code here`
),
 0
Author: Rohit Sharma, 2021-02-10 14:56:34

Pode usar o elemento Cliprect: 

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )
 -1
Author: Adam Shelby, 2020-10-06 06:37:58