How to define content and code for a button icon - flutter

Question

I have just started programming with Flutter and Dart
And I wanted to know how to set the code and content for a tab or button
For example, I put a button icon in the bottom navigator and what code and method is needed so that after clicking on that button, a new page will open one by one and the operation will be performed.
Thanks.

Answer 1

For bottom navigation bar you can use like this:
`
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
backgroundColor: Colors.green,
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
backgroundColor: Colors.purple,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
backgroundColor: Colors.pink,
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
`
You need to set onTap() for actions when you press the button and setState() to update the state of the widget.
All buttons (TextButton, ElevatedButton ect) will be having onTap() property, you can call a method inside onTap().
For more details visit this: https://flutter.dev/docs/development/ui/widgets/material#Buttons

Answer 2

This is a very specific use case and has a different solution to what you would usually do with buttons.
The documentation for the BottomNavigationBar() shows a few code examples. You can copy paste that and modify it to suit your need. What they basically do is add BottomNavigationBar() items and add an onChanged/onTap method which you would use to change the page.
For buttons in general, they would have an onPressed parameter where you can pass a function or an anonymous function (e.g. () {your code here}). Flutter provides you with a few default buttons such as ElevatedButton() and TextButton() which you can read more about here (https://api.flutter.dev/flutter/material/ElevatedButton-class.html) and here (https://api.flutter.dev/flutter/material/TextButton-class.html). They have parameters which allow you to tweak them. This is where you can run functions when they are pressed.
If you want to make a non-button widget clickable you can use a GestureDetector() which you can read more about here (https://api.flutter.dev/flutter/widgets/GestureDetector-class.html). It is also has an onTap similar to the buttons but also has much more options such as long, double, triple, etc. taps as well as gestures like swipes.
It all comes down to getting used to all those different widgets and you will get familiar with them through practice.