Search code examples
fluttertogglebutton

Toggle Button flutter not functioning


I am still a beginner in flutter, I am trying to make a small App to allow the user to convert the units from SI to IP units... to I used ToggleButton, as a try once the ToggleButton toggled a small text at the bottom of the page must be changed, but nothing is happening, can any body help what i did wrong... the code is

class ToggleButtonPage extends StatefulWidget {
  const ToggleButtonPage({Key key}) : super(key: key);

  @override
  _ToggleButtonPageState createState() => _ToggleButtonPageState();
}

class _ToggleButtonPageState extends State<ToggleButtonPage> {
  bool siUnits;
  String siUnitsText;
  String showText;

  List<bool> isSelected2 = [true, false];

  String textShow(String siUnitsText) {
    if (siUnitsText == 'true') {
      showText = 'ooooooo';
    } else {
      showText = 'xxx';
      print('xxx');
    }
    return showText;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            margin: EdgeInsets.only(top: 50.0),
            child: ToggleButtons(
              fillColor: Colors.lightGreen,
              borderWidth: 2,
              borderColor: Colors.blueGrey,
              selectedBorderColor: Colors.black,
              borderRadius: BorderRadius.circular(10),
              children: [
                Text(
                  'SI',
                  style: TextStyle(
                    fontSize: 15,
                  ),
                ),
                Text(
                  'IP',
                  style: TextStyle(
                    fontSize: 15,
                  ),
                ),
              ],
              onPressed: (int newIndex) {
                setState(() {
                  switch (newIndex) {
                    case 0:
                      siUnitsText = 'true';
                      break;
                    case 1:
                      siUnitsText = 'false';
                      break;
                  }

                  for (int index = 0; index < isSelected2.length; index++) {
                    if (index == newIndex) {
                      isSelected2[index] = true;
                    } else {
                      isSelected2[index] = false;
                    }
                  }
                });
                print(siUnitsText);
              },
              isSelected: isSelected2,
            ),
          ),
          Text('Value is equal to  $showText'),
        ],
      ),
    );
  }
}

also here is a photo for the layout enter image description here


Solution

  • showText variable is initially null. You are not setting showText before displaying it in Text widget. If textShow method is for setting up the showText variable, call textShow method inside setState.