Flutter: How To Have Both Border Radius And Border Color On Bottom, Left And Right

user_15048814 0
Viewed 1077

I am having an issue where I can have border color on the bottom left, right and bottom OR border radius on the bottom left and right corners but I can't get both at the same time, how could I do this?

 child: Container(

    padding: const EdgeInsets.all(10.0),
    alignment: Alignment.centerLeft,
    decoration: BoxDecoration(
      color: Color(0xff333634),

      border: Border(
        right: BorderSide(
          color: Colors.white,
          width: 1.0,
          style: BorderStyle.solid,
        ),
        left: BorderSide(
          color: Colors.white,
          width: 1.0,
          style: BorderStyle.solid,
        ),
        bottom: BorderSide(
          color: Colors.white,
          width: 1.0,
          style: BorderStyle.solid,
        ),
      ),
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(25.0),
          bottomRight: Radius.circular(25.0)),
    ),

  ),
flutter
2 Answers

Wrap the Container with the ClipRRect() or RoundedRectangleBorder() Widget and add the borderRadius: from there.

ClipRRect example:

ClipRRect(
   borderRadius: BorderRadius.only(
   bottomLeft: Radius.circular(25.0),
   bottomRight: Radius.circular(25.0),
   child (...)
),

Full Code of ClipRRect example:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            Text('Test'),
            ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(25.0),
                bottomRight: Radius.circular(25.0),
              ),
              child: Container(
                padding: const EdgeInsets.all(10.0),
                alignment: Alignment.centerLeft,
                decoration: BoxDecoration(
                  color: Color(0xff333634),
                  border: Border(
                    right: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid,
                    ),
                    left: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid,
                    ),
                    bottom: BorderSide(
                      color: Colors.black,
                      width: 1.0,
                      style: BorderStyle.solid,
                    ),
                  ),
                  // borderRadius: BorderRadius.only(
                  //   bottomLeft: Radius.circular(25.0),
                  //   bottomRight: Radius.circular(25.0),
                  // ),
                ),
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
user_81517030 
Container(
      decoration: BoxDecoration(
        color: Colors.blue, //background color 
        border: Border.all(
            color: Colors.black // border color
        ),
        borderRadius: borderRadius: BorderRadius.only(
         bottomLeft: Radius.circular(25.0),
         bottomRight: Radius.circular(25.0)),
      ),
  )
user_148785130
Related