Home > Software design >  Negative Content Padding in Container
Negative Content Padding in Container

Time:01-10

I have a list with an Container. With a Content Padding of 0 it´s look like this: enter image description here but I want the List Tile (the white writing) in the middle of the box. Here is the part of my Code where the Magic is done:

    return Card(
      color: Color.fromRGBO(25, 29, 30, 100),
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Container(
        height: 70,
        padding: EdgeInsets.fromLTRB(15, 20, 20, 15),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.red,
        ),
      child: ListTile(
        contentPadding: EdgeInsets.symmetric(vertical: 0),
        leading: Checkbox(
          side: const BorderSide(
              color: Colors.white
          ),

Thanks for help in advance

CodePudding user response:

use title in your ListTile like this

ListTile(
       contentPadding: EdgeInsets.symmetric(vertical: 0),
       leading: Checkbox(
               side: const BorderSide(
               color: Colors.white
          ),
     ),
     title: Text('Your text'),
)

CodePudding user response:

Nevermind. I removed the container and changed the code to this:

  return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      color: Colors.red,
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: ListTile(...

It solved the problem with the container and positioned the ListTile in the middle

  •  Tags:  
  • Related