Question 199526 in Flutter Question posted in
The official Flutter documentation can be found here.

How to display a widget above a tab in Flutter?

I have a bottom tab bar.

When some conditions are met, I need to display a widget abode a given tab as follows:

enter image description here

For simplicity, I display a Text("ALERT") here, but in the real app it’ll be a tapable widget.

How can I do that?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally found a solution in two steps:

    1. Use a Column and insert the widget first, and the tabbar last: but this makes your bottom app appears taller than what one wants. This gives you:

    enter image description here

    1. Add extendBody:true which makes the area above the actual TabBar transparent so that removes the unwanted area:

    enter image description here

    Scaffold(
  extendBody: true,
  bottomNavigationBar: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Chip(
        label: Text("Draft pending"),
        backgroundColor: Colors.amber,
      ),
      bottomTabBar,
    ]
  )
  // blah blah
),

  2. 0

    Just wrap whatever widget you have (in your case Text widget for example) with a GestureDetector widget like this:

    GestureDetector(
        onTap: () {
          setState(() {
            // What happens with the tap
          });
        },
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search