title: flutter: ListTile how to adapt leading margins and title/subtitle style?
body: <p>I am building a form made up various Widgets and I would like to align them all.</p>
  
  <p>In the following example, I am using a TextFormField, a ListTile among others.</p>
  
  <p>The problem is related to the alignment of both TextFormField > decoration > icon and the ListTile > leading.</p>
  
  <p>As you can see the ListTile > leading is absolutely not aligned with the TextFormField > decoration > icon.</p>
  
  <p>In the documentation, I could not find any explanation on how to adapt the ListTile > leading "margin left"</p>
  
  <p><em>Sub-question</em>: How can I style both ListTile title and subtitle so that it looks like the TextFormField?</p>
  
  <p>Any help is more than welcome.</p>
  
  <p>Source code extract:</p>
  
  <pre><code>_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: &lt;Widget&gt;[
                /* -- 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&lt;void&gt;(
            context: context,
            builder: (BuildContext context){
              return _buildGenderBottomPicker();
            },
          );
        }
      );
    }
  </code></pre>
  
  <p>Snapshot:
  (I have marked the misalignment)
  <a href="https://i.stack.imgur.com/mgCSU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mgCSU.png" alt="enter image description here"></a></p>