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
Steps to add border to container in Flutter:Step 1: Go to the Container in which you want to add a border. Step 2: Add the decoration parameter and assign the BoxDecoration class. Inside the BoxDecoration add the parameter border and set it to Border. all().
Just Add decoration to your container. use BoxDecoration property in decoration. BoxDecoration has borderRadius Property. give specify border radius to your Container.
BorderRadius is a built-in widget in flutter. Its main functionality is to add a curve around the border-corner of a widget. There are in total of five ways in which we can use this widget, the first is by using BorderRadius. all, the radius for all the corners are the same here.
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), ) ], ), ),
There are a couple ways to add a border to a Flutter widget. The most basic way is to wrap your widget in a DecoratedBox
. However, the Container
widget also has a DecoratedBox
built in.
For output as above use a Stack
instead of Row
because of Stack
allows us to make multiple widgets overlay each other and you can align or position your widget using the Align
or Positioned
widget.
Container( height: 65, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.deepPurple.shade100, ), child: Stack( children: <Widget>[ Container( width: 8, decoration: BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(15), bottomLeft: Radius.circular(15)), color: Colors.deepPurple, ), ) ], ), )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With