Изменить оформление TextField на Фокус во флаттере - PullRequest
Новая
       33

Изменить оформление TextField на Фокус во флаттере

0 голосов
/ 10 июня 2018

Я хотел бы иметь другой fillColor для TextField, когда он находится в состоянии фокусировки, и другой в нормальном состоянии.Как добиться такого поведения?

Аналогично, возможно ли настроить другие стили в зависимости от состояния TextField?

Редактировать:

Я стремился к цветному переходу что-то влинии этого для мобильного телефона с флаттером.

Searchbar transition

1 Ответ

0 голосов
/ 11 июня 2018

Вы можете передать свой собственный объект FocusNode в атрибут focusNode вашего текстового поля.FocusNode имеет addListener метод, в котором вы можете вызвать setState и, таким образом, повторно обработать ваш виджет. 

class _ChangingColorsExampleState extends State<ChangingColorsPage> {
  FocusNode _focusNode;

  @override
  void dispose() {
    super.dispose();
    _focusNode.dispose();
  }

  @override
  void initState() {
    super.initState();
    _focusNode = new FocusNode();
    _focusNode.addListener(_onOnFocusNodeEvent);
  }

  _onOnFocusNodeEvent() {
    setState(() {
      // Re-renders
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: _getAppBarBackgroundColor(),
        title: new Text('Changing Colors'),
      ),
      body: new Container(
        color: _getContainerBackgroundColor(),
        padding: new EdgeInsets.all(40.0),
        child: new TextField(
          style: new TextStyle(color: _getInputTextColor()),
          focusNode: _focusNode,
        )
      ),
    );
  }

  Color _getContainerBackgroundColor() {
    return _focusNode.hasFocus ? Colors.blueGrey : Colors.white;
  }

  Color _getAppBarBackgroundColor() {
    return _focusNode.hasFocus ? Colors.green : Colors.red;
  }

  Color _getInputTextColor() {
    return _focusNode.hasFocus ? Colors.white : Colors.pink;
  }
}
...