'how to create navigation for bottom_bar_with_sheet 2.1.0 plugin with mobx?
I don't know how to do navigation bringing dynamic data. This is my current code.
import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
iconTheme: IconThemeData(
color: Colors.blue,
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _bottomBarController = BottomBarWithSheetController(initialIndex: -1);
int selectedPosition = 4;
int _selectedIndex = -1;
@override
void initState() {
_bottomBarController.itemsStream.listen((i) {
if( i < 4 )
{
setState(() {
selectedPosition = -1;
_selectedIndex = i;
});
}
here would trigger the click of quick accesses, notes, profile, settings and alerts by BottomBarWithSheetItem
switch(i)
{
// case "HOME" : FutureBuilder: Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Home())); break;
case 0: print("Acesso rápido 0");break;
case 1: print("Acesso rápido 1");break;
case 2: print("Acesso rápido 2");break;
case 3: print("Acesso rápido 3");break;
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: Center(
child: Text(
"Criar navegacao aqui",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w900,
),
),
),
bottomNavigationBar: BottomBarWithSheet(
selectedIndex:_selectedIndex,
controller: _bottomBarController,
bottomBarTheme: BottomBarTheme(
mainButtonPosition: MainButtonPosition.middle, // posicao do botao de 'mais -> (+)'
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(25)),
),
itemIconColor: Colors.grey,
itemTextStyle: TextStyle(
color: Colors.grey,
fontSize: 10.0,
),
selectedItemTextStyle: TextStyle(
color: Colors.blue,
fontSize: 10.0,
),
),
onSelectItem: (index) {
setState(() {
_selectedIndex = index;
});
},
sheetChild: Padding(
padding: EdgeInsets.only(top:10,bottom:6),
child:Column(
children: <Widget>[
Divider(
height: 10,
thickness: 2,
color: Colors.blue,
indent: 0,
),
Expanded(
child: GridView.count(
physics: NeverScrollableScrollPhysics(), //kill scrollable
// shrinkWrap: true,
crossAxisCount: 4,
children: <Widget>[
_createBottomBarSheetChild(context, 'Home', Icons.api_sharp, _routeMenu, 4),
_createBottomBarSheetChild(context, 'Produto', Icons.apartment, _routeMenu, 5),
_createBottomBarSheetChild(context, 'Cliente', Icons.person, _routeMenu, 6),
_createBottomBarSheetChild(context, 'Proposta', Icons.account_balance_wallet_outlined, _routeMenu, 7),
],
),
),
Expanded(
child: GridView.count(
physics: NeverScrollableScrollPhysics(), //kill scrollable
// shrinkWrap: true,
crossAxisCount: 4,
children: <Widget>[
_createBottomBarSheetChild(context, 'Reservas', Icons.add_location_rounded, _routeMenu, 8),
_createBottomBarSheetChild(context, 'Unidade', Icons.workspaces_filled, _routeMenu, 9),
_createBottomBarSheetChild(context, 'Contratos', Icons.work, _routeMenu, 10),
_createBottomBarSheetChild(context, 'Tarefas', Icons.calendar_today, _routeMenu, 11),
],
),
),
],
),
),
items: [
BottomBarWithSheetItem(label: "Notas",icon: Icons.notes),
BottomBarWithSheetItem(label: "Perfil",icon: Icons.account_circle),
BottomBarWithSheetItem(label: "Configurações",icon: Icons.settings),
BottomBarWithSheetItem(label: "Alertas",icon: Icons.add_alert),
],
),
);
}
@override
Widget _createBottomBarSheetChild(BuildContext context, String name, IconData icon, Function action, posicao)
{
return GestureDetector(
child: Card(
elevation: 0,
margin: EdgeInsets.only(
left: 3.0,
top: 25,
right: 3.0
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
icon,
size: 26,
color: selectedPosition == posicao ? Colors.blue : Colors.grey,
),
Container(
margin: EdgeInsets.only(top: 4, bottom: 6, ),
child: Column(
children: [
Text(
name,
// textAlign: TextAlign.center,
style: TextStyle(
color: selectedPosition == posicao ?
Colors.blue :
Colors.grey,
),
),
Divider(
height: 16,
thickness: 2,
color: selectedPosition == posicao ? Colors.blue : Colors.grey,
indent: 30,
endIndent:30
),
],
)
),
],
),
),
onTap: () {
// Navigator.pop(context);
setState(() {
selectedPosition = posicao;
_bottomBarController.selectItem(posicao);
});
Navigator.of(context);
action(context, name, posicao);
},
);
}
here would trigger the click of the hidden buttons, such as product, home in the _createBottomBarSheetChild function
_routeMenu(context, rota, posicao)
{
print("rota ${rota.toUpperCase()}");
switch(rota.toUpperCase())
{
case "HOME" :""; posicao = 5;break;
case "PRODUTO":"";posicao = 6;break;
case "CLIENTE": "";posicao = 7; break;
case "PROPOSTA": "";posicao = 8; break;
case "RESERVA": "";posicao = 9; break;
case "UNIDADE": "";posicao = 10; break;
case "NOVIDADE": "";posicao = 11; break;
case "TAREFAS": "";posicao = 12; break;
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
