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.
2
Answers
You can put your stack inside a column
simply use
SliverAppBar
instead if you want to use custom appbar.But you need to use
CustomScrollView
as wrapper