flutter: ListTile, как адаптировать ведущие поля и стиль заголовка / субтитра?

Question

Я создаю форму, составленную из различных виджетов, и я хочу выровнять их все.

В следующем примере я использую TextFormField, ListTile и другие.

Проблема связана с выравниванием как TextFormField> украшение> значок и ListTile>, ведущий.

Как вы можете видеть, ListTile>, ведущий абсолютно не выровнен с TextFormField> украшение> значок.

В документации я не смог найти никакого объяснения о том, как адаптировать ListTile> ведущий «оставленное поле»

Подвопрос : Как мне стилизовать заголовок и субтитры ListTile, чтобыэто похоже на TextFormField?

Любая помощь более чем приветствуется.

Извлечение исходного кода:

_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();
          },
        );
      }
    );
  }

Снимок: (Я отметил смещение)

Answer 1

Поскольку я не смог найти никакого простого решения, адаптирующего ListTile, и нет способа передать отрицательное поле для исправления значения по умолчанию, установленного ListTile (см. Его исходный код), я решил создать свой собственный (упрощенная версия):

Вот решение, с которым я пришел:

_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();
        },
      );
    });

}

и полученный мной макет:

Конечно, еще есть над чем поработать, чтобы улучшить код, использовать темы и, наконец, сделать его виджетом, но это самое начало.

Я просто хотелподелиться этим кодом с вами.