How to prevent the Bottom menu from displaying over the Drawer menu?

Asked

Viewed 156 times

0

I’m wearing a Bottom Menu and receiving calls through an index. However, my Bottom Menu is displayed over my Drawer Menu. How can I fix this?

inserir a descrição da imagem aqui

@overrid Widget build(BuildContext context) {return Scaffold(
 appBar: AppBar(
   title: Text('My Flutter App'),
 ),
 body: _children[_currentIndex],
 bottomNavigationBar: BottomNavigationBar(
   onTap: onTabTapped,
   currentIndex: _currentIndex,
   items: [
     BottomNavigationBarItem(
       icon: Icon(Icons.home),
       title: Text('Home'),
     ),
     BottomNavigationBarItem(
       icon: Icon(Icons.mail),
       title: Text('Messages'),
     ),
     BottomNavigationBarItem(
       icon: Icon(Icons.person),
       title: Text('Profile')
     )
   ],
 ),);}

My code:

   void onTabTapped(int index) {
   setState(() {
 _currentIndex = index;
  });}  
  • 1

    Dude, put the code on your screen so we can help you. That piece of code you reported doesn’t show anything. I did a test here and the Drawer opens properly over the Bottomnavigation.

  • In case the Drawer is called only on the Home screen.

1 answer

0

According to the Flutter documentation, it is indicated that there is only one Widget Scaffold in your application, being the first Widget after the Materialapp (If you are using the same):

Troubleshooting - Nested Scaffolds

The Scaffold was Designed to be the single top level container for a Materialapp and it’s typically not necessary to Nest scaffolds. For example in a tabbed UI, Where the bottomNavigationBar is a Tabbar and the body is a Tabbarview, you Might be tempted to make each tab bar view a scaffold with a differently titled Appbar. It would be Better to add a Listener to the Tabcontroller that updates the Appbar.

The problem you are having is because of this, there is a Scaffold one level above the other; thus the Scaffold that is a level above will always let the BottomNavigator over the Drawer, since it is a widget that will always be above all others inside your tree.

A possible exit

You can change your logic and put the Drawer and the Bottomnavigation together in the same Scaffold (The one that is the highest level of the tree).
When you enter the menu Home you enable the Drawer and when it’s a different menu you disable.

Below is an example (You can test on Dartpad):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  
  void _onItemTapped(int index) {
    setState(() {
      if (index == 0)
        gestureEnabled = true;
      else
        gestureEnabled = false;
      _selectedIndex = index;
    });
  }
  
  bool gestureEnabled = true; // Valor default

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawerEnableOpenDragGesture: gestureEnabled,
      appBar: AppBar(
        title: Text("Drawer"),
        leadingWidth: (gestureEnabled)
          ? null
          : 0,
        leading: (gestureEnabled)
          ? null
          : Container(),        
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.