Flattern gibt dem Behälter einen abgerundeten Rand

Ich mache eine Container()ich habe ihm einen Rand gegeben, aber es wäre schön, abgerundete Ränder zu haben.

Das habe ich jetzt:

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

Ich habe versucht, zu setzen ClipRRect darauf, aber das schneidet die Grenze weg. Gibt es dafür eine Lösung?

Versuchen Sie, die Eigenschaft zu verwenden borderRadius aus BoxDecoration

Etwas wie

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

Um es vollständig zu kreisen:

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

Um es an ausgewählten Stellen zu einem Kreis zu machen:

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

oder

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

Sie können so verwenden. Wenn Sie einen Rand für alle Ecken wünschen, können Sie wie unten verwenden.

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

Wenn Sie abgerundete Ränder nur für ausgewählte Seiten wünschen, können Sie wie unten verwenden.

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

Sie können verwenden ClipRRect Widget:

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

Dies kann auf verschiedene Arten erfolgen.

• Wenn Sie eine einfache abgerundete Ecke verwenden möchten ClipRRect,
  ClipOval
• Wenn Sie mehr Kontrolle über die abgerundeten Ecken haben möchten, verwenden Sie BoxDecoration innerhalb der Container

ClipRRect

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Container(height: 100, width: 100, color: Colors.orange)),

ClipOval

ClipOval(
    child: Container(height: 100, width: 100, color: Colors.orange)),

BoxDekoration

• Grenze über alle Ecken

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10),
   color: Colors.orange),
   height: 100,
   width: 100,
 );

• Grenze in einer bestimmten Ecke

 Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
       topLeft: Radius.circular(40),
       bottomRight: Radius.circular(40)),
      color: Colors.orange),
    height: 100,
    width: 100,
 ),

• Grenze in einer bestimmten Achse

  Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.horizontal(
        right: Radius.circular(60),
        ),
      color: Colors.orange),
    height: 100,
    width: 100,
  );

Verbesserung für die obige Antwort.

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

Um einen vollständigen Kreis zu erstellen, verwenden Sie einfach die Eigenschaft 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,
     ),