Align items in a card using Flutter/Dart

Question

I am trying to better align text, icons, and arrow in a Card/ListTile. I cannot seem to get them to align vertically. I have tried a few solutions that I found on SO but none of them have worked. What am I doing wrong?

Dart code:

class _ClassSettingsState extends State<ClassSettings> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                SizedBox(
                  height: 50.0,
                  child: Card(
                    child: ListTile(
                      leading: Icon(Icons.settings, size: 20.0),
                      title: Text('Settings'),
                      trailing: Icon(Icons.keyboard_arrow_right),
                      onTap: () {
                        print('Settings was tapped');
                        //Navigator.pushNamed(context, TestConfirmation.id);
                      },
                    ),
                  ),
                ),
                SizedBox(
                  height: 50.0,
                  child: Card(
                    child: ListTile(
                      leading: Icon(Icons.message, size: 20.0),
                      title: Text('Messages'),
                      trailing: Icon(Icons.keyboard_arrow_right),
                      onTap: () {
                        print('Message was tapped');
                        //Navigator.pushNamed(context, TestConfirmation.id);
                      },
                    ),
                  ),
                ),

Answer 1

It seems like what's happening is that your sized box is cutting off the bottom of your ListTile. If you take away the height: 50.0, everything is centered.

The ListTile has a minimum height to conform to Material Design Specifications, so if you can, I would recommend just taking away your height: 50.0.

If you need that specific size, you could do something like this:

class MenuOptions extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListItem(
          title: "Settings",
          icon: Icons.settings,
          onTap: () {
            print("Settings Tapped");
          },
        ),
        ListItem(
          title: "Messages",
          icon: Icons.message,
          onTap: () {
            print("Messages Tapped");
          },
        ),
      ],
    );
  }
}

class ListItem extends StatelessWidget {
  final Function onTap;
  final IconData icon;
  final String title;
  const ListItem(
      {@required this.onTap, @required this.icon, @required this.title});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50.0,
      child: Card(
        child: InkWell(
          onTap: onTap,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(flex: 1, child: Icon(icon, size: 20.0)),
              Expanded(flex: 4, child: Text(title)),
              Expanded(flex: 1, child: Icon(Icons.keyboard_arrow_right)),
            ],
          ),
        ),
      ),
    );
  }
}