Positioning custom AppBar without SafeArea

Question

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

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:

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:

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.

In my code I did not use the SafeArea. In the refactored one yes, as the linkt i posted says. — Emaborsa, Aug 31 '23 at 06:30
Can you wrap your `flex` component with a `Positioned` widget and add a value on to `top` property based on `MediaQuery`? — M.G.S SUPUNTHAKA, Aug 31 '23 at 06:51
Don't really get it. The `Flex` component is already on top of the `Stack`. — Emaborsa, Aug 31 '23 at 06:55

score 1 · Answer 1 · answered Aug 31 '23 at 06:35

1

You can put your stack inside a column

answered Aug 31 '23 at 06:35

MinhDat

57
3

Please be more specific. Maybe with a snippet. – Emaborsa Aug 31 '23 at 06:36
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 02 '23 at 11:28

score 0 · Answer 2 · answered Aug 31 '23 at 07:06

0

simply use SliverAppBar instead if you want to use custom appbar.

But you need to use CustomScrollView as wrapper

answered Aug 31 '23 at 07:06

Anan Alfred

68
4

Sorry but I don't get it. Why shoud I use a SliverAppBar? – Emaborsa Aug 31 '23 at 07:17
SliverAppBar gives you many customization, you can expand appbar, and you can position your appbar easily. – Anan Alfred Aug 31 '23 at 07:31

score 0 · Answer 3 · answered Sep 01 '23 at 07:33

I have been able to fix it using the standard AppBar. Two things I did not where the AppBar.shape and the Scaffold.extendBodyBehindAppBar properties:

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: MyCustomAppBar(),
  body: Flex(direction: Axis.vertical, children: [
    Flexible(
      child: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(top: kToolbarHeight + MediaQuery.of(context).padding.top),
          child: Column(children: children),
        ),
      ),
    ),
  ]),
);

I skip the code of MyCustomAppBar, here just the AppBar:

AppBar(
  centerTitle: true,
  titleSpacing: 0,
  actions: [myAction],
  title: myTitle,
  backgroundColor: anyColor,
  leading: myLeading,
  automaticallyImplyLeading: false,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.lerp(const Radius.elliptical(100, 10),
        const Radius.elliptical(100, 10), 0)!,
      bottomRight: Radius.lerp(const Radius.elliptical(50, 10),
        const Radius.elliptical(50, 10), 0)!
    ),
  ),
);

Here the result:

Hope to help somebody.

Positioning custom AppBar without SafeArea

3 Answers3