Home > Software engineering >  PreferredSize and GetX usage
PreferredSize and GetX usage

Time:11-16

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:

enter image description here

navigate to video (tabbarenable = false)

enter image description here

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

enter image description here

CodePudding user response:

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);
    }
    

CodePudding user response:

I deleted the BottomOfAppBar class and I moved the code to Scaffold Widget. Wrapped with 0bx() and changed the check mechanism with controller.tabbarenable.value many thanks for @muhamed-jalal

  • Related