Flutter - Vertical Menu inside a bottomNavigaationBar

Asked

Viewed 357 times

0

I’m wearing a bottomNavigationBar in my App and the navigation is working perfectly, however, in one of the items(pages) I need to have another menu in the vertical position(columns) and when clicking on one of these items, I am using Inkwell for this, I need the selected page to be displayed inside the body of the page containing the bottomNavigationBar.

I’ve tried many ways. Using setState, using Bloc, but none of them worked. Either nothing happens or the selected page is displayed with the black background and without the Appbar and bottomNavigationBar.

Could someone help me keep my sanity ?

thanks in advance

home.Dart

import 'package:compesa_app/screens/contatos.dart';
import 'package:compesa_app/screens/menu.dart';
import 'package:compesa_app/screens/teste.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:compesa_app/screens/teste2.dart';
import 'package:compesa_app/blocs/menu_bloc.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  final List<Widget> _widgetOptions = [
    Teste(),
    ContatosTab(),
    WorkPage(),
    Menu(),
  ];

  @override
  Widget build(BuildContext context) {

    MenuBloc bloc = MenuBloc();

    @override
    void dispose(){
      super.dispose();
      bloc.close();
    }

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Container(
          height: 25,
          child: Image.asset(
              "assets/images/Nova-Marca-Compesa-alternativa_branco.png"),
        ),
        elevation: 0,
        backgroundColor: Color.fromARGB(255, 33, 64, 154),
      ),
      body: StreamBuilder<int>(
        stream: bloc,
        builder: (context, snapshot) {
          return Center(child: _widgetOptions.elementAt(snapshot.data));
        }
      ),
      bottomNavigationBar: CurvedNavigationBar(
        color: Color.fromARGB(255, 33, 64, 154),
        backgroundColor: Colors.white,
        buttonBackgroundColor: Color.fromARGB(255,139,197,67),
        height: 50,
        items: <Widget>[
          Icon(Icons.multiline_chart, size: 20, color: Colors.white ),
          Icon(Icons.business, size: 20, color: Colors.white ),
          Icon(FontAwesomeIcons.clipboard, size: 20, color:  Colors.white),
          Icon(Icons.menu, size: 20, color: Colors.white ),
        ],
        animationDuration: Duration(
          milliseconds: 200
        ),
        index: 0,
        animationCurve: Curves.bounceInOut,
        onTap: (index){
          bloc.add(index);
        },
      ),
    );
  }
}

Dart menu.

import 'package:compesa_app/tiles/drawer_tile.dart';
import 'package:flutter/material.dart';

class Menu extends StatelessWidget {
  PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: ListView(padding: const EdgeInsets.all(8), children: <Widget>[
        Container(
          padding: EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                DrawerTile(Icons.add_to_home_screen, "Registrar leitura",
                    pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(Icons.headset_mic, "Reportar falta d´água",
                    pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(
                    Icons.headset_mic, "Reportar vazamento", pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(Icons.event_note, "Acompanhar protocolo",
                    pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(Icons.calendar_today, "Calendário de abastecimento",
                    pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(Icons.home, "Lojas físicas", pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(Icons.contact_phone, "Contato", pageController, 0),
                Divider(
                  color: Color.fromARGB(255, 139, 197, 67),
                ),
                DrawerTile(Icons.devices_other, "Registrar leitura",
                    pageController, 0),
              ]),
        ),
      ])),
    );
  }
}

drawer_tile.Dart

import 'package:compesa_app/blocs/menu_bloc.dart';
import 'package:flutter/material.dart';

class DrawerTile extends StatelessWidget {

  final IconData icon;
  final String text;
  final PageController controller;
  final int page;

  DrawerTile(this.icon, this.text, this.controller ,this.page);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: (){ 
          bloc.add(page);
        },
        child: Container(
          height: 60.0,
          child: Row(
            children: <Widget>[
              Icon(icon,
              size: 32.0,
              color: Color.fromARGB(255, 33, 64, 154), //Color.fromARGB(255, 33, 64, 154),
              
              ),
              SizedBox(width: 25.0,),
              Text(
                text,
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  //color: Color.fromARGB(255,139,197,67), //Color.fromARGB(255, 33, 64, 154),
                ),
                )
            ],
          ),
        ),
      ),
    );
  }
}

menu_bloc.Dart

import 'dart:async';
import 'package:bloc/bloc.dart';

class MenuBloc extends Bloc<int, int>{
  @override
  get initialState => 0;

  @override
  Stream<int> mapEventToState(int event)async*{
    if (event == null ) {
      event = 0;
    }
    yield event;
  }
}
  • Welcome to Stack Overflow in English. Please click edit and translate the question.

  • 2

    Translated question. Thank you.

  • A tip: On the screen you will do the vertical menu, put a TabView where each tab will be a screen of this vertical menu. So your BottomNavigator can continue the way it is, you will only have to change the visible tab by clicking on a vertical menu item. If I can get some time today, I’ll put a detailed answer here.

  • Thanks Matheus, it worked.

No answers

Browser other questions tagged

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