شارك المقالة

اخفاء Keyboard اثناء عند الضغط على اي مكان في الشاشه او الscroll في Flutter


 اخفاء Keyboard اثناء عند الضغط على اي مكان في الشاشه او الscroll في Flutter

عند استخدام TextField تحتاج الى ان تقوم بإخفاء الكيبورد اثناء النزول الى الاسفل اذا كان التطبيق يحتوي على اكثر من TextField او حتى نريد اخفاء الكيبورد عند الضغط على اي مكان في الشاشه ولهذا نقدم لكم في درس اليوم كيف تقوم بإخفاء لوحة المفاتيح اثناء النزول الى الاسفل او حتى الصعود وايضا عند النقر على اي مكان في الشاشه تختفي لوحة المفاتيح والامر بسيط جدا وسوف نقدم لكم كلا الطريقتين للتنفيذ .


Flutter عبارة عن حزمة تطوير Google SDK مخصصة لبرمجة تطبيقات الهواتف الذكية التي تعمل بنظام Android و iOS ، بالإضافة إلى Fuchsia (نظام تشغيل جديد من Google). يوفر Flutter إطارًا شاملاً بلغة Dart مخصصًا لرسم واجهات تطبيقات عالية الجودة وعالية الأداء مع تزويد المطور بمجموعة من الأدوات الجاهزة التي تتيح له إنشاء تطبيقات احترافية في أقصر وقت وبأقل قدر من مجهود. Dart هي لغة برمجة تم تطويرها وتصميمها بواسطة Google وتهدف إلى إنشاء برامج وتطبيقات سريعة تعمل في مجموعة متنوعة من السياقات ، بما في ذلك بيئات Windows و Linux على أجهزة سطح المكتب وبيئات Android و IOS على الأجهزة المحمولة ، وحتى أنظمة السيارات الرقمية.


How to hide keyboard after scroll or click flutter


ببساطة لكي تقوم بإخفاء لوحة المفتايح اثناء النزول للاسفل حاول ان تجعل التصميم يحاط ب GestureDetector لكي نحصل منه على خاصية onTap وبداخلها نضع الكود المسؤول عن اخفاء لوحة المفاتيح كما هو موضح , والطريقة الاخرى وهيا اثناء النزول للاسفل وهيا ابسط بكثير فكل ما سوف نقوم به اننا نجعل الlist تستخدم خاصية keyboardDismissBehavior وبداخلها نستعمل الامر المسؤول عن ازالة لوحة المفتايح اثناء النزول وهو ScrollViewKeyboardDismissBehavior.onDrag .


How to hide keyboard after scroll or click flutter


ui.dart


class GG extends StatelessWidget {
  const GG({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        FocusScopeNode scopeNode = FocusScope.of(context);
        if (!scopeNode.hasPrimaryFocus) {
          scopeNode.unfocus();
        }
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          // change to buildPadding hide onClick .
          child: buildPadding()),
        ),
      );
  }

  ListView buildListView() {
    return ListView(
          physics: BouncingScrollPhysics(),
          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
          children: [
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
            buildPadding(),
          ],
        );
  }

  Padding buildPadding() {
    return Padding(
          padding: EdgeInsets.all(15.0),
          child: TextField(
            style: TextStyle(color: Colors.orange),
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.red,//this has no effect
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                hintText: "Border decoration text ...",
              ),
          ),
        );
  }
}

فيديو الشرح


لمزيد من المقالات


شاهد أيضًا
مقالات ذات صلة
شرح كيفية اضافة بصمة جهازك لتطبيقك وامكانية فتح التطبيق بالبصمه فلاتر | Add FingerPrint flutter easy
شرح كيفية اضافة بصمة جهازك لتطبيقك وامكانية فتح التطبيق بالبصمه فلاتر | Add FingerPrint flutter easy

شرح كيفية اضافة بصمة جهازك  لتطبيقك وامكانية فتح التطبيق بالبصمه فلاترالبصمة اصبحت الان موضه شائعه…

في عالم تطبيقات الهواتف، لم تعد الواجهة الثابتة كافية لجذب المستخدم. اليوم، الأنيميشن الذكية هي ما يميز التطبيقات الناجحة، خصوصًا في تطبيقات المطاعم وتوصيل الطعام. في هذا المقال سنشرح بشكل عملي كيفية تنفيذ أنيميشن تطبيق طعام Flutter مستندين إلى مشروع مفتوح المصدر على منصة GitHub بعنوان
شرح إنشاء أنيميشن تطبيق طعام Flutter باحترافية مع مثال عملي خطوة بخطوة

شرح إنشاء أنيميشن تطبيق طعام Flutter مع مثال عملي تُعد عملية إنشاء الأنيميشن داخل تطبيقات…

شرح كيفية اعادة تشغيل الactivity في الاندرويد ستوديو

  شرح كيفية اعادة تشغيل الactivity في الاندرويد ستوديواثناء عملية تطوير التطبيقات في الاندرويد تحتاج…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع