Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make one side circular border of widget with flutter?

People also ask

How can I add a border to a widget in flutter?

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


Use BorderRadius.only and provide the sides

return Center(
  child: Container(
    height: 100,
    width: 100,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
      ),
      border: Border.all(
        width: 3,
        color: Colors.green,
        style: BorderStyle.solid,
      ),
    ),
    child: Center(
      child: Text(
        "Hello",
      ),
    ),
  ),
);

Output

enter image description here


You can achieve this by following code for creating your widget :

return Container(
  width: 150.0,
  padding: const EdgeInsets.all(20.0),
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.zero,
      bottomLeft: Radius.zero,
      bottomRight: Radius.zero,
    ),
  ),
  child: Text(
    "hello",
  ),
);

This way you can have your top left sided circular border with Container widget in flutter.


If you want one side of a container rounded you want to use BorderRadius.only and specify which corners to round like this:

Container(
          width: 150.0,
          padding: const EdgeInsets.all(20.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0)),
              color: Colors.white),
          child: Text("hello"),
        ),

Another way of doing this is to use the ClipRRect widget. Simply wrap your widget with ClipRRect and give a radius. You can specify which corner you want to make round.

ClipRRect(
      borderRadius: BorderRadius.only(topRight: Radius.circular(10)),
      child: Container(
        height: 40,
        width: 40,
        color: Colors.amber,
        child: Text('Hello World!'),
      ),
    );

also do can do as follows,

 borderRadius: new BorderRadius.only(
     topLeft: const Radius.circular(30.0),
     bottomLeft: const Radius.circular(30.0),
 ),

Also You can do it with 'Shape Function'.

  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(15.0),
      topLeft: Radius.circular(15.0),
    ),

enter image description here