Padding for Android's notification bar

[cil...@gmail.com]

Hi, I'm working on a sample app and styling the drawer that pops out when you press the menu button. The content of this menu is pulled upward because Android's notification bar is transparent and will show content beneath it (z-axis wise). But I don't want my layout to start at the absolute top of the screen, beneath the notification bar - I want it to start below it (y-axis wise).

Is there a variable I can use to get the amount of padding I need to correctly offset my content? Or some other UI trick I can use?

[Kris Giesing]

Would it help to add a Padding widget?

- Kris

On Tue, Nov 17, 2015 at 10:41 AM, <cil...@gmail.com> wrote:

Hi, I'm working on a sample app and styling the drawer that pops out when you press the menu button. The content of this menu is pulled upward because Android's notification bar is transparent and will show content beneath it (z-axis wise). But I don't want my layout to start at the absolute top of the screen, beneath the notification bar - I want it to start below it (y-axis wise).

Is there a variable I can use to get the amount of padding I need to correctly offset my content? Or some other UI trick I can use?

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To post to this group, send email to flutt...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/defee276-4151-4b26-97eb-f3d4c6f1444e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Craig Hammell]

Yes. :)

[Craig Hammell]

Oh sorry, I thought you meant create a new Widget type Flutter, but I see Padding already exists.

It's easy to pad things, the issue is I don't know how much to use. I could eyeball it, but then I don't know if it's actually exactly right, and I don't know if that value holds true across all devices. So it'd be helpful to have some kind of constant that has the right value, defined by Flutter.

[Kris Giesing]

Oh, I see.

I don't know that we have anything like that at the moment.  The exact value depends on device, so it would have to be more than a hard coded constant.  I'll add an enhancement request.

- Kris

[Kris Giesing]

https://github.com/flutter/flutter/issues/434

- Kris

[cil...@gmail.com]

Thanks Kris!

[Adam Barth]

If you import 'dart:ui' as ui, then you'll have access to ui.window.padding, which should be what you're looking for.  Specifically, if you're worried about the top of the screen, you should look at ui.window.padding.top.

Adam

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/7e4a3c07-38b7-4328-a1dd-deb51ce9280c%40googlegroups.com.

[Craig Hammell]

Thanks, I'll check it out.

[Ian Hickson]

If you're using the Material layer, it should be automatically taken care
of by the Scaffold.

> >>>>>>>> <https://groups.google.com/d/msgid/flutter-dev/defee276-4151-4b26-97eb-f3d4c6f1444e%40googlegroups.com?utm_medium=email&utm_source=footer>
> >>>>>>>> .

> >>>>>>>> For more options, visit https://groups.google.com/d/optout.
> >>>>>>>>
> >>>>>>> --
> >> You received this message because you are subscribed to the Google Groups
> >> "Flutter Dev" group.
> >>
> > To unsubscribe from this group and stop receiving emails from it, send an
> >> email to flutter-dev...@googlegroups.com.
> >> To post to this group, send email to flutt...@googlegroups.com.
> >> To view this discussion on the web visit
> >> https://groups.google.com/d/msgid/flutter-dev/7e4a3c07-38b7-4328-a1dd-deb51ce9280c%40googlegroups.com

> >> <https://groups.google.com/d/msgid/flutter-dev/7e4a3c07-38b7-4328-a1dd-deb51ce9280c%40googlegroups.com?utm_medium=email&utm_source=footer>
> >> .

> >
> >
> >> For more options, visit https://groups.google.com/d/optout.
> >>
> >
>
>

--

Ian Hickson U+1047E )\._.,--....,'``. fL
http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'

[cil...@gmail.com]

Yeah, the main content is currently a Scaffold with a toolBar and that's all aligned properly. But I'm trying to do the same with the drawer. 

showDrawer(

  context: context,

  child: new Block(<Widget>[

    new Container(

      child: new Text('HEADER!!'),

    ),

    new DrawerItem( ... ),

    ...

I tried using a DrawerHeader as the first element, but I couldn't figure out how to put a BackgroundImage on it, so I went with a Container instead, and the automatic padding for the Android notifiation bar is lost.

[Ian Hickson]

On Tue, 17 Nov 2015, cil...@gmail.com wrote:
>
> Yeah, the main content is currently a Scaffold with a toolBar and that's
> all aligned properly. But I'm trying to do the same with the drawer.
>
> showDrawer(
> context: context,
> child: new Block(<Widget>[
> new Container(
> child: new Text('HEADER!!'),
> ),
> new DrawerItem( ... ),
> ...
>
> I tried using a DrawerHeader as the first element, but I couldn't figure
> out how to put a BackgroundImage on it, so I went with a Container instead,
> and the automatic padding for the Android notifiation bar is lost.

Ah! Yeah, the DrawerHeader is still very much incomplete.