颤动中凸起按钮的 OnPressed 中的颜色变化

Question

"When you select a color from the drop-down menu, the drop-down button widget's title shows the selected color. Then, when you tap one of the four buttons, only that particular button's background color will change to the selected background color." This is what I want to do it.

This picture shows the screen. There are 4 color options in the DropdownButton. In the beginning, I made maps for the get "Colors.black" etc. Then I wrote a function called "change" and this function for the color palettes.

But I confused about where to call this function. onPressed part of the RaisedButtons is empty right now. In the first RaisedButton,

_favIconColor = ;

That part will be equals to the new color. But I couldn't call the function anywhere.

This is my whole code:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}



class _MyAppState extends State<MyApp> {

String renk;
String decoration;
String x;
List<DropdownMenuItem> frommenuitems = [

DropdownMenuItem(child: Text('Black'),value: 'Black'),
DropdownMenuItem(child: Text('Green'),value: 'Green'),
DropdownMenuItem(child: Text('Orange'),value: 'Orange'),
DropdownMenuItem(child: Text('Blue'),value: 'Blue')];

final Map<String, int> renkmap = {  
  'Black': 0,  
  'Green': 1,  
  'Orange': 2,  
  'Blue': 3};

final Map<String, List> formulas = {  
  '0': [Colors.black],  
  '1': [Colors.green],  
  '2': [Colors.orange],  
  '3': [Colors.blue]};

void change(renk) {

  int newcolor = renkmap[renk];
  var result = formulas[newcolor];

}
Color _favIconColor = Colors.black; //for the set the RaisedButton color to the black in the beginning
@override

Widget build(BuildContext context) {
  final TextStyle header = TextStyle (fontSize: 30, color: Colors.red[500], fontWeight: FontWeight.bold);
  final TextStyle buttontext = TextStyle (fontSize: 25, color: Colors.white, fontWeight: FontWeight.bold);

  return MaterialApp(
    title: 'Color Changing',
    home: Scaffold(
  
    body: Container(
      child: Column(
        children: <Widget> [
          Spacer(), //flex property
          Text('Select a color', style: header),

          DropdownButton(items: frommenuitems, hint: Text('Black', style: TextStyle(color: Colors.black)),
           value: renk,
           onChanged: (value) {
             setState(() {
               renk = value;
               change(renk);  
             });
           }
           ),

           Spacer(), 
           ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: _favIconColor, 
             onPressed: () {
               setState(() {
                 
                 //_favIconColor = ;
               });

             })),


             ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: Colors.black, 
             onPressed: () {

             })),

             ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: Colors.black, 
             onPressed: () {})),

             ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: Colors.black, 
             onPressed: () {}))
            ],
          ),
      ),
    ),
  );}}

Answer 1

you should do this

_favIconColor = Colors.black;


ButtonTheme(
             minWidth: 2000.0,
             height: 100.0, 
             child: RaisedButton(child: Text('Change Color', style: buttontext), color: _favIconColor, 
             onPressed: () {
               setState(() {
                 
                 _favIconColor =newColor ;// the one selected from the drop down menu
               });

             })),

the issue here is that every time you change the color all the Buttons will have the same color ( because of the setState ) if that ok for you , in case you want that every button has its own color you should consider using an array to know which button should change the color

Ps : i don't know what is your change function is used for !! it has no effect here unless it returns the color value or code depends on how you want to use it

Answer 2

I'm sure there are lots of better solutions with more clean codes. But for a temporary workaround, you can try this:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String renk;
  String decoration;
  String x;
  List<DropdownMenuItem> frommenuitems = [
    DropdownMenuItem(child: Text('Black'), value: 'Black'),
    DropdownMenuItem(child: Text('Green'), value: 'Green'),
    DropdownMenuItem(child: Text('Orange'), value: 'Orange'),
    DropdownMenuItem(child: Text('Blue'), value: 'Blue')
  ];

  final Map<String, int> renkmap = {
    'Black': 0,
    'Green': 1,
    'Orange': 2,
    'Blue': 3
  };

  final Map<String, List> formulas = {
    '0': [Colors.black],
    '1': [Colors.green],
    '2': [Colors.orange],
    '3': [Colors.blue]
  };

  Color _favIconColor = Colors.black;

  List<Color> _favIconColorList = [
    Colors.black,
    Colors.black,
    Colors.black,
    Colors.black
  ];

  int selectedIndex = -1;

  //for the set the RaisedButton color to the black in the beginning
  @override
  Widget build(BuildContext context) {
    void change(renk) {
      int newcolor = renkmap[renk];
      var result = formulas[newcolor.toString()][0];
      /**
     * In here, you need to convert int to string, and take the first of the Color list
     */

      // In here, if an item selected, then only it should be change.
      if (selectedIndex == -1) {
        _favIconColorList[0] = result;
        _favIconColorList[1] = result;
        _favIconColorList[2] = result;
        _favIconColorList[3] = result;
      } else {
          _favIconColorList[selectedIndex] = result;    
      }
    }

    final TextStyle header = TextStyle(
        fontSize: 30, color: Colors.red[500], fontWeight: FontWeight.bold);
    final TextStyle buttontext = TextStyle(
        fontSize: 25, color: Colors.white, fontWeight: FontWeight.bold);

    return MaterialApp(
      title: 'Color Changing',
      home: Scaffold(
        body: Container(
          child: Column(
            children: <Widget>[
              Spacer(), //flex property
              Text('Select a color', style: header),

              DropdownButton(
                  items: frommenuitems,
                  hint: Text("Color", style: TextStyle(color: _favIconColor)),
                  value: renk,
                  onChanged: (value) {
                    setState(() {
                      renk = value;
                      change(renk);
                    });
                  }),

              Spacer(),
              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[0],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 0;
                          //_favIconColor = ;
                        });
                      })),

              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[1],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 1;
                        });
                      })),

              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[2],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 2;
                        });
                      })),

              ButtonTheme(
                  minWidth: 2000.0,
                  height: 100.0,
                  child: RaisedButton(
                      child: Text('Change Color', style: buttontext),
                      color: _favIconColorList[3],
                      onPressed: () {
                        setState(() {
                          selectedIndex = 3;
                        });
                      }))
            ],
          ),
        ),
      ),
    );
  }
}

You can define a _favIconColorList to store for each ButtonTheme item's color and a selectedIndex with a default value, -1. If it set to an index of ButtonTheme list by tapping one of them, then the color will set only the selected ButtonTheme. Otherwise, all of the ButtonTheme list will be change.