小部件对实时变化没有反应 - Flutter
在显示警报框时,我试图更改 saveButton
小部件的框阴影,它只是一个按钮。一旦填充 TextFormField
,该按钮就会变为活动状态。但是,直到用户按下键盘上的 Done
或 Submit
后,该按钮才会变为活动或非活动状态。下面是为了更好地理解的视频和供参考的代码。
class AddFacilityEquipmentWidget extends StatelessWidget {
final AddFacilityProvider provider;
AddFacilityyEquipmentWidget({this.provider});
@override
Widget build(BuildContext context) {
return equipmentTypesColumn(context);
}
Widget equipmentTypesColumn(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(Translations.of(context).getEquipment),
addCustomEquipmentButton(context),
],
);
}
Widget addCustomEquipmentButton(BuildContext context) {
return GestureDetector(
onTap: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => addEquipmentAlertWidget(context),
);
},
child: Text("Add Custom Equipment"),
);
}
Widget addEquipmentAlertWidget(BuildContext context) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Container(
child: Column(
children: <Widget>[
upperTitleWidget(context),
SizedBox(height: d_50),
equipmentNameField(context),
SizedBox(height: d_50),
saveButton(context)
],
),
),
);
}
Widget upperTitleWidget(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
Translations.of(context).getAddEquipment,
style: d18fw700Black,
),
Container(
height: d_20,
width: d_20,
child: IconButton(
padding: pd_0,
icon: Icon(
Icons.cancel,
color: greyColor,
),
onPressed: () {
provider.isAddEquipmentButtonActive = false;
provider.addNewEquipmentController.clear();
Navigator.pop(context);
}),
)
],
);
}
Widget equipmentNameField(BuildContext context) {
return Container(
child: TextFormField(
controller: provider.addNewEquipmentController,
keyboardType: TextInputType.text,
onChanged: (text) {
if (text.length > 0) {
provider.isAddEquipmentButtonActive = true;
} else {
provider.isAddEquipmentButtonActive = false;
}
},
),
);
}
Widget saveButton(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
boxShadow: [
provider.isAddEquipmentButtonActive
? BoxShadow() //Box Shadow 1
: BoxShadow(), // Box Shadow 2
],
color: provider.isAddEquipmentButtonActive
? backgroundColor
: deactivatButtonColor,
borderRadius: BorderRadius.circular(d_100)),
child: Text(
Translations.of(context).getAddEquipment,
),
),
);
}
}
编辑:下面是 AddFacilityProvider
类的代码
class AddFacilityProvider extends ChangeNotifier {
List<Facilities> _equipmentList = [
Facilities(text: "Floodlights", key: "Floodlights", isOpen: false),
Facilities(text: "Scoreboard", key: "Scoreboard", isOpen: false),
Facilities(text: "Changing rooms", key: "Changing rooms", isOpen: false),
Facilities(text: "Showers", key: "Showers", isOpen: false),
Facilities(text: "Free parking", key: "Free parking", isOpen: false),
Facilities(
text: "Wheelchair friendly", key: "Wheelchair friendly", isOpen: false),
Facilities(text: "Drinking water", key: "Drinking water", isOpen: false),
Facilities(text: "Sports bar", key: "Sports bar", isOpen: false),
Facilities(text: "Toilets", key: "Toilets", isOpen: false),
];
TextEditingController _addNewEquipmentController =
TextEditingController();
bool _isEnableAddNewFacilityEquipment = false;
bool _isAddEquipmentButtonActive = false;
void toggleAddEquipmentActive(bool value) {
_isAddEquipmentButtonActive = value;
notifyListeners();
}
TextEditingController get addNewEquipmentController =>
_addNewEquipmentController;
set addNewEquipmentController(TextEditingController value) {
_addNewEquipmentController = value;
notifyListeners();
}
bool get isEnableAddNewFacilityEquipment => _isEnableAddNewFacilityEquipment;
set isEnableAddNewFacilityEquipment(bool value) {
_isEnableAddNewFacilityEquipment = value;
notifyListeners();
}
bool get isAddEquipmentButtonActive => _isAddEquipmentButtonActive;
set isAddEquipmentButtonActive(bool value) {
_isAddEquipmentButtonActive = value;
notifyListeners();
}
}
While displaying an Alert box, i'm trying to change the Box Shadow of saveButton
widget which is simply a button. The button is expected to become active as soon as the TextFormField
is populated. But the button does not become active or inactive until the user presses Done
or Submit
on the keyboard. Below is the video for better understanding and the code for the reference.
class AddFacilityEquipmentWidget extends StatelessWidget {
final AddFacilityProvider provider;
AddFacilityyEquipmentWidget({this.provider});
@override
Widget build(BuildContext context) {
return equipmentTypesColumn(context);
}
Widget equipmentTypesColumn(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(Translations.of(context).getEquipment),
addCustomEquipmentButton(context),
],
);
}
Widget addCustomEquipmentButton(BuildContext context) {
return GestureDetector(
onTap: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => addEquipmentAlertWidget(context),
);
},
child: Text("Add Custom Equipment"),
);
}
Widget addEquipmentAlertWidget(BuildContext context) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Container(
child: Column(
children: <Widget>[
upperTitleWidget(context),
SizedBox(height: d_50),
equipmentNameField(context),
SizedBox(height: d_50),
saveButton(context)
],
),
),
);
}
Widget upperTitleWidget(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
Translations.of(context).getAddEquipment,
style: d18fw700Black,
),
Container(
height: d_20,
width: d_20,
child: IconButton(
padding: pd_0,
icon: Icon(
Icons.cancel,
color: greyColor,
),
onPressed: () {
provider.isAddEquipmentButtonActive = false;
provider.addNewEquipmentController.clear();
Navigator.pop(context);
}),
)
],
);
}
Widget equipmentNameField(BuildContext context) {
return Container(
child: TextFormField(
controller: provider.addNewEquipmentController,
keyboardType: TextInputType.text,
onChanged: (text) {
if (text.length > 0) {
provider.isAddEquipmentButtonActive = true;
} else {
provider.isAddEquipmentButtonActive = false;
}
},
),
);
}
Widget saveButton(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
boxShadow: [
provider.isAddEquipmentButtonActive
? BoxShadow() //Box Shadow 1
: BoxShadow(), // Box Shadow 2
],
color: provider.isAddEquipmentButtonActive
? backgroundColor
: deactivatButtonColor,
borderRadius: BorderRadius.circular(d_100)),
child: Text(
Translations.of(context).getAddEquipment,
),
),
);
}
}
Edit: Below is the code of AddFacilityProvider
class
class AddFacilityProvider extends ChangeNotifier {
List<Facilities> _equipmentList = [
Facilities(text: "Floodlights", key: "Floodlights", isOpen: false),
Facilities(text: "Scoreboard", key: "Scoreboard", isOpen: false),
Facilities(text: "Changing rooms", key: "Changing rooms", isOpen: false),
Facilities(text: "Showers", key: "Showers", isOpen: false),
Facilities(text: "Free parking", key: "Free parking", isOpen: false),
Facilities(
text: "Wheelchair friendly", key: "Wheelchair friendly", isOpen: false),
Facilities(text: "Drinking water", key: "Drinking water", isOpen: false),
Facilities(text: "Sports bar", key: "Sports bar", isOpen: false),
Facilities(text: "Toilets", key: "Toilets", isOpen: false),
];
TextEditingController _addNewEquipmentController =
TextEditingController();
bool _isEnableAddNewFacilityEquipment = false;
bool _isAddEquipmentButtonActive = false;
void toggleAddEquipmentActive(bool value) {
_isAddEquipmentButtonActive = value;
notifyListeners();
}
TextEditingController get addNewEquipmentController =>
_addNewEquipmentController;
set addNewEquipmentController(TextEditingController value) {
_addNewEquipmentController = value;
notifyListeners();
}
bool get isEnableAddNewFacilityEquipment => _isEnableAddNewFacilityEquipment;
set isEnableAddNewFacilityEquipment(bool value) {
_isEnableAddNewFacilityEquipment = value;
notifyListeners();
}
bool get isAddEquipmentButtonActive => _isAddEquipmentButtonActive;
set isAddEquipmentButtonActive(bool value) {
_isAddEquipmentButtonActive = value;
notifyListeners();
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论