روش دریافت مقدار از TextField

تعداد بازدید ها : 1,478 بازدید
 روش دریافت مقدار از TextField

دریافت مقدار از ویجت TextField یکی از موارد پر کاربرد در طول برنامه نویسی شما می باشد . در لحظه فشرده شدن یک دکمه ، شما باید قادر باشید مقادیر ثبت شده در ویجت های TextField را خوانده و مورد استفاده قرار دهید . برای این منظور دو روش در ویجت TextField وجود دارد :

  1. استفاده از خصوصیت onChanged و پاس دادن یک متغییر یا یک CallBack Function
  2. استفاده از کنترلر از نوع 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

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

در این رابطه می توانید در مقاله زیر مطالب مفیدی را مطالعه نمایید :

می خوانم   تعریف Listener

جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

امیدوارم این مطلب برای شما مفید باشد .

0
محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم . بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید . آدرس ایمیل : info@javareshkian.ir

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بیست − پنج =