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

Question

[tank007]

Добрый день.
Начал изучать 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" в отдельный класс и там всё обработать.
Но не пойму как.

Answer 1

[Вадим Попов]

У вас должен быть 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('Нажми на меня'),
    );
  }
}

Comments

[tank007]

Вадим, спасибо за помощь. Но мне нужно немного другое, нужно что-то на подобии bottomNavigationBar (для класс Scaffold). Т.е. есть Row с кнопками (все серого цвета), я нажимаю на первую, она становиться красной, нажимаю на вторую, первая снова становиться серой, а вторая становиться красной и т.д.
Предложенный вами вариант, не меняет другие кнопки.
Пока нашёл такой вариант.
если не надоест, может потом придумаю вариант лучше)

Row(children: <Widget>[
               TextButton(
                       style: TextButton.styleFrom(primary: battonColor_1, textStyle: TextStyle(fontSize: 18,),),
                       child: Text("Все"),
                       onPressed: () {
                         setState(() {
                           makeStuff("all", true);
                        });
                    },),

                    TextButton(
                      style: TextButton.styleFrom(primary: battonColor_2, textStyle: TextStyle(fontSize: 18,),),
                      child: Text("Первые блюда"),
                      onPressed: () {
                        setState(() {
                           makeStuff("first", false, true);
                      });
},),
                    TextButton(
                      style: TextButton.styleFrom(primary: battonColor_3, textStyle: TextStyle(fontSize: 18,),),
                      child: Text("Вторые блюда"),
                      onPressed: () {
                        setState(() {
                          makeStuff("second", false, false, true,);
                      });
                    },),
])

А в процедуре "makeStuff", обрабатываю переменные "battonColor_1, battonColor_2, battonColor_3".

void makeStuff(stuffGroup, [batton1=false, batton2=false, batton3=false, batton4=false, batton5=false, batton6=false]) {

    battonColor_1 = batton1 ? Colors.red : Colors.grey;
    battonColor_2 = batton2 ? Colors.red : Colors.grey;
    battonColor_3 = batton3 ? Colors.red : Colors.grey;
    battonColor_4 = batton4 ? Colors.red : Colors.grey;
    battonColor_5 = batton5 ? Colors.red : Colors.grey;
    battonColor_6 = batton6 ? Colors.red : Colors.grey;

    stuff.clear();
   .........
   .........
   .........
  }

[Вадим Попов]

tank007, Достаточно сделать переменную selectedTab. И для активной табы делать определённый цвет (в вашем случае красный).

Посмотрите пример реализации Bottom navigation bar

[tank007]

Вадим Попов, ну вот и оптимизация) спасибо