如何更改 Flutter 中提升按钮的选定文本的颜色？
How to change the color of the selected text of elevated button in Flutter?
我想在 select 从黑色变为白色时更改提升按钮中文本的颜色。
现在，如果我 select 这些提升按钮的任何选项，背景颜色会改变，但文本颜色没有变化。但我也想更改文本颜色。
这是我当前代码的示例图像。
谁能帮我解决这个问题？
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()),
);
},
),
),
],
),
),
),
);
}
}
根据
等条件更改 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()),
// );
},
),
),
],
),
),
),
);
}
}
我想在 select 从黑色变为白色时更改提升按钮中文本的颜色。 现在，如果我 select 这些提升按钮的任何选项，背景颜色会改变，但文本颜色没有变化。但我也想更改文本颜色。 这是我当前代码的示例图像。 谁能帮我解决这个问题？
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()),
);
},
),
),
],
),
),
),
);
}
}
根据
等条件更改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()),
// );
},
),
),
],
),
),
),
);
}
}