شارك المقالة

كيفية عمل تركيز على عنصر واخفاء باقي عناصر التطبيق عند النقر بشكل مطول في تطبيقات Flutter

 

كيفية عمل تركيز على عنصر واخفاء باقي عناصر التطبيق عند النقر بشكل مطول في تطبيقات Flutter

في بعض التطبيقات التي نستعملها نشاهد وجود خاصيه رائعه وهيا انه عند النقر على اي عنصر يظهر لك قائمه بها الخصائص التي تريد استعمالها وايضا الامر لا يقتصر على ذلك فقط بل يمكنك عمل تاثير الشفافيه او الضبابيه كما يطلق عليه البعض منكم على باقي عناصر التطبيق حتى لا تظهر وتكون بشكل Blur ويكون العنصر الذي تم النقر عليه مطول هو الوحيد الذي يظهر فقط .


add package :

focused_menu: ^1.0.5


كيفية استعمال مكتبة focused_menu

بعد تثبيت المكتبة سوف تاتي لاي عنصر داخل list على سبيل المثال او اي عنصر عموما وتقوم بعمل widget له ويكون بداخل FocusedMenuHolder ويمكنك تخصيص العناصر التي تظهر بداخل من خلال الامر menuItems وهيا عباره عن list of FocusedMenuItem يمكنك استعمالها للحصول على ما ترغب بإضافته كما هو موضح بالكود التالي


ر

FocusedMenuHolder(
      onPressed: (){},
      openWithTap: false,
      animateMenuItems: false,
      duration: const Duration(seconds: 0),
      // borderColor: Theme.of(context).canvasColor,
      menuItems:[
        FocusedMenuItem(
            backgroundColor: Theme.of(context).canvasColor,
            title: myText(title: appTranslation(context).open_link),
            trailingIcon: const Icon(Icons.link) ,
            onPressed: ()=> openLink()),
        FocusedMenuItem(
            backgroundColor: Theme.of(context).canvasColor,
            title: myText(title: appTranslation(context).share_app),
            trailingIcon: const Icon(Icons.share) ,
            onPressed: ()=> Share.share(widget.article!.link)),
      ],

      menuWidth: MediaQuery.of(context).size.width*0.50,
      blurSize: 12.0,
      menuItemExtent: 50,
      // duration: Duration(milliseconds: 100),
      menuBoxDecoration: BoxDecoration(
          color: Theme.of(context).canvasColor,
          borderRadius: const BorderRadius.all(Radius.circular(15.0),),
          boxShadow: MainBloc.get(context).isDark ? shadowDark : shadowLight
      ),

      blurBackgroundColor: MainBloc.get(context).isDark ? ColorManager.dark.withOpacity(0.5) : ColorManager.white.withOpacity(0.5),
      menuOffset: 10.0, // Offset value to show menuItem from the selected item
      bottomOffsetHeight: 30.0, // Offset height to consider, for showing the menu item ( for example bottom navigation bar), so that the popup menu will be shown on top of selected item.

      child: Text('Hello'),
    );
    

فيديو الشرح





شاهد أيضًا
مقالات ذات صلة
شرح كيفية اضافة وعرض البيانات في Todo app بإستخدام Bloc في Flutter #3

  شرح كيفية اضافة وعرض البيانات في Todo app بإستخدام Blocفي هذا المقال سوف نتعرف…

كيفية اضافة امكانية لعرض النص كامل او جزء منه في فلاتر Show more – Show less Text

كيفية اضافة امكانية لعرض النص كامل او جزء منه في فلاتر Show more – Show…

امكانية عمل قراءة المزيد للنص في اندرويد ستوديو – Expandable Text View

امكانية عمل قراءة المزيد للنص في اندرويد ستوديو – Expandable Text Viewفي هذا المقال نشارك…

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

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