How to return the color of the colorScheme. Error: Undefined name 'context'

Question

I would like to ask you for help in solving my problem.

The crux of the problem: I need to return the color theme of my text using the Theme class, which uses the ColorScheme.secondary type in a function that should return the Color. When trying to implement this I get an Undefined name 'context' error. Try correcting the name to one that is defined, or defining the name.

How can I solve this problem.

import 'package:app_calculator/calculator.dart';

class ButtonWidget extends StatelessWidget {
  final String text;
  final VoidCallback onClicked;
  final VoidCallback onClickedLong;

  const ButtonWidget({
    super.key,
    required this.text,
    required this.onClicked,
    required this.onClickedLong,
  });

  @override
  Widget build(BuildContext context) {
    final color = getTextColor(text);
    final double fontSize = Utils.isOperator(text, hasEquals: true) ? 26 : 22;
    final style = TextStyle(
      color: color,
      fontSize: fontSize,
      fontWeight: FontWeight.bold,
    );

    return Expanded(
      child: Container(
        height: double.infinity,
        margin: const EdgeInsets.all(6),
        child: ElevatedButton(
          onPressed: onClicked,
          onLongPress: onClickedLong,
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.transparent,
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
          ),
          child: text == '<'
              ? Icon(Icons.backspace_outlined, color: color)
              : Text(text, style: style),
        ),
      ),
    );
  }

  Color getTextColor(String buttonText) {
    switch (buttonText) {
      case '+':
      case '-':
      case '⨯':
      case '÷':
      case '=':
        return Colors.red;
      case 'AC':
      case '<':
        return Colors.red;
      default:
        return Theme.of(context).colorScheme.secondary; // <---- error
    }
  }
}

class MyDarkTheme {
  static final dark = ThemeData(
    colorScheme: ColorScheme.fromSwatch().copyWith(
      secondary: Pallete.white,
    ),
}

I tried to find information and override the method, but I still don't understand how to solve it.

Answer 1

you are accessing context outside of it's scope.
try moving it to the method build

import 'package:app_calculator/calculator.dart';

class ButtonWidget extends StatelessWidget {
  final String text;
  final VoidCallback onClicked;
  final VoidCallback onClickedLong;

  const ButtonWidget({
    super.key,
    required this.text,
    required this.onClicked,
    required this.onClickedLong,
  });

  @override
  Widget build(BuildContext context) {

     Color getTextColor(String buttonText,) {
    switch (buttonText) {
      case '+':
      case '-':
      case '⨯':
      case '÷':
      case '=':
        return Colors.red;
      case 'AC':
      case '<':
        return Colors.red;
      default:
        return Theme.of(context).colorScheme.secondary; // <---- error
    }
  }
    final color = getTextColor(text,);
    final double fontSize = Utils.isOperator(text, hasEquals: true) ? 26 : 22;
    final style = TextStyle(
      color: color,
      fontSize: fontSize,
      fontWeight: FontWeight.bold,
    );

    return Expanded(
      child: Container(
        height: double.infinity,
        margin: const EdgeInsets.all(6),
        child: ElevatedButton(
          onPressed: onClicked,
          onLongPress: onClickedLong,
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.transparent,
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
          ),
          child: text == '<'
              ? Icon(Icons.backspace_outlined, color: color)
              : Text(text, style: style),
        ),
      ),
    );
  }

 
}

you can also give it a parameter context like this:

import 'package:app_calculator/calculator.dart';

class ButtonWidget extends StatelessWidget {
  final String text;
  final VoidCallback onClicked;
  final VoidCallback onClickedLong;

  const ButtonWidget({
    super.key,
    required this.text,
    required this.onClicked,
    required this.onClickedLong,
  });

  @override
  Widget build(BuildContext context) {
//-----------------------------------------
    final color = getTextColor(text,context);
    final double fontSize = Utils.isOperator(text, hasEquals: true) ? 26 : 22;
    final style = TextStyle(
      color: color,
      fontSize: fontSize,
      fontWeight: FontWeight.bold,
    );

    return Expanded(
      child: Container(
        height: double.infinity,
        margin: const EdgeInsets.all(6),
        child: ElevatedButton(
          onPressed: onClicked,
          onLongPress: onClickedLong,
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.transparent,
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
          ),
          child: text == '<'
              ? Icon(Icons.backspace_outlined, color: color)
              : Text(text, style: style),
        ),
      ),
    );
  }
//-------------------------------------------

  Color getTextColor(String buttonText,context) {
    switch (buttonText) {
      case '+':
      case '-':
      case '⨯':
      case '÷':
      case '=':
        return Colors.red;
      case 'AC':
      case '<':
        return Colors.red;
      default:
        return Theme.of(context).colorScheme.secondary; // <---- error
    }
  }
}