I can't pass Colors from the widget to the function.

Here's my code

 import 'package:flutter/material.dart';
 import 'package:audioplayers/src/audio_cache.dart';

 void main() => runApp(XylophoneApp());

 class XylophoneApp extends StatelessWidget {

  const XylophoneApp({Key? key}): super(key: key);

   void playSound (int noteNumber){
     final player = AudioCache();
     player.play('note$noteNumber.wav');
   }

   Expanded RenderKeys({ Color color = Colors.red, int noteNumber = 1}){
     
      final Color color;
      return Expanded(
       child: TextButton(
        style: ButtonStyle(
          enableFeedback: false,
          backgroundColor: MaterialStateProperty.all(Colors.color),
        ),
        onPressed: () {
          playSound(noteNumber);
        },
        child: const Text(''),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget> [
              RenderKeys(color : Colors.red, noteNumber: 1),
              RenderKeys(color : Colors.orange, noteNumber: 2),
              RenderKeys(color : Colors.yellow, noteNumber: 3),
              RenderKeys(color : Colors.green, noteNumber: 4),
              RenderKeys(color : Colors.blue, noteNumber: 5),
              RenderKeys(color : Colors.indigo, noteNumber: 6),
              RenderKeys(color : Colors.purple, noteNumber: 7),
            ]
          ),
        ),
      ),
    );
  }
}

Here's the Error that the Terminal Shows:

lib/main.dart:22:61: Error: Member not found: 'color'. backgroundColor: MaterialStateProperty.all(Colors.color),

CodePudding user response：

It worked. and I had to remove the "final" statement and add a class to get the color to null.

import 'package:flutter/material.dart';
import 'package:audioplayers/src/audio_cache.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {

  const XylophoneApp({Key? key}): super(key: key);

  Color? get color => null;

   void playSound (int noteNumber){
     final player = AudioCache();
     player.play('note$noteNumber.wav');
   }

   Expanded RenderKeys({ Color color = Colors.red, int noteNumber = 1}){
     
      
      return Expanded(
       child: TextButton(
        style: ButtonStyle(
          enableFeedback: false,
          backgroundColor: MaterialStateProperty.all(color),
        ),
        onPressed: () {
          playSound(noteNumber);
        },
        child: const Text(''),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget> [
              RenderKeys(color : Colors.red, noteNumber: 1),
              RenderKeys(color : Colors.orange, noteNumber: 2),
              RenderKeys(color : Colors.yellow, noteNumber: 3),
              RenderKeys(color : Colors.green, noteNumber: 4),
              RenderKeys(color : Colors.blue, noteNumber: 5),
              RenderKeys(color : Colors.indigo, noteNumber: 6),
              RenderKeys(color : Colors.purple, noteNumber: 7),
            ]
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

One possible reason might be the you have defined color as a parameter to RenderKeys(). How about you define it as a data member of class XylophoneApp and then call it as parameter. Like so,

 class XylophoneApp extends StatelessWidget {

  const XylophoneApp({Key? key}): super(key: key);

   void playSound (int noteNumber){
     final player = AudioCache();
     player.play('note$noteNumber.wav');
   }

   Color color = Colors.red;
   Expanded RenderKeys({ color, int noteNumber = 1}){
      return Expanded(...);
   }
   ...

This still allows you to change the value later.