通过颤动中的单选按钮更改提升的按钮颜色答案

【问题标题】：Change elevated button color via radio buttons in flutter通过颤动中的单选按钮更改提升的按钮颜色
【发布时间】：2022-01-13 05:16:26
【问题描述】：

我想在按下单选按钮时更改提升按钮的颜色。 1.button -> 红色，2.button -> 黄色，3.button -> 绿色。如果条件不起作用，则在 Elevated.stylefrom 中。只有三元条件有效，但仅适用于一种条件。我想添加3个条件。我希望它很清楚。

或者我需要为此创建一个模型吗？

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:task_shopping_app/const/const.dart';
import 'package:task_shopping_app/screens/city_input_screen.dart';
import 'package:task_shopping_app/screens/weather.dart';

class RadioButton extends StatefulWidget {
  @override
  _RadioButtonState createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {
  int selectedValue = 0;
  final enteredCityInfo = TextEditingController();
  String name = '';
  // if selectedValue and group value matches then radio button will be selected.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          ButtonBar(
            alignment: MainAxisAlignment.center,
            children: <Widget>[
              Radio<int>(
                  value: 1,
                  groupValue: selectedValue,
                  onChanged: (value) => setState(() {
                        selectedValue = value!;
                        print(selectedValue);
                      })),
              Radio<int>(
                  value: 2,
                  groupValue: selectedValue,
                  onChanged: (value) => setState(() {
                        selectedValue = value!;
                        print(selectedValue);
                      })),
              Radio<int>(
                  value: 3,
                  groupValue: selectedValue,
                  onChanged: (value) => setState(() {
                        selectedValue = value!;
                        print(selectedValue);
                      })),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(25.0),
            child: TextField(
              controller: enteredCityInfo,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                name = enteredCityInfo.text;
                //Here we want to see user entry for the text field area in the debug console.
                print(name);
                // Get.to(() => WeatherScreen());
              });
            },
            child: Text('Create'),
            style: ElevatedButton.styleFrom(
              primary: selectedValue == 1 ? Colors.red : Colors.yellow,
            ),
          )
        ],
      ),
    );
  }
}

enter code here

【问题讨论】：

标签： flutter dart if-statement colors radio-button

【解决方案1】：

我认为您可以创建一个函数将值转换为Colors

Color valueToColor(int value) {
  switch (value) {
    case 1:
      return Colors.red;
    case 2:
      return Colors.yellow;
    case 3:
      return Colors.green;
    default:
      /// return whatever you like to deal with some exceptional case
  }
}

并使ElevatedButton 的style 参数如下所示

style: ElevatedButton.styleFrom(
              primary: valueToColor(selectedValue),
            ),

【讨论】：

【解决方案2】：

这样用于多个条件：

primary:(selectedValue == 1) ? Colors.red : (selectedValue == 2)? 
Colors.yellow:Colors.green,

【讨论】：