skip to Main Content

I want to align the ListTile vertically in the middle of the container. Horizontally, it should stay aligned to the left.

What I have now is this:
enter image description here

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 15),
              child: InkWell(
                onTap: () {
                },
                child: Container(
                    height: 35,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.0),
                      gradient: const LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [Color(0xFFfe4a32), Color(0xFFcf1502)],),
                    ),
                    child: ListTile(
                      title: const Text(
                        "Some text",
                        style: TextStyle(
                            fontSize: 15.0,
                            color: Color(0xFFfe4a32),
                            fontWeight: FontWeight.w500),
                      ),
                      trailing: 
                         const Icon(
                          Icons.arrow_drop_down_outlined,
                          color: Color(0xFFfe4a32),
                          size: 35,
                        ),
                      
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2

Answers


  1. Chosen as BEST ANSWER

    I fixed it like so:

    child: ListTile(
       title: Transform(
          transform: Matrix4.translationValues(0.0, -6, 0.0),
             child: const Text(
    

  2. Only remove the height of the container. It’ll do the work for you.
    But if you also want to decrease the height of the current Container,
    Put dense:true and contentPadding: EdgeInsets.zero inside the ListTile along with removing the height of the Container.

    Or, if you aren’t satisfied with the above outputs, you should try using Row and Column for creating ListTile like widget.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search