-2

Estou usando um Bottom Menu e recebendo chamadas através de um index. Porém, o meu Bottom Menu é exibido por cima do meu Drawer Menu. Como posso corrigir isso?

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')
     )
   ],
 ),);}

Meu código:

   void onTabTapped(int index) {
   setState(() {
 _currentIndex = index;
  });}  
2
  • 1
    Cara, posta o código da sua tela para que possamos lhe ajudar. Esse pedaço de código que você informou não mostra nada. Eu fiz um teste aqui e o Drawer abre corretamente por cima do Bottomnavigation. 14/10/2020 às 18:21
  • No caso o Drawer é chamado apenas na tela Home. 14/10/2020 às 19:17

1 Resposta 1

-1

De acordo com a documentação do Flutter, é indicado que exista apenas um Widget Scaffold na sua aplicação, sendo ele o primeiro Widget após o MaterialApp (Caso esteja usando o mesmo):

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.

O problema que você está tendo é por conta disso, existe um Scaffold um nível acima do outro; Sendo assim o Scaffold que está um nível acima sempre deixará o BottomNavigator por cima do Drawer, já que é um Widget que sempre ficará acima de todos os outros dentro de sua árvore.

Uma possível saída

Você pode mudar sua lógica e colocar o Drawer e o Bottomnavigation juntos no mesmo Scaffold (Aquele que for o nível mais superior da árvore).
Quando entrar no menu Home você habilita o Drawer e quando for um menu diferente tu desabilita.

Segue abaixo um exemplo (Você pode testar no 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,
      ),
    );
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .