如何更改 Flutter 中提升按钮的选定文本的颜色？
Posted
技术标签:
【中文标题】如何更改 Flutter 中提升按钮的选定文本的颜色？【英文标题】：How to change the color of the selected text of elevated button in Flutter? 【发布时间】：2021-12-14 16:45:43 【问题描述】：当提升按钮中的文本从黑色选择为白色时，我想更改它们的颜色。 现在，如果我从这些提升的按钮中选择任何选项，背景颜色会发生变化，但文本颜色不会发生变化。但我也想更改文本颜色。 这是我当前代码的示例图像。 谁能帮我解决这个问题，好吗？
Image example
这是我目前这部分的代码 -
class property_selection extends StatefulWidget
const property_selection(Key? key) : super(key: key);
@override
_property_selectionState createState() => _property_selectionState();
int index = -1;
Color enableColor = Colors.red; //your color
Color disableColor = Colors.white; //your color
class _property_selectionState extends State<property_selection>
@override
Widget build(BuildContext context)
return SafeArea(
child: Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
'Select your class',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w500,
fontSize: 30),
),
),
SizedBox(
height: 15.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: ()
setState(()
index = 0;
);
,
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 01',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 0 ? Colors.red : Colors.white,
onPrimary: Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: ()
setState(()
index = 1;
);
,
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 02',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 1 ? Colors.red : Colors.white,
onPrimary: Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: ()
setState(()
index = 2;
);
,
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 03',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 2 ? Colors.red : Colors.white,
onPrimary: Colors.black,
onSurface: Colors.white,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
height: 50,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: ElevatedButton(
child: Text('Next'),
onPressed: ()
Navigator.push(
context,
MaterialPageRoute(builder: (context) => customer_name()),
);
,
),
),
],
),
),
),
);
【问题讨论】：
【参考方案1】：根据类似条件更改ElevatedButton.styleFrom 上的onPrimary: 颜色
onPrimary: index == 2 ? Colors.white : Colors.black, 用于Clas 03 按钮，同样将index==classIndex 更改为其他两个
完整小部件
class property_selection extends StatefulWidget
const property_selection(Key? key) : super(key: key);
@override
_property_selectionState createState() => _property_selectionState();
int index = -1;
Color enableColor = Colors.red; //your color
Color disableColor = Colors.white; //your color
class _property_selectionState extends State<property_selection>
@override
Widget build(BuildContext context)
return SafeArea(
child: Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Text(
'Select your class',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w500,
fontSize: 30),
),
),
SizedBox(
height: 15.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: ()
setState(()
index = 0;
);
,
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 01',
textAlign: TextAlign.left,
// style: TextStyle(
// color: index == 0 ? Colors.white : Colors.black,
// ),
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 0 ? Colors.red : Colors.white,
onPrimary: index == 0 ? Colors.white : Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: ()
setState(()
index = 1;
);
,
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 02',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 1 ? Colors.red : Colors.white,
onPrimary: index == 1? Colors.white : Colors.black,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
height: 60.0,
child: ElevatedButton(
onPressed: ()
setState(()
index = 2;
);
,
child: SizedBox(
width: double.infinity,
child: Text(
'Clas 03',
textAlign: TextAlign.left,
),
),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.5, color: Colors.grey),
primary: index == 2 ? Colors.red : Colors.white,
onPrimary: index == 2 ? Colors.white : Colors.black,
onSurface: Colors.white,
textStyle: const TextStyle(
fontSize: 15,
)),
),
),
SizedBox(
height: 10.0,
),
Container(
margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
height: 50,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: ElevatedButton(
child: Text('Next'),
onPressed: ()
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => customer_name()),
// );
,
),
),
],
),
),
),
);
【讨论】：
非常感谢！它对我有用。 很高兴能帮到你，写flutter的时候有一件事关注effective-dart style 再次感谢。我会尽力做到这一点。感谢您的建议。以上是关于如何更改 Flutter 中提升按钮的选定文本的颜色？的主要内容，如果未能解决你的问题，请参考以下文章