ویجت فرم امکانات خوبی جهت کار با مقادیر ثبت شده کاربر در اختیار شما قرار می دهد . یکی از قابلیت های کلیدی این ویجت اعتبارسنجی (validation) می باشد . برای استفاده از قابلیت اعتبارسنجی ویجت فرم ابتدا لازم است یک کلید انحصاری (GlobalKey) ایجاد نماییم و سپس این کلید را به ویجت فرم متصل نماییم و در انتها نیز با استفاده از خصوصیات کلید نسبت به اعتبارسنجی مقادیر داخل فرم اقدام نماییم . برای اعتبارسنجی فرم ، طبق مراحل زیر عمل نمایید :
۱- ابتدا یک کلید انحصاری (GlobalKey) برای فرم خود ایجاد نمایید :
// ویجت فرم سفارشی را تعریف کنید
// توجه داشته باشید از نوع استیت فول ویجت است
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// این کلاس داده های مربوط به فرم را در خود نگه می دارد
class MyCustomFormState extends State<MyCustomForm> {
// ایجاد یک کلید انحصاری که ویجت فرم را بطور خاص مشخص کند
// و اعتبار سنجی فرم را مجاز می کند
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// با استفاده از _formKey ایجاد شده در بالا ، ویجت فرم بسازید
return Form(
key: _formKey,
child: Column(
children: <Widget>[
// در ادامه ویجت متن و دکمه را در اینجا اضافه خواهیم کرد
]
)
);
}
}
- // ویجت فرم سفارشی را تعریف کنید
- // توجه داشته باشید از نوع استیت فول ویجت است
- class MyCustomForm extends StatefulWidget {
- @override
- MyCustomFormState createState() {
- return MyCustomFormState();
- }
- }
- // این کلاس داده های مربوط به فرم را در خود نگه می دارد
- class MyCustomFormState extends State<MyCustomForm> {
- // ایجاد یک کلید انحصاری که ویجت فرم را بطور خاص مشخص کند
- // و اعتبار سنجی فرم را مجاز می کند
- final _formKey = GlobalKey<FormState>();
- @override
- Widget build(BuildContext context) {
- // با استفاده از _formKey ایجاد شده در بالا ، ویجت فرم بسازید
- return Form(
- key: _formKey,
- child: Column(
- children: <Widget>[
- // در ادامه ویجت متن و دکمه را در اینجا اضافه خواهیم کرد
- ]
- )
- );
- }
- }
// ویجت فرم سفارشی را تعریف کنید
// توجه داشته باشید از نوع استیت فول ویجت است
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// این کلاس داده های مربوط به فرم را در خود نگه می دارد
class MyCustomFormState extends State<MyCustomForm> {
// ایجاد یک کلید انحصاری که ویجت فرم را بطور خاص مشخص کند
// و اعتبار سنجی فرم را مجاز می کند
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// با استفاده از _formKey ایجاد شده در بالا ، ویجت فرم بسازید
return Form(
key: _formKey,
child: Column(
children: <Widget>[
// در ادامه ویجت متن و دکمه را در اینجا اضافه خواهیم کرد
]
)
);
}
}
۲- ویجت TextFormField با قابلیت validation را به کلاس فوق اضافه نمایید :
TextFormField(
// اعتبار سنج متنی را که کاربر وارد کرده است دریافت می کند
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
);
- TextFormField(
- // اعتبار سنج متنی را که کاربر وارد کرده است دریافت می کند
- validator: (value) {
- if (value.isEmpty) {
- return 'Please enter some text';
- }
- return null;
- },
- );
TextFormField(
// اعتبار سنج متنی را که کاربر وارد کرده است دریافت می کند
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
);
با استفاده از کلیدی که قبلا ایجاد کرده ایم و خصوصیت currentState وضعیت validate را کنترل نمایید :
RaisedButton(
onPressed: () {
// در صورتی که تمام مقادیر داخل فرم دارای اعتبار باشند مقدار بازگشتی این تابع صحیح است
if (_formKey.currentState.validate()) {
// اگر اطلاعات معتبر است واکنش مناسب را نشان دهید
// اطلاعات را به سرور ارسال نمایید یا در بانک محلی ذخیره نمایید
Scaffold
.of(context)
.showSnackBar(SnackBar(content: Text('پردازش اطلاعات شروع شد ...')));
}
},
child: Text('Submit'),
);
- RaisedButton(
- onPressed: () {
- // در صورتی که تمام مقادیر داخل فرم دارای اعتبار باشند مقدار بازگشتی این تابع صحیح است
- if (_formKey.currentState.validate()) {
- // اگر اطلاعات معتبر است واکنش مناسب را نشان دهید
- // اطلاعات را به سرور ارسال نمایید یا در بانک محلی ذخیره نمایید
- Scaffold
- .of(context)
- .showSnackBar(SnackBar(content: Text('پردازش اطلاعات شروع شد ...')));
- }
- },
- child: Text('Submit'),
- );
RaisedButton(
onPressed: () {
// در صورتی که تمام مقادیر داخل فرم دارای اعتبار باشند مقدار بازگشتی این تابع صحیح است
if (_formKey.currentState.validate()) {
// اگر اطلاعات معتبر است واکنش مناسب را نشان دهید
// اطلاعات را به سرور ارسال نمایید یا در بانک محلی ذخیره نمایید
Scaffold
.of(context)
.showSnackBar(SnackBar(content: Text('پردازش اطلاعات شروع شد ...')));
}
},
child: Text('Submit'),
);
از دیگر قابلیت های کلید (GlobalKey) ، ریست کردن فرم است . با این عمل کل اطلاعات ثبت شده کاربر پاک شده و فرم آماده ثبت مجدد اطلاعات می گردد .
_formKey.currentState.reset();
- _formKey.currentState.reset();
_formKey.currentState.reset();
جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .
امیدوارم این مطلب برای شما مفید باشد .