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

Ahmed Mahmoud

اخر تحديث :

اخفاء 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 .

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 ...",
              ),
          ),
        );
  }
}