Question 161649 in Flutter Question posted in
The official Flutter documentation can be found here.

How do I add a left side border to a rounded ListTile in Flutter?

The ListTile shape property does’t appear to support setting a single border so I’ve used wrapped the ListTile in a Container. This works fine when there is no border radius however once you add a border radius the entire ListTile disappears.

Container(
  decoration: BoxDecoration(
    color: Colors.transparent,
    border: Border(
      left: BorderSide(
        color: Colors.green,
        width: 4
      )
    ),
    borderRadius: BorderRadius.circular(20),
  ),
  child: 
    ListTile(
      title: Text("Item1")
    )
)

Runnable example here – https://dartpad.dev/?id=b545f068068456c63725205797a7d24b – just uncomment the border radius line and the ListTile will disappear.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found a solution on a similar question related to the Card widget.

    Container(          
  child: ClipPath(
    clipper: ShapeBorderClipper(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20)
        )
    ),
    child: Container(
      decoration: BoxDecoration(
        border: Border(
          left: BorderSide(color: Colors.green, width: 20)
        ),
        color: Colors.grey,
      ),
      padding: EdgeInsets.all(20.0),
      child: ListTile(title: Text("Item1"))
    ),
  ),
)

  2. 0

    A border will work only on shape that doesn’t have a rounded radius. You can instead add a shadow and add an offset on x axis to move it a little to the left so it looks like a border

    Container(
  decoration: BoxDecoration(
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(20),
  boxShadow: [
      BoxShadow(
        color: Colors.grey,
        spreadRadius: 1,
        blurRadius: 1,
        offset: Offset(-2, 0), // changes position of shadow
      ),
    ],
  ),
  child: 
    ListTile(
      title: Text("Item1")
    )
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search