flutter How to change text colour dynamically on tap?

Question

I want to make a program where 2 options will be written on text and I want to make my program whenever the user choose one of those option the other option will be greyed out.

I've tried using text button, but it's still a bit wacky for my taste.

Answer 1

Try this:

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

You can use stateful widget to change states when button is pressed.

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))
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

You can try ToggleButton instead of TextButton

ToggleButton

Answer 4

You can try this one. I hope this is useful to you !

  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,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}