Add border to a Container with borderRadius in Flutter

Question

Container(
      child: Text(
          'This is a Container',
          textScaleFactor: 2,
          style: TextStyle(color: Colors.black),
      ),

      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          border: Border(
              left: BorderSide(
                  color: Colors.green,
                  width: 3,
              ),
            ),
          ),
      height: 50,
     ),

This is supposed to show a rounded-edged container with a green left border 3px wide, and the child Text "This is a Container". However, it just shows a rounded-edged container with an invisible child and an invisible left border.

When I take out the borderRadius object, the child Text and the green left border is visible, but introducing it hides the left border and child Text again.

The major problem seems to be the custom left border, because using border: Border.all(width: 0) and borderRadius: BorderRadius.circular(10) makes the edges rounded as needed and also shows the child. But now I cant apply the green left border which is quite important in this particular setup.

So is there something I'm doing wrong, or is this a bug in flutter, or is it just something that is not allowed?

Thank you in advance.

Edit: The image below is the end result. The colors don't matter

Answer 1

////Hope this will work for you,Thanks 
import 'package:flutter/material.dart';
class System extends StatefulWidget {
  const System({Key? key}) : super(key: key);

  @override
  _SystemState createState() => _SystemState();
}

class _SystemState extends State<System> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Padding(
        padding: const EdgeInsets.only(top:80.0),
        child: Column(
          children: [
            ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(16.0)),
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(
                    height: 100,
                    width: double.maxFinite,
                    padding: const EdgeInsets.all(16.0),
                    decoration: const BoxDecoration(
                      color: Color(0xffF6EBEC),
                      border: Border(
                        bottom: BorderSide(width: 8.0, color: Color(0xffA24949)),
                      ),
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const CircleAvatar(
                          backgroundColor: Color(0xffA24949),
                          child: Icon(Icons.close,
                              color: Color(0xffF6EBEC), size: 40),
                        ),
                        const SizedBox(width: 10),
                        Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text("Invalid",
                                  style: TextStyle(color: Color(0xffA24949), fontSize: 18)),
                              SizedBox(
                                width: 243,
                                  child: Text("Details do not match the issuer records",overflow: TextOverflow.ellipsis,maxLines: 1,))
                            ])

                      ],
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20,),
            ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(16.0)),
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(
                    height: 100,
                    width: double.maxFinite,
                    padding: const EdgeInsets.all(16.0),
                    decoration: const BoxDecoration(
                      color: Color(0xFFE9F6EB),
                      border: Border(
                        bottom: BorderSide(width: 8.0, color: Color(0xFF69A258),),
                      ),
                    ),
                    child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const CircleAvatar(
                            backgroundColor: Color(0xFF69A258),
                            child: Icon(Icons.check_rounded,
                                color: Color(0xFFE9F6EB), size: 40),
                          ),
                          const SizedBox(width: 15),
                          Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: const [
                                Text("Valid",
                                    style: TextStyle(color: Color(0xFF69A258), fontSize: 18)),
                                Text("Document successfully validated.")
                              ])
                        ]),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

I archieve do a Inkwell (that simulate a button) circular with an icon inside :

InkWell(          
      onTap: (){},
      child: Container(        
               width: 50,
               height: 50,
               decoration: ShapeDecoration(
                             shape: CircleBorder(), //here we set the circular figure
                             color: Colors.red
                           ),
                         child: Center(
                              child: Icon(
                                     Icons.email,
                                     size: 30,
                                      color: Colors.white,
                                      )
                            ),
                        )
)

link example of result: https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png

Answer 3

This might be so late but also it might be useful for others.

You can wrap your Container inside a ClipRRect, give the ClipRRect the radius and give the Container the border!

Example:

ClipRRect(
   borderRadius: const BorderRadius.all(Radius.circular(16.0)),
   child: Container(
     height: 100,
     width: double.maxFinite,
     padding: const EdgeInsets.all(16.0),
     decoration: BoxDecoration(
       border: Border(
         left: BorderSide(width: 8.0, color: Colors.green),
       ),
     ),
   ),
 ),

This should do the UI you lastly posted.

Answer 4

If you want to achieve borderRadius you could also use a PhysicalModel, but you'll have to provide colour. You also can have a shadow for your widget.

PhysicalModel(
  color: Colors.red,
  elevation: 5,
  shadowColor: Colors.blue,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox(width: 75, height: 75),
)

Answer 5

There is an answer here

Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
),

Answer 6

I think an easier way inspired by @pablo 's answer would be to just make a boxShadow with and offset but without any blur.

decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(10),
        ),
        boxShadow: [
          // to make elevation
          BoxShadow(
            color: Colors.black45,
            offset: Offset(2, 2),
            blurRadius: 4,
          ),
          // to make the coloured border
          BoxShadow(
            color: Colors.blue,
            offset: Offset(0, 4),
          ),
        ],
      ),

The decoration above will give us an elevated box which has a blue border in the bottom. Another benefit of this approcah is that you can use it with

borderRadius: BorderRadius.circular(num)

Which means you can have a container with all rounded sides + a colored border.

Please note that the coloured border comes under the original shadow. This is done to prevent the elevation color from darkening the border.

Answer 7

It's not possible to add border: and borderRadius: at the same time, you'll get this error:

A borderRadius can only be given for uniform borders.

You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this:

boxShadow: [
  BoxShadow(color: Colors.green, spreadRadius: 3)
]

Your sample code would be like this:

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

---

Edit: To achieve the example you now provided, you could do this:

Container(
  padding: EdgeInsets.only(left: 12.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.green,
  ),
  height: 50,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0)),
      color: Colors.white,
    ),
    child: Text(
      'This is a Container',
      textScaleFactor: 2,
      style: TextStyle(color: Colors.black),
    ),
  ),
),

Another solution:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.white,
  ),
  height: 50,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        width: 12.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0)),
          color: Colors.green,
        ),
      ),
      Text(
        'This is a Container',
        textScaleFactor: 2,
        style: TextStyle(color: Colors.black),
      )
    ],
  ),
),