skip to Main Content

I am trying to create a custom AppBar, with a polygon instead of the bar, I already have something:

enter image description here

As you can see, on some screens the bar is to high, because the SafeArea differs. I did not use:

child: Scaffold(
    appBar: MyCustomBar(),
    body: // my body
)

I wrote followings, which is a Stack where the bar is on top with a fixed height and a padding (SafeArea), and the main view takes the entire height with a padding on top:

child: Scaffold(
    body: Stack(
        alignment: Alignment.topCenter,
        children: [
            Flex(direction: Axis.vertical, children: [
            Flexible(
              child: SingleChildScrollView(
                      child: Padding(
                        padding: EdgeInsets.only(
                            left: padding,
                            right: padding,
                            top: padding + StatusBar.getHeight(),
                            bottom: padding),
                        child: Column(
                          children: children,
                        ),
                      ),
                    ),
            )
          ]),
          MyCustomBar(
            title,
            iconLeft: iconLeft,
            iconRight: iconRight,
          ),
        ]
    ),
)

where static const padding = 15.0; which is obviously the problem, it worked fine for most of the Android devices, but I needs to be dynamic based on the SafeArea of each device.

Why I decided to do it this way? Because I have a polygon as a bar and the text has to be visible where the bar is intended to be transparent:

enter image description here

The first solution I have in mind is to get the top padding of the SafeArea and using it instead my static variable. The problem is that I am not able to get the padding if I am not using the SafeArea.

If I refactor my code following this example in order to use the Scaffold.appBar, I get the following result:

enter image description here

IMHO I don’t know if it is possible to achieve it using the SafeArea.appBar.

Any hint to fix my MyCustomBar?

EIDT:
I just found this:

Scaffold.extendBodyBehindAppBar

This allows me to use the Scaffold.appBar.

2

Answers


  1. You can put your stack inside a column

    Login or Signup to reply.
  2. simply use SliverAppBar instead if you want to use custom appbar.

    But you need to use CustomScrollView as wrapper

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search