How do I insert my Hero-Widget-Page to a BottomNavigationBar? - flutter

Question

I am trying to build an App with a Bottomnavigationbar, which has my Home Screen on the first tab and my Hero-Widget-Page on the other tab.
The Problem is, that I need the context variable inside my Hero widget, and by using the List<Widget> for my different BottomNavigationBar Pages I only can display simple widgets like Text.
class _MyHomePageState extends State<MyHomePage>
{
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text( // on this place I want to add what is in the body now
'Home',
style: optionStyle,
),
Text(
'Devices',
style: optionStyle,
)
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: color_1,
title: Text("Device Manager"),
),
body: Row( // here I want to insert _widgetOptions.elementAt(_selectedIndex) instead of the Herowidget itself
children: [
Hero(
tag: 'matrix1',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix1.png'),
height: 100,
width: 100,),
Text("Matrix Kitchen", style: mytextStyle,),
]
)
),
),
Hero(
tag: 'matrix2',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix2.png'),
height: 100,
width: 100,),
Text("PARTY ROOM", style: mytextStyle,),
]
)
),
),
] // wrap children
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: color_1,
currentIndex: _selectedIndex,
selectedItemColor: color_2,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Home")),
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Devices"))
]
)
);
} // Widget build
} // class _MyHomePageState
}
Like this the Hero widget will be displayed on both pages, so the bottomNavigationBar is not working.
I thank everyone who has an idea on doing this right, I've already been trying this for two days!

Answer 1

This should work for you
class _MyHomePageStateState extends State<MyHomePageState> {
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
final _widgetOptions = <Widget>[
HeroPageHome(),
HeroPageDevices()
];
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: color_1,
title: Text("Device Manager"),
),
body: _widgetOptions.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: color_1,
currentIndex: _selectedIndex,
selectedItemColor: color_2,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Home")
),
BottomNavigationBarItem(
icon: Icon(Icons.devices),
title: Text("Devices")
)
]
)
);
}
}
Note that I created separate classes for your Hero pages.
class HeroPageHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Hero(
tag: 'matrix1',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix1.png'),
height: 100,
width: 100,
),
Text("Matrix Kitchen", style: mytextStyle,),
]
)
),
);
}
}
class HeroPageDevices extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Hero(
tag: 'matrix2',
child: GestureDetector(
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
child: Column(
children: <Widget>[
Image( image: new AssetImage('imgs/matrix2.png'),
height: 100,
width: 100,
),
Text("PARTY ROOM", style: mytextStyle,),
]
)
),
);
}
}