Флаттер Как динамически изменить цвет текста при нажатии?

Я хочу создать программу, в которой 2 варианта будут написаны в тексте, и я хочу сделать свою программу всякий раз, когда пользователь выбирает один из этих вариантов, другой вариант будет выделен серым цветом.

Я пробовал использовать текстовую кнопку, но на мой вкус это все еще немного странно.

Руководство для начинающих по веб-разработке на React.js
Руководство для начинающих по веб-разработке на React.js
Веб-разработка - это захватывающая и постоянно меняющаяся область, которая постоянно развивается благодаря новым технологиям и тенденциям. Одним из...
Разница между Angular и React
Разница между Angular и React
React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...
Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit
Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit
Веб-скрейпинг, как мы все знаем, это дисциплина, которая развивается с течением времени. Появляются все более сложные средства борьбы с ботами, а...
Калькулятор CGPA 12 для семестра
Калькулятор CGPA 12 для семестра
Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие...
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц....
Как собрать/развернуть часть вашего приложения Angular
Как собрать/развернуть часть вашего приложения Angular
Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?
3
0
78
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Попробуй это:

class _MyHomePageState extends State<MyHomePage> {
  int _selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            InkWell(
              onTap: () {
                setState(() {
                  _selectIndex = 0;
                });
              },
              child: Text(
                'Celcius',
                style: TextStyle(
                  color: _selectIndex == 0 ? Colors.black : Colors.grey,
                ),
              ),
            ),
            const Text(' | '),
            InkWell(
              onTap: () {
                setState(() {
                  _selectIndex = 1;
                });
              },
              child: Text(
                'Fashrenheit',
                style: TextStyle(
                  color: _selectIndex == 1 ? Colors.black : Colors.grey,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Вы можете использовать виджет с состоянием для изменения состояния при нажатии кнопки.

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

enum Temperature { celcius, fahrenheit }

class _HomePageState extends State<HomePage> {
  late Temperature _currentScale;
  late num _currentTemp;
  @override
  void initState() {
    super.initState();
    _currentScale = Temperature.celcius;
    _currentTemp = 24; //multiply by 1.8 add 32 C->F
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                _currentScale == Temperature.celcius
                    ? '$_currentTemp°C'
                    : '${_currentTemp * 1.8 + 32}°F',
                style: Theme.of(context).textTheme.headline2,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                      child: Text(
                        'Celcius',
                        style: TextStyle(
                            color: _currentScale == Temperature.celcius
                                ? Colors.red
                                : Colors.grey),
                      ),
                      onPressed: () =>
                          setState(() => _currentScale = Temperature.celcius)),
                  const SizedBox(
                    width: 10,
                  ),
                  TextButton(
                      child: Text('Fahrenheit',
                          style: TextStyle(
                              color: _currentScale == Temperature.fahrenheit
                                  ? Colors.red
                                  : Colors.grey)),
                      onPressed: () => setState(
                          () => _currentScale = Temperature.fahrenheit))
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}


Вы можете попробовать ToggleButton вместо TextButton

Кнопка переключения

Вы можете попробовать этот. Я надеюсь, что это полезно для вас!

  class MyHomePage extends StatelessWidget {
  
  final RxInt _selectIndex = 0.obs;

  MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(
        () => Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "25",
                style: TextStyle(
                  fontSize: 30,
                  color: _selectIndex.value == 0 ? Colors.grey : Colors.black,
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  InkWell(
                    onTap: () {
                      _selectIndex.value = 0;
                    },
                    child: Text(
                      'Celcius',
                      style: TextStyle(
                        color: _selectIndex.value == 0 ? Colors.black : Colors.grey,
                      ),
                    ),
                  ),
                  const Text(' | '),
                  InkWell(
                    onTap: () {
                      _selectIndex.value = 1;
                    },
                    child: Text(
                      'Fashrenheit',
                      style: TextStyle(
                        color: _selectIndex.value == 1 ? Colors.black : Colors.grey,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Другие вопросы по теме