skip to Main Content

I am using a BottomNavigationBar and want to remove the safe area / viewInsets padding given to the bar. I am not referring to the typical answers to similar questions (setting font size to zero or hiding the labels). I am referring to the system padding added to keep the bar above system items like the iPhone X bottom bar, which seems to be the value of MediaQuery.of(context).viewInsets.bottom.

The reason is that in some situations I want to place something below the BottomNavigationBar, as odd as that sounds. In this case, the additional padding is still supplied and makes the bar have an awkward amount of padding below it before the bottom widget.

Is this even possible or would I need to construct a custom widget instead?

2

Answers


  1. I think this is correct:

    <SafeAreaView edges={['right', 'left', 'top']} >
    

    But it really depends on your code.

    Login or Signup to reply.
  2. You can use SafeArea – If the UI you don’t care too much =))

    SafeArea(
      top: false,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('AppBar'),
        ),
        body: const Text("data"),
      ),
    );
    

    Or you can have it auto-hide

    void main() {
      WidgetsFlutterBinding.ensureInitialized();
      SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [SystemUiOverlay.top],
      );
      runApp(const MyApp());
    }
    

    However, you can combine the two.

    Hope useful to you! xD

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