How do I input a TextButton background color to a function in Flutter/dart

Question

I'm trying to create a function where under buildKey I can input two elements, the background color and the soundNumber so that when buildKey is called I can enter say buildKey(red, 2) or buildKey(colName: red, soundNumber: 2) etc.

The soundNumber element works however no matter what I try I can't get a valid background color input to work.

Any help hugely appreciated.



class _MyHomePageState extends State<MyHomePage> {
  void playSound(int noteNumber) {
    AssetsAudioPlayer.newPlayer().open(
      Audio("/assets/note$noteNumber.wav"),
    );
  }

  Expanded buildKey({required MaterialColor color, required int soundNumber}) {
    return Expanded(
      child: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: color,
        ),
        onPressed: () {
          playSound(soundNumber);
        },
        child: const Text(''),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            buildKey(color: MaterialStateProperty.all(Colors.red), soundNumber: 1),
          ],
        ),
      ),
    );
  }
}

score 1 · Answer 1 · edited Oct 05 '21 at 17:51

1

You have to use MaterialStateProperty class to apply color. Here is the Example:

TextButton(
    child: Text('Your Text'),
    style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)),
    onPressed: () {},
),

edited Oct 05 '21 at 17:51

Dharman

30,962
25
85
135

answered Oct 05 '21 at 17:46

G H Prakash

1,720
10
30

Hi there, thanks. I've updated my question to try and incorporate your answer and also more accurately show the problem I'm trying to solve. I need to know what to put as the input when first defining the buildKey: Expanded buildKey({required MaterialColor color, required int soundNumber}) - where I have MaterialColor color now, then also what to put in the body of the function to name that, then what to put in the BuildKey function when its being called lower down. – Castle Oct 05 '21 at 21:02

score 0 · Answer 2 · answered Oct 06 '21 at 10:16

Was helped with a fix. It kept the original styleFrom on the TextButton instead of using MaterialStateProperty. I was inputing the argument incorrectly so using Color as the data type worked.

Expanded buildKey({required Color colName, required int soundNumber}) {
    return Expanded(
      child: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: colName,
        ),
        onPressed: () {
          playSound(soundNumber);
        },
        child: const Text(''),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            buildKey(colName: Colors.red, soundNumber: 1),
            buildKey(colName: Colors.orange, soundNumber: 2),
            buildKey(colName: Colors.yellow, soundNumber: 3),
            buildKey(colName: Colors.green, soundNumber: 4),
            buildKey(colName: Colors.teal, soundNumber: 5),
            buildKey(colName: Colors.blue, soundNumber: 6),
            buildKey(colName: Colors.purple, soundNumber: 7),
          ],
        ),
      ),
    );
  }
}

How do I input a TextButton background color to a function in Flutter/dart

2 Answers2