كيفية تعطيل احد ازار BottomNavigationBar في Flutter

Flutter Dev · 24 يوليو 2022

تحيه طيبه للجميع

أقوم باستعمال BottomNavigationBar لتنقل بين عدد من الصفحات المختلفة ولكني احتاج الى تعطيل زر قمت بوضعه ك نص في المنتصف

التصميم كالتالي:

احتاج الى إيقاف عمل الزر الذي في الأسفل والذي هو تحت اسم setting بمعنى لو قام المستخدم بضغط عليه لن يحدث أي تأثير حتى تأثير الظل لا يحدث حتى اجبر المستخدم على التوجه الى الزر الذي أعلاه بلون الأزرق.

هل توجد طريقة لفعل ذلك؟

الكود المستعمل كالتالي:

import 'package:flutter/material.dart';

void main() {
  runApp(MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {


  int index = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:


        Scaffold(
          body: _getBody(index),
          floatingActionButton: FloatingActionButton(
            onPressed: (){
              print('sd');
            },
            child: Icon(Icons.add),
          ),
          bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            color: Colors.red,
            notchMargin: 4,
            clipBehavior: Clip.antiAlias,
            child: BottomNavigationBar(
                onTap: (value) => setState(() => index = value),
                type: BottomNavigationBarType.fixed,items: [

              BottomNavigationBarItem(icon: Icon(Icons.star), label:("Home")),
              BottomNavigationBarItem(icon: Icon(Icons.star),  label:("me")),
              BottomNavigationBarItem(icon: Icon(Icons.add),  label:("stting")),
              BottomNavigationBarItem(icon: Icon(Icons.star),  label:("all")),
              BottomNavigationBarItem(icon: Icon(Icons.star),  label:("you")),
            ]),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        ));
  }
  Widget _getBody(int index) {
    switch (index) {
      case 0:

        return Center(child: Text("1"),); 
      case 1:
        return Center(child: Text("2"),); 
      case 2:
        return Center(child: Text("3"),);
      case 3:
        return Center(child: Text("4"),);
      case 5:
        return Center(child: Text("5"),);
    }

    return Center(child: Text(""),);
  }
}

Wael Aljamal · 24 يوليو 2022

كما لديك، إن افترضنا وجود قائمة أزرار من BottomNavigationBarItem يمكننا تتبع الزر المحدد من خلال تخصيص متغير حالة يحمل ترقيمه index

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      ...
    ),
    BottomNavigationBarItem(
      ...
    ),
    BottomNavigationBarItem(
      ...
    ),
  ],
  onTap: navigationTapped,
  currentIndex: _page,
),

ولنفرض أن اسمه page_ أو أي شيء مناسب.

وعند النقر على الأزرار نحول الاستجابة لدالة مخصصة callback وهي فرضاُ navigationTapped

سوف تستقبل هذه الدالة رقم الزر المضغوط عليه، و قارنه مع متغير الحالة لديك أو مع قيمة غير مرغوبة، ثم قم بالتصرف المناسب

void navigationTapped(int page) {
  if (page == 2) {
    return;
  } else {
    setState(() {
      _selectedIndex = page;
    });
  }
}

لاحظ إن كان قد تم نقر الزر 2 لن نعمل تغيير في اختيار الواجهة

كما يمكنك عمل ثيم مخصص مثلاً لون شفاف

Theme(
  data: Theme.of(context).copyWith(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: YourWidget(),
);

كما يمكنك وضعه ضمن حاوية Container مع أبعاد 0 * 0 أو fontSize = 0

Wael Aljamal · 25 يوليو 2022

بتاريخ 22 دقائق مضت قال مروان مروان3:

استفسار بسيط بس اخي الكريم انا عملت الحل الأول طبعا لنه ما ينفع أقوم بتطبيق الثيم عشان ما يختفي الاسم لني ارغب بعرضه والان الزر لا يعمل ولكن تأثير النقر يظهر هل توجد حتى الغي تأثير النقر ؟ بمعنى تظهر مثل الظل الأسود الشفاف لو قام المستخدم بضغط عليه

ما رأيك في وضع مكون نصي Text أو أي مكون النقر عليه لا يعمل تأثيرات بدل الزر Button، عن طريق وضع شرط ضمن Tree widget

أو تنسيق عرض الزر بأحد الأشكال التالية لمنع تأثير النقر عليها

1-
splashColor: Colors.transparent,  
  highlightColor: Colors.transparent,

2-
TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.transparent)
  )
)

3-
style: TextButton.styleFrom(
  splashFactory: NoSplash.splashFactory,
),

Wael Aljamal · 25 يوليو 2022

بتاريخ 31 دقائق مضت قال مروان مروان3:

