0

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)
dstoner
  • 49
  • 1
  • 5

1 Answers1

-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.

Joey
  • 1
  • 1