PreferredSize and GetX usage

Question

My AppBar has git bottom properties and executing BottomOfAppBar class but flutter ignoring preferredSize in this class.

My goal is make AppBar's height to set 0px if TabBar is disabled. (tabbarenable2 value makes own main goal but I could not find a way to set the AppBar's height dynamically)

here is the code:

class BottomOfAppBar extends StatelessWidget with PreferredSizeWidget {
  final TabBarController controller;

  BottomOfAppBar({Key? key, required this.tabs, required this.controller})
      : super(key: key);
  final List<Widget> tabs;
  final tabbarenable2 = Get.find<RxBool>(tag: 'tabbarenable');

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => PreferredSize(
        preferredSize: tabbarenable2.value
            ? const Size.fromHeight(28.0)
            : const Size.fromHeight(0.0),
        child: ColoredBox(
          color: Colors.white,
          child: Column(
            children: [
              tabbarenable2.value
                  ? TabBar(
                      labelColor: Colors.purple[100],
                      indicatorColor: Colors.purple,
                      isScrollable: true,
                      labelPadding: const EdgeInsets.only(left: 8.0),
                      tabs: tabs)
                  : const Text('noTabBar')
            ],
          ),
        ),
      ),
    );
  }

  @override
  Size get preferredSize =>
      tabbarenable2.value ? Size.fromHeight(28.0) : Size.fromHeight(0.0);
}

any help?

first launch everything seems ok:

navigate to video (tabbarenable = false)

it is correcting own only to first refreshing the page (correct tabBar height)

Solution

Okay just try the following snippet and in case it does not work, please let me see the usage

• what try I do here is makes a check before displaying the widget and maybe the right place will be in "bottomAppBar: [check here]"

• Note do not check the boolean value in the build method as it is a bad way to rebuild the widget over and over.

  class BottomOfAppBar extends StatelessWidget with PreferredSizeWidget {
  final TabBarController controller;
  
  BottomOfAppBar({Key? key, required this.tabs, required this.controller})
  : super(key: key);
  final List<Widget> tabs;
  final tabbarenable2 = Get.find<RxBool>(tag: 'tabbarenable');
  
  @override
  Widget build(BuildContext context) {
    return Obx(
      () => !tabbarenable2.value
            ? SizedBox() : PreferredSize(
        preferredSize: const Size.fromHeight(28.0),
    child: ColoredBox(
      color: Colors.white,
      child: Column(
        children: [
          TabBar(
                  labelColor: Colors.purple[100],
                  indicatorColor: Colors.purple,
                  isScrollable: true,
                  labelPadding: const EdgeInsets.only(left: 8.0),
                  tabs: tabs)
        ],
      ),
    ),
  ),
  );
  }
  
  @override
  Size get preferredSize =>
  tabbarenable2.value ? Size.fromHeight(28.0) : Size.fromHeight(0.0);
  }
  

Comments

[Muhamad Jalal]

Could you support your question with images to show your output?

[gegentierversuche]

added the images. GetX does not apply the preferredSize values

[Dishank Jindal]

""var tabbarenable2 = Get.find<RxBool>(tag: 'tabbarenable');"" inside the build method then run the app.... you made the tabbarenable2 final which is not allowing it to rebuild the value as the state changes dynamically. you need to place it inside the build method

[gegentierversuche]

if I move final tabbarenable inside to build method and change final to var I getting error for this line: Size get preferredSize => tabbarenable2.value ? Size.fromHeight(28.0) : Size.fromHeight(0.0);tabbarenable2 undefined name`

[gegentierversuche]

there is no change with the original. It works only if I visit video again. bottom: BottomOfAppBar(tabs: tabs, controller: controller)),this class triggering from here.

[Muhamad Jalal]

try to update the following: bottom: BottomOfAppBar(tabs: tabs, controller: controller)), to be bottom: Obx(() => Get.find<RxBool>(tag: 'tabbarenable') ? SizedBox() : BottomOfAppBar(tabs: tabs, controller: controller))), and be sure the value of -Get.find<RxBool>(tag: 'tabbarenable')- is updating as well

[gegentierversuche]

with your bottom code I am getting this error: The argument type 'Obx' can't be assigned to the parameter type 'PreferredSizeWidget?'.

[Muhamad Jalal]

Oops, plz wrap your scaffold with Obx() instead of wrapping the bottom: content

[gegentierversuche]

I can wrap Scaffold but if try to get the value of tabbarenable I am getting this error: Conditions must have a static type of 'bool'. Try changing the condition.

[Muhamad Jalal]

you mean after using Get.find<RxBool>(tag: 'tabbarenable')

[gegentierversuche]

yes, after checking the current status of tabbarenable

[Muhamad Jalal]

send me your current code pls.

[gegentierversuche]

solved with the help of @muhamed-jalal. Thanks

[Muhamad Jalal]

Good to know, happy coding:)