مرحبا اخي اعذرني ولكن لم افهم عليك عدل وين قصدك اضيف الزر هذا ؟ حيث انني لا استطيع استبدال BottomNavigationBarItem لا يقبل الكود

حاول إعطاء الزر تنسيق يلغي splashFactory

  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),

أو ألوان شفافة لكل من unselectedIconTheme - selectedIconTheme

bottomNavigationBar: BottomNavigationBar(
              selectedIconTheme: IconThemeData(color: Colors.yellow),
              unselectedIconTheme:  IconThemeData(color: Colors.white),

Wael Aljamal · 25 يوليو 2022

بتاريخ 2 ساعات قال مروان مروان3:

اهلا اخي الكريم

نعم اعذرني تأخرت في الرد كنت أقوم بعملية التطبيق قمت بعمل ذلك وضع ثيم لزر ومن خلاله اصبح شفاف والغي تاثير

يمكنك وضع الشيفرة ليستفيد منها الآخرون، شكرا لك

Flutter Dev · 25 يوليو 2022

بتاريخ 17 ساعات قال Wael Aljamal:
كما لديك، إن افترضنا وجود قائمة أزرار من BottomNavigationBarItem يمكننا تتبع الزر المحدد من خلال تخصيص متغير حالة يحمل ترقيمه index
bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      ...
    ),
    BottomNavigationBarItem(
      ...
    ),
    BottomNavigationBarItem(
      ...
    ),
  ],
  onTap: navigationTapped,
  currentIndex: _page,
),
ولنفرض أن اسمه page_ أو أي شيء مناسب.

وعند النقر على الأزرار نحول الاستجابة لدالة مخصصة callback وهي فرضاُ navigationTapped

سوف تستقبل هذه الدالة رقم الزر المضغوط عليه، و قارنه مع متغير الحالة لديك أو مع قيمة غير مرغوبة، ثم قم بالتصرف المناسب
void navigationTapped(int page) {
  if (page == 2) {
    return;
  } else {
    setState(() {
      _selectedIndex = page;
    });
  }
}
لاحظ إن كان قد تم نقر الزر 2 لن نعمل تغيير في اختيار الواجهة

كما يمكنك عمل ثيم مخصص مثلاً لون شفاف
Theme(
  data: Theme.of(context).copyWith(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: YourWidget(),
);
كما يمكنك وضعه ضمن حاوية Container مع أبعاد 0 * 0 أو fontSize = 0

جزاك الله الف خير اخي الكريم الطريقة فعاله 100%

استفسار بسيط بس اخي الكريم انا عملت الحل الأول طبعا لنه ما ينفع أقوم بتطبيق الثيم عشان ما يختفي الاسم لني ارغب بعرضه والان الزر لا يعمل ولكن تأثير النقر يظهر هل توجد حتى الغي تأثير النقر ؟ بمعنى تظهر مثل الظل الأسود الشفاف لو قام المستخدم بضغط عليه

Flutter Dev · 25 يوليو 2022

بتاريخ 36 دقائق مضت قال Wael Aljamal:
ما رأيك في وضع مكون نصي Text أو أي مكون النقر عليه لا يعمل تأثيرات بدل الزر Button، عن طريق وضع شرط ضمن Tree widget

أو تنسيق عرض الزر بأحد الأشكال التالية لمنع تأثير النقر عليها
1-
splashColor: Colors.transparent,  
  highlightColor: Colors.transparent,

2-
TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.transparent)
  )
)

3-
style: TextButton.styleFrom(
  splashFactory: NoSplash.splashFactory,
),

خلاص اخي تم ايجاد الحل جزاك الله الف خير قمت بتطبيق الثيم على الازار كافة وتم الغاء التاثير

تم التعديل في 25 يوليو 2022 بواسطة مروان مروان3

Flutter Dev · 25 يوليو 2022

بتاريخ الآن قال Wael Aljamal:
حاول إعطاء الزر تنسيق يلغي splashFactory
  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),
أو ألوان شفافة لكل من unselectedIconTheme - selectedIconTheme
bottomNavigationBar: BottomNavigationBar(
              selectedIconTheme: IconThemeData(color: Colors.yellow),
              unselectedIconTheme:  IconThemeData(color: Colors.white),

اهلا اخي الكريم

نعم اعذرني تأخرت في الرد كنت أقوم بعملية التطبيق قمت بعمل ذلك وضع ثيم لزر ومن خلاله اصبح شفاف والغي تاثير

Flutter Dev · 25 يوليو 2022

بتاريخ منذ ساعة مضت قال Wael Aljamal:

يمكنك وضع الشيفرة ليستفيد منها الآخرون، شكرا لك

ابشر اخي

كيفية تعطيل احد ازار BottomNavigationBar في Flutter

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

8 أجوبة على هذا السؤال

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على