I can't change my background colour of Textbutton or text in that-CodePudding

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

void main() => runApp(const CustomXylophoneApp());

class CustomXylophoneApp extends StatelessWidget {
  const CustomXylophoneApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              TextButton(
                onPressed: () {
                  AudioCache player = AudioCache();
                  player.play('assets_note1.wav');

                  TextButton.styleFrom(
                      
                      backgroundColor: Colors.blue,
                      foregroundColor: Colors.red);
                },
                child: Text('Tune1'),
              ),

CodePudding user response：

You used style in wrong place!

TextButton(
          onPressed: () {},
          style: TextButton.styleFrom(
            backgroundColor: Colors.amber,
          ),
          child: const Text(
            'Tune1',
            style: TextStyle(color: Colors.black),
          ),
        ),

dont use style in void functions like onPressed

CodePudding user response：

You have two option to do that:

ButtonStyle:

TextButton(
  onPressed: () {},
  style: ButtonStyle(
      backgroundColor:
          MaterialStateProperty.all(Colors.blue)),
  child: Text(
    'Tune1',
    style: TextStyle(color: Colors.black),
  ),
),

styleFrom:

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
        backgroundColor: Colors.blue,
  ),
  child: Text(
    'Tune1',
    style: TextStyle(color: Colors.black),
  ),
),

but I notice that you want to update the background color when play button press, so you can define a variable and when the button pressed change that variable, like this:

Color backgroundColor = Colors.red;

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              TextButton(
                onPressed: () {
                  AudioCache player = AudioCache();
                  player.play('assets_note1.wav');

                  setState(() {
                      backgroundColor = Colors.blue;
                  });
                },
                style: TextButton.styleFrom(
                    backgroundColor: backgroundColor,
                ),
                child: Text('Tune1'),
              ),
      ....
}