Flattern gibt dem Behälter einen abgerundeten Rand

Lesezeit: 2 Minuten

Benutzeravatar von Karel Debedts
Karel Schulden

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?

Benutzeravatar von Evaldo Bratti
Evaldo Bratti

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: ...
)

  • BorderRadius.circular(20) kann als Abkürzung für verwendet werden BorderRadius.all(Radius.circular(20))

    – Exfridos

    26. März 2021 um 14:23 Uhr


Benutzeravatar von SR Keshav
SR Keshav

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: ...
    )

Benutzeravatar von NavodDinidu
Navod Dinidu

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

Benutzeravatar von Adam Shelby
Adam Shelby

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

Benutzeravatar von Agni Gari
Agni Gari

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

Geben Sie hier die Bildbeschreibung ein

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

ClipOval

Geben Sie hier die Bildbeschreibung ein

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

BoxDekoration

  • Grenze über alle Ecken

Geben Sie hier die Bildbeschreibung ein

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10),
   color: Colors.orange),
   height: 100,
   width: 100,
 );
  • Grenze in einer bestimmten Ecke

Geben Sie hier die Bildbeschreibung ein

 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

Geben Sie hier die Bildbeschreibung ein

  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: ...
)

Benutzeravatar von Hanisha
Hanischa

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

Hier ist Bild

1449470cookie-checkFlattern gibt dem Behälter einen abgerundeten Rand

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy