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.
– Luiz Augusto
Translated question. Thank you.
– Eduardo Bianchi Ribeiro
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 yourBottomNavigator
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.– Matheus Ribeiro
Thanks Matheus, it worked.
– Eduardo Bianchi Ribeiro