روش دریافت مقدار از TextField
دریافت مقدار از ویجت TextField یکی از موارد پر کاربرد در طول برنامه نویسی شما می باشد . در لحظه فشرده شدن یک دکمه ، شما باید قادر باشید مقادیر ثبت شده در ویجت های TextField را خوانده و مورد استفاده قرار دهید . برای این منظور دو روش در ویجت TextField وجود دارد :
- استفاده از خصوصیت onChanged و پاس دادن یک متغییر یا یک CallBack Function
- استفاده از کنترلر از نوع TextEditingController
روش اول : استفاده از خصوصیت onChanged
در این روش شما می توانید یک CallBack Function در بیرون از ویجت ایجاد و آن را به داخل ویجت پاس دهید و سپس به خصوصیت onChanged ویجت متصل نمایید ، تا در لحظه تحریک رویداد ، شما بتوانید کدهای مورد نظر خود را اجرا و به این وسیله مقدار ثبت شده کاربر را دریافت نمایید . قطعه کد زیر نمونه ای از این روش پیاده سازی را به نمایش گذاشته است :
class MyText extends StatelessWidget {
final onChangeValue;
MyText({this.onChangeValue});
@override
Widget build(BuildContext context) {
return TextField(
onChanged : onChangeValue,
);
}
}
// استفاده از ویجت تعریف شده در بالا
var _passwordValue;
// تعریف یک کال بک فانکشن جهت دریافت مقدار ثبت شده ویجت
MyText(onChangeValue : (String value){
_passwordValue = value;
})
روش دوم : استفاده از کنترلر از نوع TextEditingController
جهت دریافت مقدار از ویجت TextField به این روش ، باید ابتدا یک کنترلر از نوع TextEditingController تعریف کنید و سپس این کنترلر را به خصوصیت controller ویجت TextField متصل نمایید . حال در هر جا که نیاز دارید مقدار ویجت را دریافت نمایید فقط کافیست از خصوصیت text کنترلر استفاده نمایید . قطعه کد زیر روش پیاده سازی این کار را نمایش می دهد :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'دریافت مقدار از TextField';
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: Directionality(
textDirection: TextDirection.rtl, child: MyStatefulWidget()),
);
}
}
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
// تعریف کنترلر
TextEditingController _controller = TextEditingController();
// تعریف کلید اختصاصی
var _scaffoldKey = GlobalKey<ScaffoldState>();
void dispose() {
// جهت مدیریت حافظه بهتر است در لحظه اتمام کار ویجت ، کنترلر نیز آزاد شود
_controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
// استفاده از کلید اختصاصی
key: _scaffoldKey,
appBar: AppBar(
title: Text('دریافت مقدار از TextField'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
// اتصال کنترلر به خصوصیت کنترلر
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8))),
),
SizedBox(height: 40,),
RaisedButton(
onPressed: () {
setState(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.favorite_border,size: 30,),
Text('مقدار ثبت شده : ${_controller.text}',style: TextStyle(fontSize: 20),),
],
),
));
});
},
child: Text('دریافت اطلاعات'),
)
],
),
),
),
);
}
}
خروجی کد فوق در تصویر زیر قابل مشاهده است :

حالا که به ویجت TextField یک controller متصل کرده اید ، در صورت نیاز می توانید از یک شنونده (listener) نیز استفاده نمایید . شنونده به شما این امکان را می دهد تا در لحظه فشرده شدن هر کلید مقدار ورودی را دریافت و نسبت به آن تصمیم گیری نمایید . ( به عنوان مثال از درج کاراکترهای خاص جلوگیری نمایید )
در این رابطه می توانید در مقاله زیر مطالب مفیدی را مطالعه نمایید :
جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .
امیدوارم این مطلب برای شما مفید باشد .