flutter: ListTile how to adapt leading margins and title/subtitle style?

Question

I am building a form made up various Widgets and I would like to align them all.

In the following example, I am using a TextFormField, a ListTile among others.

The problem is related to the alignment of both TextFormField > decoration > icon and the ListTile > leading.

As you can see the ListTile > leading is absolutely not aligned with the TextFormField > decoration > icon.

In the documentation, I could not find any explanation on how to adapt the ListTile > leading "margin left"

Sub-question: How can I style both ListTile title and subtitle so that it looks like the TextFormField?

Any help is more than welcome.

Source code extract:

_buildBody() {
    return new SafeArea(
      top: false,
      bottom: false,
      child: new Form(
        key: _formKey,
        autovalidate: false,
        child: new SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              /* -- Profile Picture -- */
              const SizedBox(height: 24.0),
              _buildProfilePicture(),

              /* -- Alias -- */
              new TextFormField(
                decoration: const InputDecoration(
                  border: const UnderlineInputBorder(),
                  filled: true,
                  icon: const Icon(Icons.person),
                  hintText: 'Enter an alias',
                  labelText: 'Alias *',
                ),
                onSaved: (String value) {
                  profile.alias = value;
                },
                validator: _validateAlias,
              ),
              const SizedBox(height: 24.0),

              /* -- Gender -- */
              _buildGender(context),
              const SizedBox(height: 24.0),

              /* -- Self description -- */
              new TextFormField(
                decoration: const InputDecoration(
                  border: const OutlineInputBorder(),
                  hintText: 'Tell us about yourself',
                  labelText: 'Describe yourself',
                ),
                maxLines: 5,
              ),
              const SizedBox(height: 24.0),

              /* -- Save Button -- */
              new Center(
                child: new RaisedButton(
                  child: const Text('Save'),
                  onPressed: _handleSave,
                ),
              ),
              const SizedBox(height: 24.0),
            ],
          ),
        ),
      ),
    );
  }

_buildGender(BuildContext context) {
    return new GestureDetector(
      child: new ListTile(
        leading: new Container(width: 24.0, height: 24.0, color: Colors.red),//const Icon(Icons.casino),
        title: const Text('Gender'),
        subtitle: new Text(profile.gender),
        trailing: const Icon(Icons.arrow_drop_down),
        dense: true,
      ),
      onTap: () async {
        await showModalBottomSheet<void>(
          context: context,
          builder: (BuildContext context){
            return _buildGenderBottomPicker();
          },
        );
      }
    );
  }

Snapshot: (I have marked the misalignment)

Answer 1

Simply wrap the Icon in Container with height: double.infinity

ListTile(
            leading: Container(
                child:
                    Icon(Icons.account_circle),
                height: double.infinity,)

Answer 2

Costumize predefined leading gap

Ctrl click ListTile Widget > Search _minLeadingWidth (ctrl +f ) > its 40 as default, change to 10 or something

list_tile.dart screenshot

Answer 3

As I couldn't find any straightforward solution adapting the ListTile and there is not way of passing a negative margin to correct the default one set by the ListTile (refer to its source code), I decided to build my own one (simplified version):

Here is the solution I came with:

_buildGender(BuildContext context) {
    List<Widget> children = <Widget>[];
/* -- leading -- */
children.add(new Container(
  width: 40.0,
  alignment: AlignmentDirectional.centerStart,
  child: const Icon(Icons.album, color: Colors.grey),
));

/* -- title & subtitle -- */
children.add(new Expanded(
  child: new Container(
    height: 48.0,
    padding: const EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
    decoration: new BoxDecoration(
      color: Color.fromRGBO(0, 0, 0, 0.05),
      border: new Border(bottom: new BorderSide(color: Colors.black)),
    ),
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Text('Gender',
            style: new TextStyle(color: Colors.blue, fontSize: 12.0)),
        const SizedBox(height: 5.0),
        new Text(profile.gender),
      ],
    ),
  ),
));

/* -- trailing -- **/
children.add(new Container(
  width: 40.0,
  height: 48.0,
  alignment: AlignmentDirectional.centerEnd,
  decoration: new BoxDecoration(
      color: Color.fromRGBO(0, 0, 0, 0.05),
      border: new Border(bottom: new BorderSide(color: Colors.black)),
    ),
  child: const Icon(Icons.arrow_drop_down),
));

return new InkWell(
    child: new Semantics(
      child: new ConstrainedBox(
        constraints: new BoxConstraints(minHeight: 60.0),
        child: new UnconstrainedBox(
          constrainedAxis: Axis.horizontal,
          child: new SafeArea(
            top: false,
            bottom: false,
            child: new Row(children: children),
          ),
        ),
      ),
    ),
    onTap: () async {
      await showModalBottomSheet<void>(
        context: context,
        builder: (BuildContext context) {
          return _buildGenderBottomPicker();
        },
      );
    });

}

and the layout I obtained:

Of course there is still some work to do to improve the code, use the themes and finally make it a Widget but this is the very beginning.

I simply wanted to share this code with you.