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

Я хочу изменить цвет фона 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)
                )
              ),
            ),
          ),

См. также:  Измените 'aaa' из легенды geom_text на соответствующий текст метки
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. hello_ey

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

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

    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

  2. hello_ey

    Решил проблему. Я изменил фон TextField, чтобы изменить его с помощью значения фокуса.

    fillColor: _focusNode.hasFocus ? _focusColor : _normalColor,
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: