Error: no named parameter with the name 'color' Flutter-CodePudding

So I'm new to Dart & Flutter and have run across a problem. I'm trying to learn the layout and make subtle UI changes to text & button widgets. Here I'm trying to change the color of the ElevatedButton to blue

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: ElevatedButton(
        color: Colors.blue,
        child: Text('Answer 1'),
        onPressed: null,
      ),
    );
  }
}

When I run the code I get this error:

Error: no named parameter with the name 'color'

I thought with buttons there were color parameters that you could change. What would be the correct way of implementing this?

CodePudding user response：

You can style ElevatedButton by using the styleFrom

ElevatedButton(
      child: const Text('Button'),
      onPressed: () {},
      style: ElevatedButton.styleFrom(
          primary: Colors.purple,
    ),

or you can use ButtonStyle class

ElevatedButton(
      child: const Text('Button'),
      onPressed: () {},
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.red),
    ),

CodePudding user response：

ElevatedButton(
  style: ElevatedButton.styleFrom({
    Color primary, // set the background color 
    Color onPrimary,  // foreground
  }),
),

CodePudding user response：

In Flutter, Some widget deal with styles and themes for general app theme purposes, because of that it doesn't allow for changing the color directly, but with style parameters:

ElevatedButton(
  style: ElevatedButton.styleFrom({
    Color primary: Colors.green,
    Color onPrimary: Colors.white,  
  }),
),

For more information please visit Flutter documents ElevatedButton.styeFrom and experiment with different parameters.

Welcome to Flutter.

CodePudding user response：

You can style ElevatedButton by :

ElevatedButton(
       style: ButtonStyle(
             backgroundColor: MaterialStateProperty
             .all<Color>(Colors.blue),
             foregroundColor: MaterialStateProperty
            .all<Color>(Colors.white),
        ),
      child: Text('your text'),
      onPressed: null,
),