Как я могу сделать изменение размера суффикса / suffixIcon TextField?

Question

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Container(
                color: Colors.orange,
                child: TextField(
                  decoration: InputDecoration(
                    suffix: IconButton(
                        icon: Icon(Icons.check_circle),
                        onPressed: () {
                          print('222');
                        }),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Как заставить значок check_circle автоматически изменить размер в соответствии с высотой фактического TextField, т. Е. С высотой его курсора?

Answer 1

Очень хороший вопрос ...

Основы, это сброс всех заполнений в TextField без использования IconButton (так как все компоненты Material имеют предопределенные и внутренние отступы, которые вы не можете изменить).

Похоже, суффикс выравнивает базовую линию по тексту, предотвращая взаимодействие чернил материала, в то время как суффиксы правильно центрируются в текстовой области, НО распространяет чернила в TextField.Итак, пока я не смог найти способ сделать это должным образом, возможно, мне не хватает виджета / логики.

Проверьте скриншот внизу, который показывает, почему суффикс не сможет выровнятьс текстом, который находится внутри самой базовой линии, и каретка генерирует большую высоту .....

в первых 2 текстовых полях, поля СЕРЫЙ - суффикс и желтый, суффикс Icon (который центрируется правильно).

Решение 1: (на снимке экрана - красный фон с двумя флажками) Если вы можете (с точки зрения дизайна), сделайте строку и поместите TextField и значок:

var inputBorderDecoration = OutlineInputBorder(
        borderRadius: BorderRadius.zero,
        borderSide: BorderSide(width: 1, color: Colors.black));

    double textHeight = 40;

    // define a width if you want, or let the constrains of the parent define it.
    double inputWidth = double.infinity;

    return Center(
      child: Container(
          width: inputWidth,
          height: textHeight,
          color: Colors.green.withOpacity(.2),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Flexible(
                child: TextField(
                  controller: TextEditingController(text: 'hello world'),
                  style: TextStyle(fontSize: textHeight),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.zero,
                    enabledBorder: inputBorderDecoration,
                    focusedBorder: inputBorderDecoration,
                    filled: true,
                    fillColor: Colors.red.withOpacity(.5),
                  ),
                ),
              ),
              FittedBox(
                child: InkWell(
                  onTap: () => print("touch button"),
                  child: Icon(Icons.check_circle),
                ),
              ),
            ],
          )),
    );

Решение 2: (на скриншоте, последнее текстовое поле, зеленое поле с белым значком) Оберните оформление значка, это лучший подход для пользовательского интерфейса, но TextField по-прежнему будет получать сенсорные события.

var inputBorderDecoration = OutlineInputBorder(
        borderRadius: BorderRadius.zero,
        borderSide: BorderSide(width: 1, color: Colors.black));

    double fontSize = 24;
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Container(
        color: Colors.green.shade50,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 300,
                height: fontSize,
                color: Colors.orange,
                child: TextField(
                  style: TextStyle(fontSize: fontSize, color: Colors.white),
                  decoration: InputDecoration(
                    fillColor: Colors.purple.withOpacity(.5),
                    filled: true,
                    border: inputBorderDecoration,
                    focusedBorder: inputBorderDecoration,
                    enabledBorder: inputBorderDecoration,
                    contentPadding: EdgeInsets.zero,
                    suffixIcon: GestureDetector(
                      onTap: () => print('on tap'),
                      child: Container(
                        color: Colors.green,
                        child: FittedBox(
                          alignment: Alignment.center,
                          fit: BoxFit.fitHeight,
                          child: IconTheme(
                            data: IconThemeData(),
                            child: Icon(
                              Icons.check_circle,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

Решение 3:

Создайте декорации самостоятельно, используя EditableText

Answer 2

Используйте suffixIcon вместо.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Container(
                color: Colors.orange,
                child: TextField(
                  decoration: InputDecoration(
                    suffixIcon: IconButton(
                        icon: Icon(Icons.check_circle),
                        onPressed: () {
                          print('222');
                        }),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}