androidiosflutterdartuser-interface

Flutter give container rounded border


I'm making a Container(), I gave it a border, but it would be nice to have rounded borders.

This is what I have now:

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

I tried putting ClipRRect on it, but that crops the border away. Is there a solution for this?


Solution

  • Try using the property borderRadius from BoxDecoration

    Something like

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