@tank007

Как изменить цвет кнопки при нажатии (flutter)?

Добрый день.
Начал изучать flutter, никак не могу понять как изменить цвет текста кнопки при нажатии на неё.
Т.е. как отображать, что в данный момент это активная кнопка.

Мой код.
SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(children: <Widget>[
                     TextButton(
                      style: TextButton.styleFrom(primary: Colors.grey,),
                      child: Text("Все"),
                      onPressed: () {
                        setState(() {
                          makeStuff("all");
                      });
                    },),
                    TextButton(style: TextButton.styleFrom(primary: Colors.grey,), 
                      child: Text("Первые блюда"), 
                      onPressed: () {
                        setState(() {
                          makeStuff("first");
                      });
                    },),
                    TextButton(style: TextButton.styleFrom(primary: Colors.grey,), 
                      child: Text("Вторые блюда"), 
                      onPressed: () {
                        setState(() {
                          makeStuff("second");
                      });
                    },),


Думаю, что нужно выделить "TextButton" в отдельный класс и там всё обработать.
Но не пойму как.
  • Вопрос задан
  • 115 просмотров
Пригласить эксперта
Ответы на вопрос 1
vadimpopov94
@vadimpopov94
Dev
У вас должен быть StatefulWidget

У которого будет переменная цвета внутри state.

import 'package:flutter/material.dart';

class ButtonWidget extends StatefulWidget {
  const ButtonWidget({Key? key}) : super(key: key);

  @override
  _ButtonWidgetState createState() => _ButtonWidgetState();
}

class _ButtonWidgetState extends State<ButtonWidget> {
  late Color _buttonColor;

  @override
  void initState() {
    //Начальное значение цвета кнопки
    _buttonColor = Colors.red;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        //Здесь меняем переменную цвета кнопки внутри state
        setState(() {
          if (_buttonColor == Colors.red) {
            _buttonColor = Colors.green;
          } else {
            _buttonColor = Colors.red;
          }
        });
      },
      style: ElevatedButton.styleFrom(
        //Здесь указывается, что для цвета нужно взять переменную
        primary: _buttonColor,
      ),
      child: const Text('Нажми на меня'),
    );
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы