شارك المقالة

اخفاء 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 ...",
              ),
          ),
        );
  }
}

فيديو الشرح


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


شاهد أيضًا
مقالات ذات صلة
كود برنامج بلغة البايثون يقوم بتحويل العملات – python code Currency Converter

  تعبر لغة python واحد من أكثر اللغات السهله ويبحث كثير من الاشخاص على دورة…

برنامج Java لتحويل الرقم الثنائي إلى عشري والعكس صحيح – convert binary to decimal java code

برنامج Java لتحويل الرقم الثنائي إلى عشري والعكس صحيح متابعي مدونة و موقع جي كودرس…

إنشاء صفحة لعرض مجموعه من الاشكال المتحركه في flutter

إنشاء صفحة لعرض مجموعه من الاشكال المتحركه في flutter في هذا المقال سوف نشارك معك…

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

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