How to put a list item in bottomnavigation using flutter? - flutter

Question

I hope the my title is enough to understand my problem, How to put a list item in bottomnavigation using flutter? if not please refer in the picture below and code i provided.
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
backgroundColor: Colors.orangeAccent,
selectedItemColor: Colors.white,
unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
onTap: (value) {
// Respond to item press.
setState(() => _currentIndex = value);
},
items: [
BottomNavigationBarItem(
title: Text('Clothes'),
icon: Icon(Icons.design_services_rounded),
),
BottomNavigationBarItem(
title: Text('Colors'),
icon: Icon(Icons.colorize_rounded),
),
BottomNavigationBarItem(
title: Text('Ideas'),
icon: Icon(Icons.lightbulb_outline_rounded),
),
BottomNavigationBarItem(
title: Text('Profile'),
icon: Icon(Icons.face_rounded),
),
],
),
);
}
}
if i clicked the Clothes , this will happen.

Answer 1

Edit 1:
How this is done is as follows:
// Keep this outside your Widget as it is a constant.
final List<Widget> _widgets = <Widget>[
ClothesPage(),
ColorsPage(),
IdeasPage(),
ProfilePage(),
];
return Scaffold(
// This body is new.
body: _widgets[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
backgroundColor: Colors.orangeAccent,
selectedItemColor: Colors.white,
unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
onTap: (value) {
_currentIndex = value;
showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_widgets[_currentIndex],
SizedBox(
// Use whatever height you desire.
height: 90,
),
],
);
},
);
},
items: [
BottomNavigationBarItem(
title: Text('Clothes'),
icon: Icon(Icons.design_services_rounded),
),
BottomNavigationBarItem(
title: Text('Colors'),
icon: Icon(Icons.colorize_rounded),
),
BottomNavigationBarItem(
title: Text('Ideas'),
icon: Icon(Icons.lightbulb_outline_rounded),
),
BottomNavigationBarItem(
title: Text('Profile'),
icon: Icon(Icons.face_rounded),
),
],
),
);
// I have put a card here, you can put any other Widget for the same.
// Do the same for others.
class ProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Text(
"Profile",
),
),
);
}
}
Now, I hope this is what you expect to do via the Bottom Navigation Bar.