How to properly modularize flutter pages - flutter

Question

I am new to flutter so I am trying to understand how to properly make my code more modular. I have a page with buttons on it, and am trying to change the color of the buttons when they are pressed. When I have the buttons coded directly into the page, and change use setState, the buttons change color as they should. But if I move the buttons to their own dart file, they will change colors on pressed, but not change back if a new button is selected. Any advice on where I am going wrong?
Here is the code for one of the buttons:
class DiscoverButton extends StatefulWidget {
DiscoverButton({
Key? key,
required this.pressed,
}) : super(key: key);
late int pressed;
// DiscoverButton(this.pressed);
#override
State<DiscoverButton> createState() => _DiscoverButton();
}
class _DiscoverButton extends State<DiscoverButton> {
// _DiscoverButton(pressed) {}
#override
Widget build(BuildContext context) {
// late bool pressed = false;
return TextButton(
// iconSize: 45,
// color: AppColor.AppDarkBlueColor,
style: TextButton.styleFrom(
foregroundColor: widget.pressed == 0
? AppColor.DarkBlueTextColor
: AppColor.DiscoverPageLightText),
onPressed: () async {
setState(() {
widget.pressed = 0;
});
},
child: const Text(
'Discover',
style: TextStyle(
fontSize: 18,
),
));
}
}
And here is the code where it is being inserted into the page:
bottomNavigationBar: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: AppColor.AppLightBlueColor),
height: (MediaQuery.of(context).size.height / 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
DiscoverButton(pressed: selectedButton)

Answer 1

You can also create your own button.
Example below:
class TextButton extends StatefulWidget {
final Function() onTap;
const TextButton({
Key? key,
required this.onTap,
}) : super(key: key);
#override
State<TextButton> createState() => _TextButtonState();
}
class _TextButtonState extends State<TextButton> {
bool _pressed = false;
_onTapStateChange(pressed) {
setState(() {
_pressed = pressed;
});
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) {
_onTapStateChange(true);
},
onTapUp: (_) {
_onTapStateChange(false);
},
onTapCancel: () {
_onTapStateChange(false);
},
onTap: widget.onTap,
child: Text(
"Text button",
style: TextStyle(color: _pressed ? Colors.blue : Colors.black),
),
);
}
}
This text will change of color when being pressed: blue when pressed, black when not pressed.