Question 80162 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter How to change text colour dynamically on tap?

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.

enter image description here

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

Tags:

4

Answers


  1. 0

    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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    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))
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    You can try ToggleButton instead of TextButton

    ToggleButton

    Login or Signup to reply.
  4. 0

    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,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search