Question 76642 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Container not changing on tap

I am trying to create a container with a gesture detector that changes color onTap, but for some reason it is not doing so. I have a bool and a function to setstate and change it, and in the backgroundColor of the container I have it changing based on the color of the bool. Any advice would be greatly appreciated.

import 'package:flutter/material.dart';

class VotingButton extends StatefulWidget {
  @override
  State<VotingButton> createState() => _VotingButtonState();
}

class _VotingButtonState extends State<VotingButton> {
  bool savePressed = false;

  void buttonPressed() {
    setState(() {
      if (savePressed == false) {
        savePressed == true;
      } else if (savePressed == true) {
        savePressed == false;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 18.0),
      child: GestureDetector(
        onTap: () {
          buttonPressed;
          print(savePressed); //stays false for some reason
        },
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: savePressed ? Colors.blue : Colors.red[400],
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 40),
            child: Text(
              'I'll be Here!',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}
Tags:

4

Answers


  1. 0 
    import 'package:flutter/material.dart';

class VotingButton extends StatefulWidget {
  @override
  State<VotingButton> createState() => _VotingButtonState();
}

class _VotingButtonState extends State<VotingButton> {
  bool savePressed = false;

  void buttonPressed() {
    setState(() {
      if (savePressed == false) {
        savePressed == true;
      } else if (savePressed == true) {
        savePressed == false;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 18.0),
      child: GestureDetector(
        onTap: () {
          //You are referencing but not calling here, you should use ()
          buttonPressed();
          print(savePressed); //stays false for some reason
        },
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: savePressed ? Colors.blue : Colors.red[400],
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 40),
            child: Text(
              'I'll be Here!',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    In GestureDetector you not calling buttonPressed method properly
    Try this:

    GestureDetector(
        onTap: buttonPressed,
         ......

    And optimise code by making change into buttonPressed method
    Try this:

    void buttonPressed() {
    setState(() {
      savePressed = !savePressed;
    });
  }
    Login or Signup to reply.
  3. 0

    Try this, I change a little bit your buttonPressed method, and GestureDetector onTap. Hope it helps

    import 'package:flutter/material.dart';

class VotingButton extends StatefulWidget {
  @override
  State<VotingButton> createState() => _VotingButtonState();
}

class _VotingButtonState extends State<VotingButton> {
  bool savePressed = false;

  void buttonPressed() {
    setState(() {
      savePressed = !savePressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 18.0),
      child: GestureDetector(
        onTap: () {
          buttonPressed();
          print(savePressed);
        },
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: savePressed ? Colors.blue : Colors.red[400],
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 40),
            child: Text(
              'I'll be Here!',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  4. 0

    Try the following code:

    import 'package:flutter/material.dart';

class VotingButton extends StatefulWidget {
  @override
  State<VotingButton> createState() => _VotingButtonState();
}

class _VotingButtonState extends State<VotingButton> {
  bool savePressed = false;

  void buttonPressed() {
    setState(() {
      savePressed = !savePressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 18.0),
      child: GestureDetector(
        onTap: () {
          buttonPressed();
          print(savePressed);
        },
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: savePressed ? Colors.blue : Colors.red[400],
          ),
          child: const Padding(
            padding:  EdgeInsets.symmetric(vertical: 8.0, horizontal: 40),
            child: Text(
              'I'll be Here!',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search