1

1

How to customize a tabbar like this with Flutter, and the round image could be tapped? The red rectangle is tabbar.

I have try cover a large image on middle tab but it did not work well:

//the middle tab
Container(
            child: Stack(
              children: [
                Tab(
                  text: "Bills",
                  icon: Icon(Icons.assignment),
                ),
                Container(
                    child: Stack(
                  children: [
                    Positioned(
                      bottom: 30.h,
                      child: Icon(
                        Icons.assignment,
                        size: 80.h,
                      ),
                    )
                  ],
                ))
              ],
            ),
          ),

I have two questions:

  1. How to add widget beyond super widget? Like the round image beyond the tabbar without the overflow error?

  2. How to detect the tap only in tabbar(the red line)? I'm familiar with iOS method hitTest check.

Improve this question
2
  • you can use the GestureDetector widget. The GestureDetector widget allows you to detect gestures, such as taps, on widgets. To detect a tap on the round image, you can wrap the GestureDetector widget around the Image widget that displays the round image. Commented Nov 23, 2023 at 7:23
  • @Dhruvil How can I make the round image beyond the tabbar bound? Commented Nov 23, 2023 at 8:52
Related questions
112
How to align single widgets in Flutter?
2
how to custom the position of Tab widget when I put a TaBar widget in SafeArea widget
0
Flutter: Wrap container around Stack with Positioned children
Load 3 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.