By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام ويدجت TextField في فلاتر
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Widgets > شرح استخدام ويدجت TextField في فلاتر
Widgets

شرح استخدام ويدجت TextField في فلاتر

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 6 دقيقة للقراءة 3630 مشاهدات 5
شارك
شرح استخدام ويدجت TextField في فلاتر
شرح استخدام ويدجت TextField في فلاتر
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

في Flutter، يعد TextField عنصر واجهة المستخدم الأساسي للحصول على إدخال البيانات من المستخدم. يسمح TextField للمستخدم بإدخال النص والأرقام والبيانات الأخرى في التطبيق. يتيح لك Flutter تخصيص TextField بسهولة باستخدام مجموعة من الخصائص.

المحتويات
خصائص TextField في فلاترdecorationcontrolleronChangedobscureTextkeyboardTypemaxLengthmaxLinestextAlignstyletextInputActionمثال على استخدام TextField في فلاتر

خصائص TextField في فلاتر

decoration

تتحكم خاصية decoration في مظهر TextField. يمكن استخدام decoration لتغيير الألوان والحدود والخلفية والظل والأيقونات والصور وغيرها من المظاهر المختلفة.

TextField(
  decoration: InputDecoration(
    labelText: 'Full Name',
    hintText: 'Enter your full name',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
),

“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“

controller

تسمح خاصية controller لـ TextField بالتفاعل مع النص الذي قام المستخدم بإدخاله. يمكن استخدام هذه الخاصية للحصول على النص الذي تم إدخاله أو لتحديث TextField بناءً على بعض الأحداث الأخرى.

final TextEditingController _nameController = TextEditingController();

TextField(
  controller: _nameController,
  decoration: InputDecoration(
    labelText: 'Full Name',
  ),
),

onChanged

يتم استخدام onChanged للاستماع إلى تغييرات النص الذي يتم إدخاله. يتم استخدام onChanged لتحديث النص أو للقيام بأي عمليات أخرى على البيانات.

String _name = '';

TextField(
  onChanged: (value) {
    setState(() {
      _name = value;
    });
  },
  decoration: InputDecoration(
    labelText: 'Full Name',
  ),
),

“اقرأ أيضاً: شرح استخدام ويدجت WillPopScope في فلاتر“

obscureText

يستخدم obscureText لإخفاء النص المدخل بناءً على الحاجة. يمكن استخدام هذه الخاصية لإخفاء كلمة المرور أو الرمز السري الذي يتم إدخاله.

bool _passwordVisible = false;

TextField(
  obscureText: !_passwordVisible,
  decoration: InputDecoration(
    labelText: 'Password',
    suffixIcon: IconButton(
      icon: Icon(
        _passwordVisible ? Icons.visibility : Icons.visibility_off,
      ),
      onPressed: () {
        setState(() {
          _passwordVisible = !_passwordVisible;
        });
      },
    ),
  ),
),

keyboardType

تحدد خاصية keyboardType نوع لوحة المفاتيح المستخدمة لإدخال البيانات. يمكن استخدام القيم التالية لتحديد نوع لوحة المفاتيح:

  • TextInputType.text.
  • TextInputType.number.
  • TextInputType.emailAddress.
  • TextInputType.phone.
  • TextInputType.multiline.
  • والمزيد.
TextField(
  keyboardType: TextInputType.emailAddress,
  decoration: InputDecoration(
    labelText: 'Email',
  ),
),

maxLength

يحدد maxLength الحد الأقصى لعدد الأحرف التي يمكن للمستخدم إدخالها في TextField.

TextField(
  maxLength: 10,
  decoration: InputDecoration(
    labelText: 'Username',
  ),
),

maxLines

يحدد maxLines الحد الأقصى لعدد الأسطر التي يمكن للمستخدم إدخالها في TextField.

TextField(
  maxLines: 3,
  decoration:InputDecoration(
    labelText: 'Description',
  ),
),

textAlign

يحدد textAlign موقع النص داخل TextField. يمكن استخدامه للتحكم في موقع النص الذي يتم إدخاله.

TextField(
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    labelText: 'Username',
  ),
),

style

يتحكم style في أسلوب النص داخل TextField. يمكن استخدامه لتغيير الخط وحجم الخط ولون النص وغيرها من الخصائص.

TextField(
  style: TextStyle(
    color: Colors.blue,
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
  decoration: InputDecoration(
    labelText: 'Username',
  ),
),

textInputAction

يحدد textInputAction الإجراء الذي يتم تنفيذه عند الضغط على زر “Done” في لوحة المفاتيح. يمكن استخدامه لتحديد الإجراء الذي يتم تنفيذه بعد إدخال النص.

TextField(
  textInputAction: TextInputAction.done,
  decoration: InputDecoration(
    labelText: 'Username',
  ),
),

مثال على استخدام TextField في فلاتر

هذا مثال كامل على استخدام TextField في Flutter:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  bool _passwordVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(
                labelText: 'Full Name',
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _emailController,
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(
                labelText: 'Email',
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              obscureText: !_passwordVisible,
              decoration: InputDecoration(
                labelText: 'Password',
                suffixIcon: IconButton(
                  icon: Icon(
                    _passwordVisible ? Icons.visibility : Icons.visibility_off,
                  ),
                  onPressed: () {
                    setState(() {
                      _passwordVisible = !_passwordVisible;
                    });
                  },
                ),
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                String name = _nameController.text;
                String email = _emailController.text;
                String password = '***'; // Hide password for security reasons
                print('Name: $name \nEmail: $email \nPassword: $password');
              },
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

في هذا المثال، يتم استخدام TextField للحصول على اسم المستخدم والبريد الإلكتروني وكلمة المرور. يتم استخدام خاصية controller للتفاعل مع النص الذي يتم إدخاله في TextField. يتم استخدام keyboardType لتحديد نوع لوحة المفاتيح المستخدمة لإدخال البريد الإلكتروني. تم استخدام obscureText لإخفاء كلمة المرور. تم استخدام ElevatedButton لتقديم النموذج.

“اقرأ أيضاً: شرح استخدام ويدجت InkWell في فلاتر“


إن TextField هو عنصر واجهة المستخدم الأساسي للحصول على إدخال البيانات من المستخدم في Flutter. يتيح لك Flutter تخصيص TextField بسهولة باستخدام مجموعة من الخصائص. في هذا الدليل، قمنا بتغطية جميع الخصائص الأساسية التي تساعدك على تحديد مظهر وسلوك TextField الخاص بك. استخدم هذا الدليل كمرجع لتخصيص TextField وجعله يعمل بشكل جيد في التطبيقات الخاصة بك.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام ThemeData في فلاتر
Widgets

شرح استخدام ThemeData في فلاتر

37 2
شرح استخدام ويدجت SingleChildScrollView في فلاتر
Widgets

شرح استخدام SingleChildScrollView في فلاتر

26 1
شرح استخدام ويدجت WillPopScope في فلاتر
Widgets

شرح استخدام ويدجت WillPopScope في فلاتر

19 1
شرح استخدام ويدجت RichText في فلاتر 
Widgets

شرح استخدام ويدجت RichText في فلاتر 

20
شرح استخدام ويدجت TextButton في فلاتر
Widgets

شرح استخدام ويدجت TextButton في فلاتر

20
شرح استخدام ويدجت OutlinedButton في فلاتر
Widgets

شرح استخدام ويدجت OutlinedButton في فلاتر

28 1
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