# How to block tab event?

The ConvexAppBar is similar to BottomAppBar, however there are something different, for example you can not float the notch button or handle the tab event separately.

We can distinguish the tab by index of item. Or use a onTabNotify to block the tap event. In this case the tab state won't change, they will remain as tap event ever happened.

Original designed for #issue 98 (opens new window)

# Sample

tab-hook.gif

DefaultTabController(
  length: items.length,
  child: Scaffold(
    appBar: AppBar(title: const Text('Custom ConvexAppBar')),
    body: TabBarView(
      physics: NeverScrollableScrollPhysics(),
      children: items.map((i) => Center(child: Text(i.title))).toList(),
    ),
    bottomNavigationBar: ConvexAppBar(
      style: TabStyle.fixedCircle,
      items: [
        TabItem(title: '2019', icon: Icons.link),
        TabItem(
            icon: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Color(0xFFFF5722),
              ),
              child: Icon(Icons.add, color: Colors.white, size: 40),
            )),
        TabItem(title: "2020", icon: Icons.work),
      ],
      onTabNotify: (i) {
        var intercept = i == 1;
        if (intercept) {
          Navigator.pushNamed(context, '/fab');
        }
        return !intercept;
      },
      onTap: (i) => debugPrint('click $i'),
    ),
))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32