Как изменить цвет IconButton как TabBar?

Question

Я хочу иметь TabBar рядом с моим заголовком панели приложений, а не под ним, но я не могу добавить TabBar в «действия». Поэтому я сделал ряд IconButton вместо этого. Цель моих IconButtons - изменить номер crossAxisCount для GridView. Моя цель состоит в том, чтобы изменить цвет выбранной кнопки IconButton:

import 'package:flutter/material.dart';

class TestingPage extends StatefulWidget {
  @override
  _TestingPageState createState() => _TestingPageState();
}

class _TestingPageState extends State<TestingPage> {
  int gridNumber = 3;
  bool isSelected = true;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.grey,
          title: Text('Home'),
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.format_align_left,
                color: isSelected ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 3;
                  isSelected = true;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_center,
                color: isSelected ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 1;
                  isSelected = true;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_right,
                color: isSelected ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 5;
                  isSelected = true;
                });
              },
            ),
          ],
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(
                  Icons.directions_car,
                ),
                child: Text('First Tab'),
              ),
              Tab(
                icon: Icon(
                  Icons.directions_transit,
                ),
                child: Text('Second Tab'),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            GridView.count(
              crossAxisCount: gridNumber,
              children: [
                Container(color: Colors.red, height: 150.0),
                Container(color: Colors.purple, height: 150.0),
                Container(color: Colors.green, height: 150.0),
                Container(color: Colors.orange, height: 150.0),
                Container(color: Colors.yellow, height: 150.0),
                Container(color: Colors.pink, height: 150.0),
                Container(color: Colors.cyan, height: 150.0),
                Container(color: Colors.indigo, height: 150.0),
                Container(color: Colors.blue, height: 150.0),
              ],
            ),
            Container(),
          ],
        ),
      ),
    );
  }
}

В моем коде выше вы увидите, что мой цвет меняется в зависимости от bool 'isSelected', но это меняет цвет всех значков. Поэтому я попытался использовать разные переменные для каждой кнопки, например:

bool colorOne = true;
bool colorTwo, colorThree = false;

actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.format_align_left,
                color: colorOne ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 3;
                  colorOne = true;
                  colorTwo = false;
                  colorThree = false;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_center,
                color: colorTwo ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 1;
                  colorOne = false;
                  colorTwo = true;
                  colorThree = false;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_right,
                color: colorThree ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 5;
                  colorOne = false;
                  colorTwo = false;
                  colorThree = true;
                });
              },
            ),
          ],

Но когда я делаю это, я получаю следующую ошибку: «Неудачное утверждение: логическое выражение не должно быть нулевым»

Answer 1

Проблема возникает из-за того, что colorTwo не инициализировано, по умолчанию оно пустое. Вы должны изменить свое объявление следующим образом:

bool colorTwo = false, colorThree = false;

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

int selectedIndex = 0;

Изменить кнопки следующим образом:

<Widget>[
        IconButton(
          icon: Icon(
            Icons.format_align_left,
            color: selectedIndex == 1 ? Colors.cyanAccent : Colors.white,
          ),
          onPressed: () {
            setState(() {
              gridNumber = 3;
              selectedIndex = 1;
            });
          },
        ),
        IconButton(
          icon: Icon(
            Icons.format_align_center,
            color: selectedIndex == 2 ? Colors.cyanAccent : Colors.white,
          ),
          onPressed: () {
            setState(() {
              gridNumber = 1;
              selectedIndex = 2;
            });
          },
        ),
        IconButton(
          icon: Icon(
            Icons.format_align_right,
            color: selectedIndex == 3 ? Colors.cyanAccent : Colors.white,
          ),
          onPressed: () {
            setState(() {
              gridNumber = 5;
              selectedIndex = 3;
            });
          },
        ),
     ],