i want to make a program where theres 2 option and those 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.example.

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

CodePudding user response：

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

CodePudding user response：

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