flutterdartvariables

Why can't I access variables from within own class in flutter


first of all sorry if my terminology is a bit wrong but I'm fairly new to flutter. So I can't access the color variable originalColor which is defined at the top of the class from within the class _LightState extends State<Light> section and I can't work out why. testColGray and testCol2 are static variables from another class which I can access.

class Light extends StatefulWidget {
  Light({required this.newColor, required this.size});
  Color newColor;
  final int size;
  Color originalColor =
      PickerAndSelector.testColGray; 

  @override
  State<Light> createState() => _LightState();
}

class _LightState extends State<Light> {
  String indicator = 'non';
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(6),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (indicator == 'non') {
              indicator = 'SEL';
              selected = true;
            } else {
              indicator = 'non';
              selected = false;
            }

            print(selected);
          });
          if (selected) originalColor = _PickerAndSelectorState.testCol2;
          // can't access originalColor here
        },
        child: Container(
          height: widget.size.toDouble(),
          width: widget.size.toDouble(),
          color: selected ? widget.newColor : widget.originalColor,
          child: Text(indicator),
        ),
      ),
    );
  }
}

I tried to define originalColor in the Widget build(BuildContext context) section but then originalColor isn't accessible from within the Container, infact originalColor now isn't used.

Widget build(BuildContext context) {
    Color originalColor = PickerAndSelector.testColGray;

    return Padding(
      padding: EdgeInsets.all(6),
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (indicator == 'non') {
              indicator = 'SEL';
              selected = true;
            } else {
              indicator = 'non';
              selected = false;
            }

            print(selected);
          });
          if (selected) originalColor = _PickerAndSelectorState.testCol2;
          // can't access originalColor here
        },
        child: Container(
          height: widget.size.toDouble(),
          width: widget.size.toDouble(),
          color: selected ? widget.newColor : widget.originalColor,
          child: Text(indicator),
        ),
      ),
    );
  }

Solution

  • since you are extending State<Light>, you can access the properties of Light by using widget.originalColor

    if (selected) widget.originalColor = _PickerAndSelectorState.testCol2;