Как я могу динамически изменять fillColor InputDecoration во флаттере?

11.06.2021Рубрика: ВопросыАвтор: admin

Я хочу изменить цвет фона TextFormField, когда я выбрал TextFormField для ввода значения.

по умолчанию: цвет фона TextFormField серый в фокусе: цвет фона TextFormField синий.

Что я должен делать?

    const _lowColor = Colors.redAccent;  // use your own colors
    const _highColor = Colors.yellow;

    Color _field1Color = _lowColor;


Focus(
     onFocusChange: (hasFocus) {
            setState(() =>
                _field1Color = hasFocus ? _highColor : _lowColor)
              );
            },
            child: TextFormField(
              obscureText: (textType == "password") ? true : false,
              controller: (controller != null) ? controller : null,
              focusNode: _thisFocus,
              validator: (value) => (value.isEmpty) ? "Enter the Text" : null,
              style: _inputStyle,
              onFieldSubmitted: (String v) => {
                if (onFieldSubmitted != null) {
                  onFieldSubmitted(v)
                }
              },
              decoration: InputDecoration(
                labelText: placeHolder,
                labelStyle: _labelStyle,
                filled: true,
                fillColor: _field1Color,
                contentPadding: EdgeInsets.only(top: 4,bottom: 4,left: 6,right: 6),
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0xffE8E8E8), width: 1.0),
                    borderRadius: BorderRadius.circular(10)
                ),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0xff3FC4FF), width: 1.0),
                    borderRadius: BorderRadius.circular(10)
                )
              ),
            ),
          ),

Post Views: 89

См. также: SWIFT: Как программно установить размер кадра представления коллекции, чтобы он был равен его родительскому виду?

2 flutter

Комментарии: 2

hello_ey 11.06.2021 в 00:00

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

Нажмите здесь, чтобы увидеть дизайн

Container inputBox(String tabName,bool hidePassword){
    return Container(
        height: 50,
        margin: EdgeInsets.symmetric(vertical: 15.0, horizontal: 54.0,),
        child: TextField(
          obscureText: hidePassword,
          style: TextStyle(color: Colors.white),
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: Color(0xFF579FAF), width: 2.0),
              borderRadius: BorderRadius.circular(7.0),
            ),
            labelText: tabName,
            labelStyle: TextStyle(color: Colors.white),
            contentPadding: EdgeInsets.symmetric(horizontal: 20),
            focusedBorder:OutlineInputBorder(
              borderSide: BorderSide(color: Color(0xFF579FAF), width: 2.0),
              borderRadius: BorderRadius.circular(7.0),
            ),
          ),
        )
    );
  }

Извините, я хочу изменить цвет фона TextField. Например, нормальный цвет фона статуса — белый, а цвет фона — синий. — person hello_ey; 12.06.2021

Ответить

hello_ey 14.06.2021 в 00:00
Решил проблему. Я изменил фон TextField, чтобы изменить его с помощью значения фокуса.
```
fillColor: _focusNode.hasFocus ? _focusColor : _normalColor,
```
Ответить

Добавить комментарий