Flutter Sliver Appbar not showing Icons

Question

I have implemented a SliverAppBar in my Flutter app, but I'm having trouble getting the back button to show up on the left side of the app bar. I've set the leading property of the SliverAppBar to a BackButton, but the button doesn't appear. the back. the button exists and is clickable but I cannot see it and I can see the tooltip when I click on it here is my code

class TabBarWidget extends StatelessWidget with PreferredSizeWidget {
  const TabBarWidget(
      {Key? key,
      required this.tabController,
      required this.tabs,
      this.onTap,
      required this.height})
      : super(key: key);

  final TabController tabController;

  final double height;
  final List<Widget> tabs;
  final ValueChanged<int>? onTap;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // I can see the back button when I delete this container
         Container(
                height: 120,
                decoration: const ShapeDecoration(
                  color: AppColors.primaryColor,
                  shape: CustomShapeBorder(180),
                ),
              ),
        Container(
          color: Colors.white,
          child: TabBar(
            controller: tabController,
            labelColor: AppColors.boldRedColor,
            onTap: onTap,
            unselectedLabelStyle: const TextStyle(
              color: Colors.grey,
              fontWeight: FontWeight.bold,
            ),
            labelStyle: const TextStyle(
              fontWeight: FontWeight.bold,
              color: AppColors.boldRedColor,
            ),
            unselectedLabelColor: Colors.grey,
            indicatorColor: AppColors.boldRedColor,
            tabs: tabs,
          ),
        ),
      ],
    );
  }

  @override
  // TODO: implement preferredSize
  Size get preferredSize => Size.fromHeight(kToolbarHeight + height);
}

SliverAppBar(
              backgroundColor: AppColors.primaryColor,
              foregroundColor: Colors.white,
              leading: const BackButton(
                color: Colors.white,
              ),
              iconTheme: const IconThemeData(
                color: Colors.red,
              ),
              title: const Text('title'),
              pinned: true,
              bottom: TabBarWidget(
                tabController: _tabController,
                tabs: tabs,
                height: _tabController.index != 0 ? 0 : 180,
                onTap: (index) {
                  setState(() {});
                },
              ),
            ),

Fahmida · Answer 1 · 2023-04-06T08:52:39.800

0

It is mainly causing issue in this line

 height: _tabController.index != 0 ? 0 : 180,

just setting height : 180, doesnt cause any issue.

SliverAppBar(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        leading: const BackButton(
          color: Colors.white,
        ),
        iconTheme: const IconThemeData(
          color: Colors.red,
        ),
        title: const Text('title'),
        pinned: true,
        bottom: TabBarWidget(
          tabController: _tabController,
          tabs: myTabs,
          height:180,
          onTap: (index) {
            setState(() {});
          },
        ),
      ),

edited Apr 06 '23 at 08:52

answered Apr 06 '23 at 05:00

Fahmida

1,050
8
19

No, still not working :( the back button exists but is invisible. This condition ```height: _tabController.index != 0 ? 0 : 180,``` just add 180 px to the default height – FadyFouad Apr 06 '23 at 05:15
Hope that just changing the background and foreground color you can view the appbar. I have edited the code. – Fahmida Apr 06 '23 at 08:53

Flutter Sliver Appbar not showing Icons

1 Answers1