如何解决如何在底部表单内形成验证步进器?
这个应用程序是一个步进器。在步进器中,我构建添加数据并显示底部表。在底部表中,我们可以从那里添加数据,但在这种情况下,如何在我们单击下一步时验证步进器读取方法底部表(如果用户未填写显示步进器中显示错误的字段)。
这是方法bottomsheet
:
class StepperclassState extends State<Stepperclass> {
void inputRekomen(){
final Formlist formProvider = Provider.of<Formlist>(context,listen: false);
showModalBottomSheet(
//isScrollControlled: true,context: context,backgroundColor: Colors.white,shape : RoundedRectangleBorder(
borderRadius : BorderRadius.vertical( top: Radius.circular(30),)
),builder: (context) => DraggableScrollableSheet(
expand: false,builder: (context,scrollController) => SingleChildScrollView(
controller: scrollController,child: StatefulBuilder(
builder: (BuildContext context,StateSetter stateSetter) {
return Container(
width: MediaQuery.of(context).size.width,decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),),color: Color(0xffFFFFF),child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),color: white),child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 15,left: 145),child: Container(
width: 80,height: 3,decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),color: Colors.black),Padding(
padding: const EdgeInsets.only(top: 30,right: 10,left: 10,bottom: 10),child: Container(
width: MediaQuery.of(context).size.width,decoration: BoxDecoration(color: Color(0xffDCE9F3),borderRadius: BorderRadius.circular(30),child: Form(
key: formKey3,child: Column(
mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.start,children: [
SizedBox(height: 20,Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),child: Text(
'Apa tindakan rekomendasi untuk mencegah kejadian berulang ?',style: blackregstyle.copyWith(
fontSize: 14,SizedBox(height: 30,child: Text(
'Rekomendasi',Padding(
padding: const EdgeInsets.only(top: 10,bottom: 20.0,left: 20,right: 20),child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),borderRadius: BorderRadius.circular(16),child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context,errorText: FormBuilderLocalizations.of(context).requiredErrorText),FormBuilderValidators.minLength(context,3,errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),FormBuilderValidators.email(context,errorText: FormBuilderLocalizations.of(context).emailErrorText ),]),textAlign: TextAlign.start,decoration: InputDecoration(
fillColor: Color(0xfffaebeb),filled: inputteks,contentPadding: EdgeInsets.all(12),border: InputBorder.none,focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),borderSide: BorderSide(color: Color(0xff3F8AE0) ),focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),borderSide: BorderSide(color: Color(0xff3F8AE0),width: 1),enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),borderSide: BorderSide(color: Colors.black,errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),borderSide: BorderSide(color: Color(0xffE64646) ),disabledBorder: InputBorder.none,autofocus: false,controller: rekomen,onChanged: (String value) {
formProvider.tanggaltext(value);
rekomen.selection = TextSelection.fromPosition(TextPosition(offset: rekomen.text.length));
},child: Text(
'Penjelasan',Padding(
padding: const EdgeInsets.only(top: 10,controller: penjelasan,onChanged: (String value) {
formProvider.tanggaltext(value);
penjelasan.selection = TextSelection.fromPosition(TextPosition(offset: penjelasan.text.length));
},child: Text(
'Penanggung Jawab Tindakan Rekomendasi:',SizedBox(height: 5,Padding(
padding: const EdgeInsets.only(left: 20,child: Container(
width: 280,decoration: BoxDecoration(
color: Color(0xffffffff),child: Padding(
padding: const EdgeInsets.only(left: 20,right: 5),Column(
children: [
SizedBox(height: 5,Padding(
padding: const EdgeInsets.only(top: 10,right: 25,left: 25),child: Container(
width: 315,decoration: BoxDecoration(
color: Colors.white,borderRadius: BorderRadius.circular(8),border: Border.all(color: Colors.black),constraints: BoxConstraints(
minHeight: 45,minWidth: 315,child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),child: GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},child: chosenValue == -1 ? Text(
'Penanggung Jawab'
) : Text(
'${penanggung[chosenValue]}'
),)
),GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},child: Icon
(
showdropdown ?
Icons.arrow_drop_up_rounded : Icons.arrow_drop_down_rounded,],Visibility(
visible: showdropdown,child: Stack(
children: [
Container(
height: 100,width: 290,decoration: BoxDecoration(
color: Colors.white,child: Padding(
padding: const EdgeInsets.only(left: 5),child: ListView.builder(
scrollDirection: Axis.vertical,itemCount: penanggung.length,itemBuilder: (BuildContext context,int position) {
return InkWell(
onTap: () {
stateSetter(() {
chosenValue = position;
if ( position == 2){
showTextField1 = true;
showdropdown = false;
buttonshow = false;
}
else{
showTextField1 = false;
showdropdown = false;
buttonshow = true;
}
});
},child: Container(
width: 150,child: Container(
decoration: (chosenValue==position)
? BoxDecoration(
border: Border.all(color: Colors.green))
: null,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
SizedBox(height: 5,Text(penanggung[position],textAlign: TextAlign.left,);
},Visibility(
visible: buttonshow,child: Padding(
padding: const EdgeInsets.only(top: 10,left: 24),child: Container(
height: 44,child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },color: Color(0xff4986CC),shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),child: Text(
'Simpan',style: putihstyle.copyWith(
fontSize: 14,Center(
child: Column(
children: [
Opacity(opacity: loading ? 1.0 : 0,child: CircularProgressIndicator(),)
],Visibility(
visible: showTextField1,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Padding(
padding: const EdgeInsets.only(bottom: 10,child: Container(
height: 40,child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),child: Text(
'Simpan',style: putihstyle.copyWith(
fontSize: 14,);
}
),);
}
}
这是我的步进器
@override
Widget build(BuildContext context) {
CoolStep(
title: 'Identitas',subtitle: 'Isi Identitas Saksi/korban',alignment: Alignment.topCenter,content: Stack(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),child: Container(
width: 461,height: 350,decoration: BoxDecoration(
color: Color(0xffDCE9F3),borderRadius: BorderRadius.circular(23),child: Padding(
padding: const EdgeInsets.all( 20),child: Column(
children: [
Container(
width: 221,height: 146,Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 320,left: 250),child: Column(
crossAxisAlignment: CrossAxisAlignment.end,children: [
FloatingActionButton(onPressed: () => setState(() {
inputRekomen();
}),tooltip: 'Tambahkan',child: Icon(Icons.add,backgroundColor: Color(0xff5D99C5),validation: () {
return null;
},
解决方法
我不确定这是否有助于解决问题,因为问题不够清楚。 首先,您需要将所有步骤都包装在 Form 中,从类属性中设置键。例如:
final _formKey = GlobalKey<FormState>();
然后在构建方法上,在 Form 小部件上设置键:
child: Form(
key: _formKey,...
然后在每个 TextFormField 上放置验证器,例如:
validator: (value) {
if (value!.isEmpty) {
return 'Name is required';
}
return null;
}
然后,当您需要验证/检查底部表中的其他方法时,只需调用这些函数:
if (!_formKey.currentState!.validate()) {
return 'Fill form correctly';
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。